⬆
Youtube Video

Tabelle

Tabellen bestehen aus Reihen und Spalten und werden für jede Art von tabellarischen Daten verwendet. Eine tabellarische Anordnung kann auch eine Thumbnail Galerie von Bildern oder Auflistung innerhalb eines Formulars sein. Man verwendet Tabellen nicht, um das Layout einer Webseite zu bestimmen, dazu verwendet man CSS.

Eine einfache Tabelle besteht aus einer oder mehreren Zeilen und Spalten. Die Tabelle wird vom Element table umschlossen.

Es folgen tr (table row) Elemente um die Reihen zu definieren. In den Reihen erzeugt man eine Anzahl von th (table headline) oder td (table data) Elementen, um die Spalten zu definieren. Die Anzahl der Spalten sollte in allen Reihen gleich sein. Somit wird in der ersten Reihe die Anzahl festgelegt.

<table>
    <tr>
      <th>Spalte 1</th>
      <th>Spalte 2</th>
    </tr>
    
    <tr>
      <td>Spalte 1</td>
      <td>Spalte 2</td>
    </tr>
</table>

so sieht's aus:

HTML stellt bei Tabellen kaum Formatierungsmöglichkeiten zur Verfügung. Die werden per CSS definiert. Alle älteren HTML Attribute, die zur Formatierung der Tabellen eingesetzt wurden, sind mit HTML 5 veraltet.

Die Browser stellen Tabellen standardmäßig ohne Rahmen dar. Die Größe der Tabelle und Tabellenzellen passt sich dem Inhalt an. Vertikal werden die Inhalte per Standard mittig ausgerichtet. Das kommt zum Tragen, wenn die Inhalte in den Tabellenzellen unterschiedlich hoch sind.

Der Gültigkeitsbereich einer Tabellenzelle darf auch leer sein. Ein erzwungenes Leerzeichen ist nicht erforderlich. Per CSS kann man das Aussehen einer leeren Tabellenzelle bestimmen.

Tabellenbeschriftung caption

Direkt nach dem table Element kann man eine Tabellenbeschriftung notieren. Das Element caption muss direkt nach dem table Element vor allen anderen Elementen notiert werden. In diesem Titelbereich kann eine Überschrift oder auch eine Legende zur Tabelle notiert werden.

Die Tabellenüberschrift kann man mittels CSS auch seitlich oder unterhalb einer Tabelle positionieren.

so sieht's aus:

<table>
<caption>Überschrift </caption>
<tr>
<td>Spalte 1</td>
<td>Spalte 2</td>
</tr>
</table>

Tabellenzellen verbinden

Man kann zwei oder mehr Tabellenzellen miteinander verbinden. Das kann innerhalb einer Reihe geschehen oder man verbindet Tabellenzellen spaltenweise über Reihen hinweg. Auch beides zusammen ist möglich.

Tabellenzellen innerhalb einer Reihe verbinden

colspan Attribut

Hier werden mehrere Tabellenzellen innerhalb einer Reihe verbunden, so dass sich die Zelle über mehrere Spalten erstreckt.

Mit dem Attribut colspan gibt man in einer ganzzahligen Wertzuweisung die Anzahl der Spalten an, über die sich die Tabellenzelle erstrecken soll. Dadurch verringert sich die Anzahl der td oder th Elemente innerhalb der Reihe.

<table>
  <tr>
    <td colspan="2"></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table>
so sieht's aus:

Tabellenzellen über Reihen hinweg verbinden

rowspan Atrribut

Dem Attribut rowspan übergibt man die Anzahl der Reihen der über das sich die Tabellenzelle erstrecken soll. Die Anzahl der Zellen innerhalb der Reihen muss enstprechend angepasst werden, so dass die Summe aller Zellen in jeder Reihe gleich ist.

<table>
  <tr>
    <td rowspan="2"></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
  </tr>
</table>

so sieht's aus

 

Tabellenbereiche: thead, tbody, tfoot

Eine Tabelle lässt sich horizontal in logische Abschnitte unterteilen, um sie semantisch zu strukturieren und gezielt mit CSS zu formatieren. Auch Screenreader profitieren von dieser klaren Aufteilung.

Diese Elemente umschließen jeweils eine oder mehrere Zeilen (<tr>). Im <thead> sollten bevorzugt Kopfzellen (<th>) eingesetzt werden.

<thead> und <tfoot> dürfen in einer Tabelle jeweils nur einmal vorkommen. Das <tbody>-Element kann hingegen mehrfach verwendet werden, um Datenzeilen thematisch zu gruppieren.

Hinweis: Wenn im HTML-Code kein <tbody> angegeben wird, ergänzen moderne Browser dieses Element beim Parsen automatisch im DOM. Dadurch greifen CSS-Selektoren auf tbody auch dann, wenn das Tag im Quelltext weggelassen wurde. 

<table>

  <thead>
    <tr>...</tr>
  </thead>

  <tbody>
    <tr>...</tr>
  </tbody>

  <tfoot>
    <tr>...</tr>
  </tfoot>

</table>

Das folgende Beispiel zeigt eine Tabelle mit einem <thead>-Bereich für die Spaltenüberschriften. Eine Gliederung der Datenzeilen in Tag und Nacht wurde durch zwei separate <tbody>-Blöcke gelöst. Im <tfoot>-Bereich werden ergänzende Informationen dargestellt.

Beispiel-Tabelle ansehen

 

Spalten und Spaltengruppen: colgroup und col

Neben der horizontalen Einteilung bietet HTML auch die Möglichkeit, eine Tabelle vertikal in Spalten und Spaltengruppen zu strukturieren.

Nutzen: <colgroup> und <col> ermöglichen das zentrale Styling von Tabellenspalten via CSS und optimieren die Rendering-Performance des Browsers, ohne Styles oder Klassen in allen einzelnen <td>-Zellen duplizieren zu müssen. In Verbindung mit dem Attribut scope="colgroup" an Kopfzellen (<th>) wird die Zuordnung auch für Screenreader barrierefrei nutzbar.

Die Definition erfolgt am Anfang der Tabelle – noch vor <thead>, <tbody> oder einzelnen <tr>-Zeilen. Für das Definieren von Spaltengruppen stehen in HTML zwei gleichwertige Schreibweisen zur Verfügung.

Schreibweise 1: Detailliert mit <col>-Elementen (Empfohlen)

Das <colgroup>-Element dient als Container. Die einzelnen Spalten werden darin von links nach rechts durch das leere Element <col> repräsentiert.

Mit dem Attribut span am <col>-Element lässt sich festlegen, über wie viele Spalten sich eine Definition erstrecken soll. Im folgenden Beispiel hat die Tabelle 3 Spalten: Die ersten beiden werden im ersten <col> gebündelt, die dritte Spalte folgt im zweiten <col>:

<colgroup>
  <col span="2" style="background-color: lightgray;">
  <col style="background-color: lightyellow;">
</colgroup>

Schreibweise 2: Kompakt mit span direkt am <colgroup>

Benötigen die Spalten innerhalb einer Gruppe keine unterschiedlichen <col>-Eigenschaften, kann das Attribut span direkt am <colgroup>-Tag verwendet werden. In diesem Fall wird kein <col> im Inneren benötigt. Ohne span-Angabe gilt automatisch span="1".

Um dasselbe Ergebnis wie in Schreibweise 1 (zuerst eine 2er-Gruppe, danach eine Einzelspalte) zu erzielen, werden zwei <colgroup>-Elemente hintereinander gesetzt:


<colgroup span="2" style="background-color: lightgray;"></colgroup>


<colgroup style="background-color: lightyellow;"></colgroup>

Wichtige Syntax-Regel (Entweder – oder): Ein <colgroup>-Element darf entweder ein eigenes span-Attribut besitzen oder <col>-Kinder enthalten – niemals beides gleichzeitig. Sobald ein span am <colgroup> steht, darf kein <col> im Inneren mehr notiert werden.

Wichtiger CSS-Hinweis: Über <col> bzw. <colgroup> lassen sich aus Performanzgründen nur sehr spezifische CSS-Eigenschaften zentral anwenden (wie background, width, border und visibility). Eigenschaften wie Textfarbe (color) oder Textausrichtung (text-align) vererben sich nicht auf die Zellen und müssen weiterhin direkt an <th>/<td> formatiert werden.

siehe Beispiel

Barrierefreie Tabellen für Assistenztechnologien (Screenreader)

Während sehende Nutzer Tabellen visuell schnell in zwei Dimensionen erfassen, lesen Screenreader Tabellenzellen nacheinander vor. Damit blinde oder sehbehinderte Menschen die Daten im Kontext verstehen (z. B. „Stadt: Hamburg“ statt nur „Hamburg“), müssen die Beziehungen zwischen Datenzellen und ihren zugehörigen Überschriften semantisch eindeutig sein.

Weiterführende Ressourcen zur Barrierefreiheit:

Kopfzellenbezug herstellen

Um Datenzellen mit ihren Überschriften zu verknüpfen, stehen in HTML zwei Methoden zur Verfügung:

  1. Das scope-Attribut an Kopfzellen (Standard-Empfehlung): Die Kopfzelle definiert selbst, für welchen Bereich (Zeile oder Spalte) sie gilt.
  2. Die Kombination aus headers und id (für komplexe Tabellen): Datenzellen verweisen explizit auf die ID ihrer Kopfzelle.

1. Der Standardfall: Bezüge mit dem scope-Attribut

Mit dem Attribut scope innerhalb eines <th>-Elements wird festgelegt, ob die Überschrift für die aktuelle Zeile, eine Spalte oder eine gesamte Gruppe gilt. Dies ist die einfachste und robusteste Methode für fast alle alltäglichen Tabellen.

Mögliche Werte für das scope-Attribut an <th>-Elementen
Attribut Wert Bedeutung & Verhalten Link
scope col Spaltenüberschrift: Die Kopfzelle gilt für alle nachfolgenden Datenzellen derselben Spalte (von oben nach unten). Beispiel
scope row Zeilenüberschrift: Die Kopfzelle gilt für alle nachfolgenden Datenzellen derselben Zeile (von links nach rechts). Beispiel
scope colgroup Spaltengruppe: Die Kopfzelle gilt für eine gesamte Spaltengruppe (in Verbindung mit <colgroup>). Beispiel
scope rowgroup Zeilengruppe: Die Kopfzelle gilt für einen mehrzeiligen Bereich (z. B. innerhalb eines <tbody>-Blocks). Beispiel

Siehe auch: SELFHTML Wiki zu scope | Praxisbeispiel ansehen

2. Für komplexe Datenstrukturen: Verknüpfung über headers und id

Bei extrem verschachtelten Tabellen (z. B. wenn eine Datenzelle von mehreren, gekreuzten Spalten- und Zeilenüberschriften gleichzeitig abhängt) stößt scope an seine Grenzen. In solchen Ausnahmefällen erhält jede Kopfzelle ein eindeutiges id-Attribut, und die Datenzellen weisen mit dem Attribut headers auf diese IDs. 

<th id="stadt">Stadt</th>
<th id="jahr">Jahr</th>

<td headers="stadt jahr">Hamburg 2026</td>

Beispiel für headers/id ansehen

 

Exkurs: Tabellenlayout in CSS

In den Frühzeiten des Webdesigns wurden HTML-Tabellen missbraucht, um das visuelle Seitenlayout (Spalten, Header, Content) zu strukturieren. Dies ist heute aus Gründen der Semantik und Barrierefreiheit strikt zu vermeiden. HTML-Tabellen dienen ausschließlich der Darstellung echter Datenmatrixen.

Möchte man jedoch Nicht-Tabellenelementen (wie <div>-Containers) das visuelle Verhalten von Tabellenzellen verleihen, nutzt man dafür die CSS-Eigenschaft display mit Werten wie display: table;, display: table-row; oder display: table-cell;. Für moderne Web-Layouts sind jedoch CSS Grid und Flexbox die Mittel der Wahl.