Eine gute Tabelle richtet vergleichbare Informationen an gemeinsamen Zeilen und Spalten aus. So musst du nicht jedes Angebot als eigenen Absatz lesen und die Unterschiede im Kopf behalten. Voraussetzung ist, dass die Kriterien wirklich dasselbe bedeuten und ihre Einheiten klar sind.
Eine schlichte Tabelle mit klarer Zuordnung
Das Beispiel der GOV.UK-Table-Komponente zeigt Zeitabschnitte und zugehörige Beträge. Eine Überschrift benennt den Inhalt, Spaltenköpfe erklären die beiden Dimensionen und horizontale Linien trennen die Zeilen. Die Gestaltung verwendet keine Balken, um Größenverhältnisse zu suggerieren.
Für eine eigene Tabelle zählt, ob dieselben Kriterien über alle Zeilen hinweg gleich benannt und dargestellt werden. Beispielwerte erläutern dieses Prinzip; sie ersetzen keine sachliche Prüfung der später verwendeten Daten.
Gleiche Kriterien machen Unterschiede sichtbar
Für einen Angebotsvergleich sollten alle Spalten dieselbe Frage beantworten. Wenn ein Paket „unbegrenzt“ nennt und ein anderes nur „Premium“, fehlt die gemeinsame Vergleichsbasis. Schreibe zunächst die Kriterien unabhängig vom Layout auf. Ergänze Einheiten und erkläre, was eine leere Zelle bedeutet.
Leere Felder, Gedankenstriche und „nicht enthalten“ sind nicht automatisch gleichbedeutend. Ein Gedankenstrich kann auch „nicht bekannt“ heißen. Entscheide dich für eine eindeutige Darstellung. Wenn ein Wert nur unter einer Bedingung gilt, platziere die Erklärung so, dass sie nicht vom zugehörigen Wert getrennt wird.
Struktur auch im HTML
Eine Tabelle braucht mehr als optisch ausgerichtete Textblöcke. Die W3C-Anleitung zu Tabellen erläutert Tabellenüberschriften und die Zuordnung von Kopf- und Datenzellen. Eine sinnvolle Beschriftung hilft, die Tabelle als Ganzes einzuordnen. Komplexe verschachtelte Kopfzeilen verlangen zusätzliche Sorgfalt.
Rechtsbündige Zahlen können den Größenvergleich unterstützen; Text braucht dagegen einen gut lesbaren Einstieg. Prüfe auch, ob Dezimalstellen und Einheiten konsistent sind. Eine künstlich genaue Zahl mit drei Nachkommastellen kann eine Genauigkeit behaupten, die deine Ausgangsdaten nicht besitzen.
Drei Aufgaben für den Test
Bitte jemanden, den günstigsten passenden Eintrag zu finden, einen bestimmten Unterschied zu erklären und die Bedingung eines Wertes zu nennen. Beobachte, ob dabei Zeilen verrutschen oder Fußnoten übersehen werden. Wenn das passiert, helfen nicht zwangsläufig mehr Linien. Manchmal sind weniger Kriterien oder eine andere Reihenfolge sinnvoller.
Gleiche Spalten brauchen gleiche Bedeutung
Eine Tabelle ermöglicht Vergleiche nur, wenn die Werte tatsächlich unter denselben Bedingungen stehen. Ein monatlicher Betrag ist nicht ohne Erklärung mit einem Jahrespreis vergleichbar. Auch unterschiedliche Leistungsumfänge können einen scheinbar klaren Preisvergleich verzerren. Kläre deshalb zuerst die inhaltlichen Kriterien und erst danach Spaltenbreiten, Linien und Farben.
Benutze eindeutige Überschriften und konsistente Einheiten. Wenn eine Einheit für die gesamte Spalte gilt, kann sie im Spaltenkopf stehen. Bei gemischten Einheiten muss die Zuordnung dagegen unmittelbar verständlich bleiben. Prüfe auch leere Zellen: Ein fehlender Wert, ein nicht zutreffender Wert und die Zahl null bedeuten unterschiedliche Dinge und sollten nicht kommentarlos gleich aussehen.
Die Ausrichtung unterstützt das Lesen
Zahlen lassen sich besser systematisch prüfen, wenn vergleichbare Stellen zusammenstehen. Verwende innerhalb einer Spalte ein konsistentes Format für Dezimalstellen und Tausender. Text braucht dagegen einen gut auffindbaren Anfang. Die Entscheidung über die Ausrichtung folgt somit dem Inhalt, nicht dem Wunsch nach einer überall symmetrischen Fläche.
Linien und Flächen sollten die Zuordnung erleichtern. Wenn jede Zelle einen starken Rahmen erhält, konkurriert das Raster möglicherweise mit den Daten. Beginne mit wenigen Trennungen und prüfe, ob Zeilen und Spalten noch zuverlässig verfolgt werden können. Bei umfangreichen Tabellen kann eine zusätzliche Hervorhebung sinnvoll sein, sollte aber eine konkrete Lesebewegung unterstützen.
Ein Vergleichstest braucht eine präzise Frage
Bitte eine Person beispielsweise, den günstigeren Tarif bei gleichem Leistungsumfang zu finden oder den Unterschied zwischen zwei Zeiträumen zu erklären. Beobachte, welche Überschriften und Werte sie dafür zusammenführen muss. Wenn sie mehrfach nach einer Einheit sucht, ist das ein Hinweis auf fehlenden Kontext. Wenn sie einen Wert der falschen Zeile zuordnet, ist die räumliche Führung zu prüfen.
Beziehe Sortierung und schmale Ansichten ein, sofern sie angeboten werden. Eine sortierte Tabelle braucht weiterhin einen erkennbaren Zusammenhang zwischen Überschrift und Werten. Eine reduzierte mobile Ansicht darf wesentliche Bedingungen des Vergleichs nicht still entfernen. Gute Tabellengestaltung beginnt bei der Vergleichsfrage und endet erst beim tatsächlich verstandenen Unterschied.
Auf kleinen Bildschirmen entsteht eine zusätzliche Aufgabe: Die Beziehungen müssen trotz geringerer Breite verständlich bleiben. Dazu gibt es den eigenen Beitrag Tabellen auf dem Smartphone. Geht es statt um mehrere Angebote um die Angaben einer Person, passt eine Zusammenfassung vor dem Absenden häufig besser als eine Vergleichstabelle.
