Tabellen

Ein Busfahrplan ist eine Tabelle: Jede Zelle ergibt nur zusammen mit ihrer Zeilen- und ihrer Spaltenüberschrift Sinn.

Tabellen sind für Daten da

Verwende eine Tabelle, wenn Informationen Zeilen und Spalten haben: ein Fahrplan, eine Preisliste, die Ergebnisse einer Umfrage. Ende der 1990er-Jahre bauten viele Websites ganze Seitenlayouts mit Tabellen, das Menü in einer Zelle, der Inhalt in einer anderen. Das verursacht echte Probleme. Screenreader sagen jede Zelle mit ihrer Zeile und Spalte an, sodass eine Layouttabelle wie eine verwirrende Tabellenkalkulation klingt, und Tabellenlayouts passen sich schlecht an kleine Bildschirme an. Heute entsteht das Layout mit CSS, und Tabellen bleiben den Daten vorbehalten.

Zeilen, Zellen und Kopfzellen

Eine Tabelle wird Zeile für Zeile aufgebaut. <table> umschließt alles, jedes <tr> (table row) ist eine Zeile, und innerhalb einer Zeile ist jedes <td> (table data) eine Zelle. Zellen, die eine Zeile oder Spalte beschriften, verwenden stattdessen <th> (table header), das Browser standardmäßig fett und zentriert anzeigen. Jede Zeile sollte gleich viele Zellen haben, damit die Spalten untereinanderstehen.

<table>
  <caption>Bread prices, October 2026</caption>
  <thead>
    <tr><th scope="col">Loaf</th><th scope="col">Weight</th><th scope="col">Price</th></tr>
  </thead>
  <tbody>
    <tr><th scope="row">Sourdough</th><td>800 g</td><td>6.50</td></tr>
    <tr><th scope="row">Rye</th><td>600 g</td><td>5.00</td></tr>
  </tbody>
</table>

Die Tabelle soll sich selbst erklären

Drei Ergänzungen machen aus einem Gitter von Zellen eine Tabelle, die jeder lesen kann. Erstens gibt <caption>, direkt nach dem öffnenden <table>-Tag, der Tabelle einen Titel. Screenreader sagen ihn vor dem Inhalt an, sodass der Zuhörer weiß, worum es in der Tabelle geht. Zweitens sagt das Attribut scope an jedem <th>, ob es eine Spalte (scope="col") oder eine Zeile (scope="row") beschriftet. Damit kann ein Screenreader „Rye, Price, 5.00“ vorlesen statt nur „5.00“. Drittens fassen <thead>, <tbody> und <tfoot> die Kopfzeilen, die Datenzeilen und eventuelle Summenzeilen zusammen. Sie machen die Struktur klar, helfen CSS, jeden Teil zu gestalten, und lassen Browser den Kopf auf jeder gedruckten Seite einer langen Tabelle wiederholen.

Zellen, die sich erstrecken

Eine Zelle kann sich mit colspan über mehrere Spalten oder mit rowspan über mehrere Zeilen erstrecken. In einem Wochenstundenplan kann eine Mittagspause, die alle fünf Wochentage abdeckt, eine einzige Zelle mit colspan="5" sein. Erstreckt sich eine Zelle, braucht ihre Zeile weniger Zellen: Hat eine Zeile normalerweise 6 Zellen und eine davon colspan="5", enthält diese Zeile im HTML nur 2 Zellen. Verwende das Zusammenfassen, wenn es den Daten entspricht. Sehr komplexe Tabellen sind für alle schwer zu lesen, deshalb ist es oft besser, eine große Tabelle in zwei einfachere aufzuteilen.

Breite Tabellen können auf Handys ein Problem sein. Eine Tabelle kann nicht umbrechen wie Text, also ist eine Tabelle mit vielen Spalten unter Umständen breiter als der Bildschirm. Eine gängige Lösung ist, die Tabelle mit CSS in ein Element zu packen, das selbst seitwärts scrollt, damit der Rest der Seite nicht ebenfalls breiter wird.

Halte die Daten in jeder Zelle so schlicht wie möglich: ein Wert pro Zelle, Einheiten in die Kopfzelle (Preis in Euro) statt in jede Zelle, und keine leeren Zellen als Abstandhalter. Eine so gebaute Tabelle lässt sich leichter vorlesen, leichter sortieren und sauber in eine Tabellenkalkulation einfügen.