<table>

Zuletzt aktualisiert am 30. Januar 2026

Wenn du Daten in Zeilen und Spalten darstellen willst (Preislisten, Stundenpläne, Vergleichstabellen), dann ist <table> das richtige Element. Das <table>-Element stellt tabellarische Daten dar und verwendet eine Reihe von Unter-Elementen wie <thead>, <tbody>, <tr>, <th> und <td>. Tabellen haben im Web einen etwas schlechten Ruf, weil sie in den 90er-Jahren für Seitenlayouts missbraucht wurden. Für echte tabellarische Daten sind sie aber nach wie vor die beste Wahl. Auf dieser Seite lernst du, wie du Tabellen richtig aufbaust, sie barrierefrei machst und auf kleinen Bildschirmen handhabst.

Grundlagen

Stell dir eine Tabelle wie ein Regal vor: Das <table> ist der Schrank, <tr> (Table Row) sind die Regalböden, und <th> (Kopfzellen) bzw. <td> (Datenzellen) sind die einzelnen Fächer. Mit <thead> und <tbody> teilst du das Regal in einen beschrifteten Kopfbereich und den eigentlichen Datenbereich auf.

In den 90er-Jahren wurden Tabellen häufig für das gesamte Seitenlayout verwendet: Dreispaltiges Layout? Tabelle! Navigation links, Inhalt mittig, Sidebar rechts? Alles eine Tabelle. Das war nie der vorgesehene Zweck und ist heute mit CSS Grid und Flexbox viel besser gelöst. Verwende <table> ausschließlich für echte tabellarische Daten.

• <table> ist ein Block-Element
• Verwende Tabellen nur für tabellarische Daten, nicht für Seitenlayouts, dafür gibt es CSS Grid und Flexbox
• Die Struktur: <table> → <thead> / <tbody> → <tr> → <th> / <td>
• <th> steht für Kopfzellen (standardmäßig fett und zentriert), <td> für Datenzellen

Syntax

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Alter</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Anna</td>
      <td>28</td>
    </tr>
    <tr>
      <td>Ben</td>
      <td>34</td>
    </tr>
  </tbody>
</table>

Tabellen-Elemente

Wichtige Attribute für th/td

Beispiele

Vollständige Tabelle mit Styling

Eine typische Datentabelle mit Titel, farbigem Kopfbereich und alternierenden Zeilen für bessere Lesbarkeit:

<table style="width: 100%; border-collapse: collapse;">
  <caption>Programmiersprachen-Vergleich</caption>
  <thead>
    <tr style="background: #4338ca; color: white;">
      <th>Sprache</th>
      <th>Typ</th>
      <th>Erscheinungsjahr</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>JavaScript</td>
      <td>Dynamisch</td>
      <td>1995</td>
    </tr>
    <tr>
      <td>TypeScript</td>
      <td>Statisch</td>
      <td>2012</td>
    </tr>
  </tbody>
</table>

Colspan und Rowspan

Manchmal braucht eine Zelle mehr Platz, entweder über mehrere Spalten (colspan) oder mehrere Zeilen (rowspan). Hier ein Stundenplan, in dem der Raum für zwei Stunden gleich bleibt und die Pause sich über zwei Spalten erstreckt:

<table>
  <thead>
    <tr>
      <th colspan="3">Stundenplan - Montag</th>
    </tr>
    <tr>
      <th>Uhrzeit</th>
      <th>Fach</th>
      <th>Raum</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>08:00</td>
      <td>Mathematik</td>
      <td rowspan="2">Raum 101</td>
    </tr>
    <tr>
      <td>09:00</td>
      <td>Physik</td>
    </tr>
    <tr>
      <td>10:00</td>
      <td colspan="2">Pause</td>
    </tr>
  </tbody>
</table>

Responsive Tabellen

Auf kleinen Bildschirmen können breite Tabellen über den Viewport hinausragen. Eine einfache Lösung: Wickle die Tabelle in einen Container mit overflow-x: auto, damit der Nutzer horizontal scrollen kann:

<div style="overflow-x: auto;">
  <table style="width: 100%; min-width: 500px;">
    <thead>
      <tr>
        <th>Name</th>
        <th>E-Mail</th>
        <th>Abteilung</th>
        <th>Standort</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Anna</td>
        <td>anna@example.com</td>
        <td>Entwicklung</td>
        <td>Berlin</td>
      </tr>
    </tbody>
  </table>
</div>

Barrierefreiheit

Für Screenreader-Nutzer sind Tabellen eine besondere Herausforderung. Ohne zusätzliche Informationen liest ein Screenreader die Zellen einfach nacheinander vor: “Anna, 28, Ben, 34”, ohne zu sagen, was diese Werte bedeuten.

scope auf <th>-Elementen verwenden. Mit scope="col" auf Spaltenüberschriften und scope="row" auf Zeilenüberschriften liest der Screenreader stattdessen: “Name: Anna, Alter: 28”. Das ist viel verständlicher. Bei einfachen Tabellen können moderne Screenreader die Zuordnung oft automatisch ableiten, aber bei komplexeren Tabellen ist scope unverzichtbar.

<caption> für den Tabellentitel. Das <caption>-Element gibt der Tabelle einen Titel, den der Screenreader vorliest, bevor er mit dem Inhalt beginnt. So weiß der Nutzer vorab, was ihn erwartet: “Tabelle: Mitarbeiterliste. 2 Spalten, 3 Zeilen.” Ohne Caption ist eine Tabelle wie ein Bild ohne Alt-Text.

<thead> und <tbody> explizit setzen. Auch wenn Browser diese Elemente automatisch ergänzen, helfen sie Screenreadern, den Kopfbereich vom Datenbereich zu unterscheiden. Nutzer können dann gezielt zum Datenbereich springen, ohne die Überschriften erneut durchgehen zu müssen.

headers-Attribut bei komplexen Tabellen. Wenn eine Tabelle mehrere Überschriftenebenen hat oder Zellen mit colspan/rowspan über mehrere Bereiche reichen, kann scope allein nicht mehr die richtige Zuordnung herstellen. In solchen Fällen verknüpfst du Datenzellen über das headers-Attribut explizit mit den IDs der zugehörigen Überschriftenzellen.

Tabellen nicht für Layouts verwenden. Screenreader interpretieren jede <table> als Datentabelle und lesen sie Zelle für Zelle vor. Wenn du Tabellen für Seitenlayouts verwendest, verwirrt das blinde Nutzer komplett. Verwende CSS Grid oder Flexbox für Layouts.

Häufige Fehler

• Tabellen für Layout: Das war in den 90ern Standard, ist heute aber ein Anti-Pattern. Tabellen sind nur für tabellarische Daten gedacht. Für Seitenlayouts verwende CSS Grid oder Flexbox. Screenreader interpretieren Tabellen als Datentabellen und lesen sie Zelle für Zelle vor. Bei einem Layout ergibt das keinen Sinn und verwirrt blinde Nutzer.

• Fehlende <thead> / <tbody>: Auch wenn der Browser diese Elemente automatisch ergänzt, solltest du sie explizit setzen. Sie verbessern die Barrierefreiheit (Screenreader können den Kopf vom Datenbereich unterscheiden), ermöglichen gezieltes Styling und machen deinen Code lesbarer.

• Kein scope auf <th>: Ohne scope weiß ein Screenreader nicht, ob eine Kopfzelle zur Spalte oder zur Zeile gehört. Mit scope="col" liest er bei der Zelle “28” vor: “Alter: 28” statt nur “28”. Das macht einen großen Unterschied für blinde Nutzer.

• Kein <caption>: Eine Tabelle ohne Beschreibung ist wie eine Grafik ohne Alt-Text. Ein Screenreader-Nutzer weiß nicht, was die Tabelle enthält, bevor er sie durchgeht. Mit <caption> gibst du vorab eine kurze Zusammenfassung: “Tabelle: Programmiersprachen-Vergleich”.

Browser-Kompatibilität

Das table-Element und alle zugehörigen Elemente werden von allen Browsern vollständig unterstützt. Auch das scope-Attribut und caption funktionieren in allen modernen Screenreadern zuverlässig.

Email-Kompatibilität

Tabellen sind das zuverlässigste Layout-Element in E-Mails. Sie werden von allen großen Email-Clients vollständig unterstützt und sind die empfohlene Methode für Email-Layouts.

Verwandte Elemente