Das table-Element: Tabellen für echte Daten

vom 21.05.2026 von Oliver Misch

Eine Tabelle stellt Daten in Zeilen und Spalten dar: Öffnungszeiten, Preislisten, Vergleiche. Das <table> bringt dafür eine kleine Familie von Elementen mit, die zusammenarbeiten: <tr> (table row) für die Zeile, <th> (table header) für Kopfzellen und <td> (table data) für normale Zellen.

Syntax und Beispiel

HTML-Code

<table>
    <tr>
        <th>Format</th>
        <th>Speicherplatz</th>
    </tr>
    <tr>
        <td>Diskette</td>
        <td>1,44 MB</td>
    </tr>
    <tr>
        <td>CD-ROM</td>
        <td>650 MB</td>
    </tr>
</table>

Ergebnis (mit dem Tabellen-CSS dieser Seite)

Format	Speicherplatz
Diskette	1,44 MB
CD-ROM	650 MB

Ohne CSS zeigen Browser Tabellen übrigens komplett ohne Linien an. Die Rahmen hier kommen aus dem Stylesheet, so gehört sich das heute. Das steinalte border-Attribut direkt am table gilt als überholt.

Kopfzellen und caption: die Zugänglichkeits-Helfer

Die <th>-Zellen sind mehr als fette Schrift: Screenreader nutzen sie, um beim Vorlesen einer Zelle die zugehörige Spalte anzusagen. Mit scope="col" beziehungsweise scope="row" machst du eindeutig, ob eine Kopfzelle für ihre Spalte oder ihre Zeile gilt. Und eine <caption> direkt nach dem öffnenden table-Tag gibt der ganzen Tabelle eine Überschrift, die Hilfstechnik mit ansagt. Bei größeren Tabellen lohnt zusätzlich die Gliederung in <thead>, <tbody> und <tfoot>.

Zellen verbinden

Mit colspan="2" erstreckt sich eine Zelle über zwei Spalten, mit rowspan über mehrere Zeilen. Sparsam einsetzen: je verschachtelter die Tabelle, desto schwerer ist sie zu lesen, für Menschen wie für Maschinnen.

Die dunkle Vergangenheit: Tabellen als Layout

Historischer Hinweis: Bevor CSS erwachsen war, wurden komplette Webseiten in unsichtbare Tabellen gezwängt, Menüspalte links, Inhalt rechts, alles Zellen. Das war um die Jahrtausendwende Handwerksstandard und ist heute in jeder Hinsicht überholt: unflexibel, unzugänglich, nicht responsive. Wie das damals aussah, zeigen wir im Retro-Web unter Tabellenlayouts. Für Layouts nimmt man heute Flexbox und Grid, Tabellen sind wieder das was sie sein sollten: Möbel für Daten.

Typische Fehler

Tabellen für Layout missbrauchen, siehe oben.
Kopfzeile aus td-Zellen mit fettem Text bauen statt echte th zu verwenden.
Auf schmalen Bildschirmen überlaufen lassen. Breite Tabellen in einen Container mit horizontalem Scrollen packen, dann bleibt der Rest der Seite ruhig.

Verwandt: ul (wenn es gar keine echte Tabelle ist) · Tutorial: Tabelle erstellen · Tabellenlayouts von früher