Eine Tabelle stellt Daten in Zeilen und Spalten dar, die miteinander zu tun haben. Ihre Auszeichnung entscheidet darüber, ob ein Screenreader die Zusammenhänge vorlesen kann oder nur eine Folge von Zellen.
- Tabelle (table)
Element für Daten, die in Zeilen und Spalten zusammenhängen.
Beispiel: „Eine Tabelle ergibt nur dort Sinn, wo Zeile und Spalte zusammen eine Aussage treffen.“Auch: table-Element.
Die Kopfzellen tragen alles
Eine Datenzelle allein sagt wenig. Erst die Kopfzelle darüber oder daneben macht aus einer Zahl eine Aussage. Deshalb ist die Unterscheidung zwischen Kopf- und Datenzelle keine Formsache, sondern das, was eine Tabelle lesbar macht.
<table>
<caption>Pakete im Vergleich</caption>
<thead>
<tr><th scope="col">Paket</th><th scope="col">Seiten</th></tr>
</thead>
<tbody>
<tr><th scope="row">Basis</th><td>5</td></tr>
</tbody>
</table>Das Attribut scope sagt, ob eine Kopfzelle für ihre Spalte oder ihre Zeile gilt. Screenreader nennen beim Vorlesen einer Zelle die zugehörigen Köpfe, und erst damit bleibt eine große Tabelle verständlich.
Die Beschriftung
Das caption-Element gibt der Tabelle einen Namen und steht als erstes Kind. Es erscheint sichtbar über der Tabelle und hilft bei der Orientierung, wenn mehrere Tabellen untereinander stehen.
Kein Layoutwerkzeug
Vor der Zeit von CSS wurden Tabellen benutzt, um Spalten zu bauen. Das ist lange vorbei, und die Folgen sind bekannt: Auf schmalen Bildschirmen lässt sich eine Layouttabelle nicht umbrechen, und Screenreader kündigen eine Datentabelle an, wo gar keine Daten stehen.