Tabellen auf Websites: lesbar und barrierearm gestalten

Tabellen helfen, Zahlen und Eigenschaften direkt zu vergleichen. Sie sind besonders nützlich, wenn jede Zeile denselben Aufbau hat: etwa bei Terminen, Preisen oder technischen Daten. Für Fließtext, Gestaltung und lange Beschreibungen sind andere Formate meist leichter zu lesen.

Wann ist eine Tabelle die richtige Wahl?

Eine Tabelle eignet sich, wenn Leserinnen und Leser Werte anhand fester Spalten vergleichen möchten. Ein Beispiel ist eine Übersicht mit Veranstaltung, Datum, Ort und Anmeldelink. Gibt es dagegen nur zwei kurze Aussagen, kann eine einfache Liste verständlicher sein. Auf kleinen Bildschirmen werden breite Tabellen schnell unübersichtlich; begrenzen Sie deshalb die Zahl der Spalten.

So wird eine Tabelle verständlich aufgebaut

Wählen Sie eine kurze Überschrift, benennen Sie die Spalten eindeutig und halten Sie Einheiten konsistent. Eine Spalte „Preis in Euro“ ist klarer als „Wert“. Sortieren Sie Zeilen nachvollziehbar, beispielsweise nach Datum. Ergänzen Sie bei Bedarf eine kurze Erklärung, woher Daten stammen und wann sie zuletzt geprüft wurden.

Für barrierearme HTML-Tabellen sollten Kopfzellen mit <th> gekennzeichnet werden. Das Attribut scope kann verdeutlichen, ob eine Kopfzelle für eine Spalte oder Zeile gilt. Eine <caption> beschreibt den Zweck der Tabelle. Diese Struktur hilft Menschen mit Bildschirmlesegeräten, Datenzellen den passenden Überschriften zuzuordnen.

Was ist auf dem Smartphone wichtig?

Prüfen Sie, ob alle Spalten ohne winzige Schrift lesbar sind. Bei vielen Daten ist horizontales Scrollen mit sichtbarem Hinweis oft besser als abgeschnittene Inhalte. Für einfache Vergleiche kann eine Liste oder eine Reihe kurzer Karten geeigneter sein. Entscheidend ist, dass die Information auch ohne Farbe oder visuelle Position verständlich bleibt.

Häufige Fragen zu Tabellen auf Websites

Sollte ich eine Tabelle für das Seitenlayout verwenden?

Nein. Tabellen sind für tabellarische Daten gedacht. Für das Layout sind moderne CSS-Techniken geeigneter.

Wie viele Spalten sollte eine mobile Tabelle haben?

Es gibt keine feste Zahl. Nutzen Sie nur Spalten, die für den Vergleich nötig sind, und testen Sie die Darstellung auf schmalen Bildschirmen.

Warum sind Tabellenüberschriften wichtig?

Sie erklären die Bedeutung der Werte und machen die Zuordnung für assistive Technologien nachvollziehbar.

Quelle: W3C Web Accessibility Initiative: Tables Tutorial.