Eine Tabelle stellt Daten in Zeilen und Spalten dar. Sie ist für Daten gedacht, nicht für Seitenaufteilung – dafür gibt es seit Jahren CSS mit Raster und flexiblen Boxen.

Der vollständige Aufbau

<table>
  <caption>Ladezeiten je Seitentyp</caption>
  <thead>
    <tr>
      <th scope="col">Seitentyp</th>
      <th scope="col">Größe</th>
      <th scope="col">Ladezeit</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Startseite</th>
      <td>42 kB</td>
      <td>0,4 s</td>
    </tr>
    <tr>
      <th scope="row">Lexikoneintrag</th>
      <td>18 kB</td>
      <td>0,2 s</td>
    </tr>
  </tbody>
</table>

Die drei Teile, die oft fehlen

caption benennt die Tabelle. Sie steht als erstes Kind von table und ist die Überschrift, die Screenreader beim Betreten ansagen. Wer sie weglässt, zwingt Nutzer, sich den Zusammenhang aus dem Umfeld zu erschließen.

th mit scope unterscheidet Kopf- von Datenzellen und sagt, wofür die Kopfzelle gilt: col für die Spalte, row für die Zeile. Erst dadurch kann eine Sprachausgabe zu jeder Zelle die zugehörige Überschrift nennen – ohne das ist eine Tabelle beim Hören eine Zahlenkette.

thead und tbody trennen Kopf- und Datenbereich. Der Browser ergänzt tbody übrigens von sich aus, auch wenn es nicht im Quelltext steht – ein häufiger Stolperstein, wenn CSS-Regeln nicht greifen.

Zellen verbinden

<tr>
  <th scope="row">Summe</th>
  <td colspan="2">60 kB, 0,6 s</td>
</tr>

Mit colspan reicht eine Zelle über mehrere Spalten, mit rowspan über mehrere Zeilen. Wichtig ist, dass jede Zeile rechnerisch auf dieselbe Spaltenzahl kommt – sonst ergänzt der Browser stillschweigend leere Zellen, und die Tabelle sieht verschoben aus.

Verbundene Zellen erschweren die Zuordnung für Hilfstechnik. Zwei getrennte Tabellen sind fast immer verständlicher als eine mit verschachtelter Kopfstruktur.

Auf schmalen Bildschirmen

Tabellen lassen sich schlecht umbrechen. Die verlässlichste Lösung ist waagerechtes Scrollen in einem eigenen Bereich – mit einer Beschriftung, damit die Bedienung erkennbar ist:

<div role="region" aria-label="Ladezeiten" tabindex="0"
     style="overflow-x:auto">
  <table>…</table>
</div>

Das tabindex="0" ist entscheidend: Ohne es lässt sich der scrollbare Bereich mit der Tastatur nicht erreichen.