<table>

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.

Steckbrief <table>

Kategorie: Tabellen
Art: Block
Attribute: 8
Beispiele: 3
Browser: 5 von 5
E-Mail: 5 von 5
Stand: 30.01.2026

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

index.html

Grundsyntax

<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

8 Attribute

Attribut und Beispiel	Beschreibung
`<table>` <table>...</table>	Container für die gesamte Tabelle
`<thead>` <thead>...</thead>	Kopfbereich der Tabelle
`<tbody>` <tbody>...</tbody>	Hauptteil der Tabelle
`<tfoot>` <tfoot>...</tfoot>	Fußbereich der Tabelle
`<tr>` <tr>...</tr>	Tabellenzeile (Table Row)
`<th>` <th>Spalte</th>	Kopfzelle (fett, zentriert)
`<td>` <td>Wert</td>	Datenzelle (Table Data)
`<caption>` <caption>Mitarbeiter</caption>	Tabellentitel/Beschreibung

Wichtige Attribute für th/td

Attribut	Beschreibung
`colspan`	Zelle über mehrere Spalten spannen
`rowspan`	Zelle über mehrere Zeilen spannen
`scope`	Definiert, ob `<th>` zu Zeile (`row`) oder Spalte (`col`) gehört

Beispiele

3 Beispiele

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

index.html

Gestylte Tabelle

<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>

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:

index.html

Colspan und Rowspan

<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>

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:

index.html

Responsive Tabelle

<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

4 Punkte

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

5 von 5

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.

Chrome

Komplett
Firefox

Komplett
Safari

Komplett
Edge

Komplett
Opera

Komplett

Email-Kompatibilität

5 von 5

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.

Apple Mail

Komplett
Gmail

Komplett
Outlook

Komplett

Tabellen sind die bevorzugte Layout-Methode für Outlook, da die Word-Rendering-Engine sie am besten unterstützt.
Thunderbird

Komplett
Yahoo Mail

Komplett

einmal die Woche, kostenlos

Neue Artikel und Videos, was sich auf der Lernplattform tut, und ab und zu ein Sonderpreis zum Kursstart. Kurz genug, dass du es auch liest.

Zuletzt verschickt · KW 40

Einmal alles neu, und die Lernplattform ist da

<table>

Grundlagen

Syntax

Tabellen-Elemente

Wichtige Attribute für th/td

Beispiele

Barrierefreiheit

Häufige Fehler

Browser-Kompatibilität

Email-Kompatibilität

Newsletter