html-einfach.de

Semantisches HTML · Inhalte auszeichnen

Tabellen semantisch aufbauen

Von Zuletzt geändert am

Tabellen haben einen schlechten Ruf – zu Unrecht. Er stammt aus der Zeit, als <table> fürs Layout missbraucht wurde. Für ihren eigentlichen Zweck, tabellarische Daten, sind Tabellen unverzichtbar und vollkommen richtig. Der Schlüssel liegt darin, die Beziehung zwischen Kopfzellen und Datenzellen korrekt auszuzeichnen.

Die Grundregel: Tabellen nur für Daten

Tabellen sind für Informationen gedacht, die sich aus Zeilen und Spalten ergeben – Preise, Termine, Vergleiche. Fürs Seitenlayout sind sie tabu; dafür gibt es CSS (Flexbox, Grid). Ein guter Test: Ergeben sich die Daten erst aus dem Zusammenspiel von Zeile und Spalte, ist eine Tabelle richtig.

Aufbau einer sauberen Datentabelle

<table>
  <caption>
    WCAG-Konformitätsstufen im Überblick
  </caption>
  <thead>
    <tr>
      <th scope="col">Stufe</th>
      <th scope="col">Anspruch</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">A</th>
      <td>Mindestanforderungen</td>
    </tr>
    <tr>
      <th scope="row">AA</th>
      <td>Üblicher Zielwert</td>
    </tr>
  </tbody>
</table>

Die wichtigsten Bausteine:

  • <caption> benennt die Tabelle. Sie ist die „Überschrift“ der Tabelle und sollte direkt nach <table> stehen.
  • <th> kennzeichnet eine Kopfzelle, <td> eine Datenzelle.
  • scope legt fest, ob eine Kopfzelle für eine Spalte (scope="col") oder eine Zeile (scope="row") gilt. Dieses Attribut ist der entscheidende Hebel: Es verknüpft jede Datenzelle eindeutig mit ihren Überschriften.
  • <thead>, <tbody>, <tfoot> gliedern die Tabelle in Kopf, Rumpf und Fußbereich.

Warum scope und caption so wichtig sind

In einer optischen Tabelle erkennt das Auge mühelos, dass „AA“ zur Zeile gehört und „Anspruch“ die Spalte überschreibt. Software hat diesen Überblick nicht – sie braucht die Beziehung explizit. Genau dafür sorgen <th> und scope.

Ein Screenreader liest dann beim Navigieren durch die Tabelle die zugehörige Kopfzelle mit vor („Stufe: AA, Anspruch: Üblicher Zielwert“), statt nur lose Zellen aufzuzählen. Ohne diese Auszeichnung wird eine Tabelle schnell unverständlich.

Randnotiz – auch Maschinen lesen Tabellen. Korrekt ausgezeichnete Tabellen helfen nicht nur Screenreadern. Web-Crawler von Suchmaschinen und KI-Crawler (z. B. GPTBot, ClaudeBot) erfassen die Kopf-Daten-Beziehungen und können Werte sauber den richtigen Kategorien zuordnen. Eine als Bild abgespeicherte oder mit <div> „gemalte“ Tabelle bleibt für sie dagegen weitgehend stumm. Wer möchte, dass Vergleichsdaten in Suchergebnissen oder KI-Antworten korrekt wiedergegeben werden, zeichnet sie als echte Tabelle aus.

Komplexere Tabellen

Bei einfachen Tabellen genügt scope. Sobald Zellen über mehrere Spalten oder Zeilen reichen (colspan, rowspan) oder es mehrere Kopfebenen gibt, wird es anspruchsvoller – dann kommen id und headers ins Spiel, um jede Datenzelle mit mehreren Kopfzellen zu verknüpfen. Diese Fälle behandelt der eigene Beitrag Komplexe Datentabellen barrierefrei.

Mein Rat: Halte Tabellen so einfach wie möglich. Lässt sich eine komplexe Tabelle in zwei klare aufteilen, ist das fast immer die bessere Lösung.

Häufige Fehler

  • Tabellen fürs Layout statt für Daten.
  • Kopfzellen als <td> statt <th> – die Beziehung fehlt dann.
  • scope weggelassen, sodass unklar bleibt, ob eine Kopfzelle Zeile oder Spalte beschreibt.
  • Keine <caption>, sodass der Tabelle ein Titel fehlt.
  • Tabellen als Screenshot einbinden – für Software unlesbar.

Häufige Fragen

Brauche ich immer <thead> und <tbody>?

Pflicht sind sie nicht, aber sie strukturieren die Tabelle klar und erleichtern Gestaltung wie Auswertung. Ich setze sie standardmäßig.

Wie mache ich eine breite Tabelle mobil bedienbar?

Lege einen horizontal scrollbaren Container um die Tabelle und kennzeichne ihn als fokussierbaren Bereich. Die Tabellenstruktur selbst bleibt dabei unangetastet – das Layout-Problem löst CSS, nicht das Markup.

Fazit

Tabellen sind für Daten da, nicht fürs Layout. Mit <caption>, <th> und scope machst du die Beziehung zwischen Überschriften und Werten explizit – und damit für Menschen wie Maschinen verständlich. Für mehrdimensionale Fälle hilft Komplexe Datentabellen barrierefrei; den größeren Zusammenhang liefert Was ist semantisches HTML?.