Web-Typografie: 11 Tipps für gut lesbare Tabellen

Gestalten Sie Tabellen zum Lesen, nicht zum Ansehen

Gute Webdesigner wägen stets gewissenhaft ab, welcher Font und welche Schriftgröße für den Fließtext einer Website angemessen ist. Tabellen werden dagegen eher stiefmütterlich behandelt. Manchmal gleichen diese Tabellen mehr Bildern als Texten und der Informationsgehalt geht gänzlich verloren. Unsere Tipps zeigen, wie Sie Tabellen gestalten, bei denen der Inhalt im Mittelpunkt steht und die trotzdem richtig gut aussehen.

Wozu dienen Tabellen auf Webseiten?

Die meisten Tabellen begegnen uns in Kalkulationsprogrammen. Hier dienen sie zur Berechnung und Verarbeitung von Daten. Auf Webseiten dienen sie jedoch einem ganz anderen Zweck: der Präsentation von Ergebnissen und Informationen.

Gut gestaltete Tabellen präsentieren die Daten mehrdimensional und übersichtlich, sodass diese in Bezug zueinander gesetzt oder verglichen werden können. Die in der Tabelle enthaltenen Informationen müssen daher stets im Fokus einer optimalen Darstellung stehen.

1. Gestalten Sie jede Tabelle für den Leser

Tabellen gibt es in den unterschiedlichsten Formen. Einige enthalten ausschließlich Zahlen, andere bestehen aus einer komplexen Mischung aus Daten und Textinformationen. Einige Tabellen sind dazu da, um von oben nach unten durchgesehen zu werden, andere lassen sich Reihe für Reihe lesen. U-Bahn-Fahrpläne, technische Spezifikationen oder Preisvergleiche - Tabellen finden sich überall.

Egal, um welche spezifischen Daten es sich handelt, ein Aspekt bleibt bei allen Tabellen gleich: Schon beim ersten Hinsehen sollte der Leser ein Verständnis für die dargestellten Informationen erhalten. Widerstehen Sie daher der Versuchung, die Daten möglichst dicht zu packen. Versetzen Sie sich stattdessen in die Lage des Lesers. Bereiten Sie jede Tabelle so auf, dass es dem Leser leicht fällt, die enthaltenen Informationen zu verarbeiten.

2. Halten Sie die Tabelle flexibel

Der erste Impuls mag dazu verleiten, einer Tabelle eine feste Breite zu geben, damit der umliegende Text gut darum fließt. Damit wird die Tabelle jedoch zu einem optischen Stilelement degradiert. Starke Hintergrundfarben und eine auffällige Umrandung verstärken diesen Eindruck und lassen den Inhalt der Tabelle völlig in den Hintergrund treten.

Sehen Sie die Tabelle daher als Text, nicht als Grafik. Wenn der Inhalt der Tabelle das nicht vorgibt, vermeiden Sie es auch, den Spalten identische Breiten zu vorzugeben. Spalten mit viel Text sollten breiter, Spalten mit wenigen Ziffern schmaler sein. Damit erleichtern Sie dem Leser ebenfalls den Überblick.

Jeder einzelnen Spalte eine individuelle Breite zuzuweisen, mag aufwendig erscheinen, lässt sich jedoch unkompliziert bewerkstelligen. Legen Sie einfach keine Spalten-Breiten fest und überlassen Sie das Festlegen der optimalen Breiten dem Webbrowser. Diese bedienen sich dazu geeigneter und bewährter Algorithmen.

3. Minimales Design unterstützt die Lesbarkeit

Linien und Rahmen sperren die Informationen der Tabelle ein. Geschicktes Tabellen-Design kommt gänzlich ohne Füllungen und Striche aus. Gehen Sie den ersten Schritt, in dem Sie auf die Umrandung verzichten. Danach prüfen Sie alle Linien zwischen den Spalten und Zeilen auf Ihre Notwendigkeit und entfernen überflüssige Elemente entsprechend.

Eine Hintergrund-Füllung mag auf den ersten Blick gut aussehen, doch auch sie lenkt vom Inhalt ab. Das gilt insbesondere für Füllungen, die jede zweite Zeile hervorheben und dadurch die umgebenden Zeilen in der Wahrnehmung benachteiligen.

Die wichtigsten Werkzeuge für das minimale Tabellen-Design sind die Text-Ausrichtung, die Gruppierung und Leerräume. Mit dem geschickten Einsatz dieser drei Werkzeuge gestalten Sie Tabellen, die sowohl optisch attraktiv als auch ausgesprochen gut lesbar sind.

4. Linksbündige Texte und rechtsbündige Zahlen

Die Lesbarkeit von Text und Zahlen leidet, wenn sie zentriert ausgerichtet werden. Text lässt sich am besten Lesen, wenn er linksbündig geschrieben ist. Als Zeilenfall ist der Flattersatz angemessen und für diese meist sehr kurzen Texte dem Blocksatz vorzuziehen.

Zahlen sollten dagegen generell rechtsbündig formatiert sein. Das ermöglicht es dem Leser, die Größenordnungen der Zahlen besser einzuschätzen. Die Überschriften folgen in Ihrer Bündigkeit dem Satz der darunter liegenden Daten. Also ebenfalls linksbündig für Texte und rechtsbündig für Zahlen.

5. Bündigkeit mit dem Dezimalpunkt erzielen

Manchmal müssen Zahlen mit unterschiedlicher Anzahl von Nachkommastellen dargestellt werden. Um dem Leser auch in diesem Fall die schnelle Übersicht zu erleichtern, ist unsere Empfehlung, die Zahlen bündig mit dem Dezimalpunkt darzustellen.

Diese Darstellungsart war schon in HTML 4 vorgesehen, wurde in der Praxis aber nicht unterstützt. Auch wenn der Support noch nicht überall verbreitet ist, so bietet CSS mit text-align die gleiche Möglichkeit an.

Die Syntax der Funktion stellen wir unten im Beispiel dar. Setzen Sie das gewählte Trennsymbol in Anführungszeichen und nennen danach die gewünschte Bündigkeit. Das Trennsymbol ist weitgehend frei wählbar.

td { text-align: "." center; }

6. Dicktengleiche Ziffern verwenden

Temperaturverläufe, Finanzübersichten oder Busfahrpläne: Viele Tabellen bestehen überwiegend oder gänzlich aus Ziffern. Der Leser wird diese Tabellen daher häufig von oben nach unten überfliegen, um spezifische Datenpunkte zu finden oder Vergleiche anzustellen.

Dieser schnelle Überblick fällt leicht, wenn die Einer-, Zehner- und Hunderter-Stellen der Ziffern vertikal exakt übereinander liegen. Damit die Stellen nicht flattern, müssen alle Ziffern die gleiche Breite haben. In der Typografie wird dabei von der gleichen Dickte gesprochen.

Ziffern gleicher Dickte sind aus nicht-proportionalen, auch Monospace genannten, Schriftarten bekannt. Doch häufig kann auf den Einsatz einer zweiten Schriftart verzichtet werden. Denn viele gut ausgestattete proportionale Schriftarten verfügen über sogenannte tabellarische Ziffern.

Diese tabellarischen Ziffern besitzen gleiche Dickten und weitere kleine Anpassungen, die das Lesen von großen Zahlenmengen erleichtern. So ist insbesondere die tabellarische Ziffer 1 häufig mit einem Unterstrich versehen und die tabellarische Ziffer 0 etwas schmaler als im proportionalen Satz gestaltet. Mit der Definition font-variant-numeric werden die für den Einsatz in Tabellen optimierten Ziffern aufgerufen:

table {
    font-variant-numeric: lining-nums tabular-nums;
}

7. Nutzen Sie Leerräume zum Gruppieren

Nachdem Linien und Füllungen weggefallen sind, verbleibt der Leerraum, um den Nutzern das Lesen der Tabelle zu erleichtern. An dieser Stelle ist es nützlich, alle Gedanken an Gitternetze über Bord zu werfen und stattdessen tief in die Werkzeugkiste der Typografie zu greifen.

In traditionellem HTML besitzt jede einzelne Zelle eine eigene Umrandung. Für die optimale Kontrolle der Platzierung gilt es daher, zunächst den Raum zwischen den benachbarten Zellrändern zu eliminieren:

table {
    border-collapse: collapse;
}

Als Nächstes geht es daran, den Innenabstand (Padding) zu definieren. Dabei handelt es sich um den Abstand zwischen dem Zelleninhalt und dem Zellenrand nach oben, rechts, unten und links.

Unser Beispiel zeigt gute Startwerte. Der genannte, kleine Abstand nach oben dient einer optisch ansprechenden Trennung der Zeilen untereinander. Die spezifischen Werte passen Sie je nach vorhandener Textmenge und gewählter Schriftart gegebenenfalls an.

td, th {
    padding: .125rem .25rem;
    line-height: 1;
}

8. Positionierung von Überschriften

Falls Sie Ihre Tabelle in ein <figure> Element einbetten, nutzen Sie idealerweise <figcaption> für die Überschrift. Das <figcaption> kann oberhalb oder unterhalb der Tabelle definiert werden.

Vermeiden Sie jedoch <figure> als umgebendes Element für Ihre Tabelle. Verwenden Sie das passend benannte HTML-Element <caption>. Im Code muss <caption> unmittelbar nach dem Tag <table> gesetzt werden und vor den ersten Tabellenzeilen.

Auf der Webseite kann die Titelzeile per CSS auf Wunsch auch unterhalb der eigentlichen Tabelle dargestellt werden:

caption { caption-side: bottom; }

9. Anpassungsfähigkeit für kleine Bildschirme

Tabellen benötigen eine gebührende Mindestbreite, um alle Informationen sinnvoll darzustellen. Für einen ansprechenden Fließtext reichen oft schon 45 - 75 Zeichen aus, um diesen angemessen darzustellen. Das ist für die meisten Tabellen zu wenig.

Wählen Sie deshalb eine Schriftart mit schmaler Laufweite aus. Eine zusätzliche Möglichkeit besteht darin, die Punktgröße der Schrift zu verkleinern. Die Lesbarkeit muss dabei stets im Vordergrund stehen. Daher sollten Sie gegebenenfalls nur eine dieser beiden Optionen wählen.

Auch in der Höhe ist der Platz für eine Tabelle auf kleinen Bildschirmen oft knapp. Sehr viel wertvollen vertikalen Raum sparen Sie, wenn Sie die Spalten-Überschriften leicht schräg ansetzen. Dazu ist etwas CSS notwendig, doch die Lesbarkeit bleibt ausgesprochen gut erhalten.

Achten Sie in unserem Beispiel auf die Positionierung der Überschrift als absolut. Dadurch bleibt die Datenspalte selbst weiterhin schmal:

th {
    transform-origin: bottom left;
    position: absolute;
}
th {
    transform: translate(2.58em,-2em) rotate(-60deg);
}
th {
    transform: translate(5.14em,-2em) rotate(-60deg);
}

10. Ermöglichen Sie horizontales Scrollen

Manche Tabellen sind allerdings so breit, dass sie sich mit den verfügbaren Anpassungen auf kleinen Bildschirmen kaum oder teilweise unlesbar in voller Breite darstellen lassen. Hier hilft es, die Tabelle in einer komfortabel lesbaren Schriftgröße zu setzen und den Webbrowser mitarbeiten zu lassen.

Überlassen Sie die Darstellung der Tabelle dem Webbrowser, so wird er einen Teil der Tabelle außerhalb des sichtbaren Fensterbereiches darstellen. Das ist kein Problem, wenn Sie dem Leser die Möglichkeit geben, diese außerhalb des Bildschirms gelegenen Teile zu erreichen.

Legen Sie dies mit den folgenden CSS-Regeln fest. Damit kann der Leser die Tabelle unabhängig vom restlichen Text horizontal verschieben. So kann er alle Teile der Tabelle erreichen:

table {
    max-width: 100%;
    overflow-x: scroll;
}

Damit der Webbrowser die Tabelle so weit wie möglich komprimiert, ist es wichtig, keine feste Breite vorzugeben. Die gute Lesbarkeit der Tabelle wird dabei durch den geschickten Einsatz geschützter Leerzeichen und white-space:nowrap erzielt.

11. Linearisierung einfacher Tabellen

Eine weitere Möglichkeit, breite Tabellen für sehr schmale Bildschirme aufzubereiten, besteht in der Linearisierung. Diese Möglichkeit bietet sich insbesondere für sehr einfach strukturierte Tabellen an, wie beispielsweise ein Mitarbeiterverzeichnis.

Mit der gleichen Textauszeichnung lässt sich eine Tabelle besonders schmal oder auch in normaler Breite darstellen, je nachdem wie viel seitlicher Platz zur Verfügung steht. Das wird durch das Hinzufügen der Auszeichnung data-title zu dem Attribut jeder Zelle ermöglicht:

<th data-title="Name">Mustermann, Eva</th>
<td data-title="Team">Support</td>
<td data-title="Etage">3</td>
<td data-title="Raum">1234</td>

Um die Linearisierung auf kleinen Bildschirmen zu erzeugen, sind vier Schritte notwendig. Im ersten Schritt wird die Seitenbreite benannt, bei der die geänderte Darstellung erfolgen soll. Im zweiten Schritt wird mit display:block festgelegt, dass die Tabellen Elemente vertikal ausgerichtet werden, anstelle von horizontal. Als nächster Schritt werden leere Zellen ausgeblendet. Der letzte Schritt, das Anzeigen der zuvor festgelegten Beschriftung, ist optional.

Die unten genannten CSS-Zeilen reichen aus, die beschriebene Funktionalität zu erzeugen. Ergänzen Sie diese Zeilen je nach dargestellten Informationen gegebenenfalls noch um ästhetische Merkmale:

@media (max-width: 25em) {
  table, caption, tbody, tr, th, td {
    display: block;
    text-align: left;
  }
  thead, th:empty, td:empty {
    display: none;
    visibility: hidden;
  }
  th[data-title]:before, td[data-title]:before {
    content: attr(data-title) ": ";
    display: inline-block;
    width: 3.5em;
  }
}

Gut lesbare Tabellen brauchen durchdachtes Styling

Oft sind es gerade die kleinen Kniffe, die einen großen Unterschied bewirken. Mit den hier gezeigten Möglichkeiten aus unserem Webdesign-Alltag möchten wir Ihnen zeigen, wie einfach es sein kann, jegliche Datenpräsentation in einer Tabelle mit einigen cleveren Kniffen gut lesbar zu gestalten.