<thead>

Das <thead>-Element (Table Head) definiert den Kopfbereich einer Tabelle und enthält typischerweise die Spaltenüberschriften. Es ist mehr als nur ein visuelles Hilfsmittel: <thead> gibt dem Browser und Screenreadern die Information, welche Zeilen Überschriften sind und welche Daten. Besonders bei langen Tabellen und beim Drucken macht <thead> einen Unterschied, weil Browser den Kopfbereich auf jeder Seite wiederholen können.

Steckbrief <thead>

Kategorie: Tabellen
Art: Block
Beispiele: 3
Browser: 5 von 5
E-Mail: 5 von 5
Stand: 04.02.2026

Grundlagen

Ohne <thead> ist eine Tabelle ein flacher Block aus Zeilen, bei dem der Browser nicht weiß, was Überschriften und was Daten sind. Mit <thead> trennst du den Kopfbereich explizit vom Datenbereich (<tbody>) und optionalem Fußbereich (<tfoot>). Das hat drei Vorteile: bessere Barrierefreiheit, gezieltes Styling und korrekte Druckausgabe.

<thead> ist ein direktes Kind von <table> und steht vor <tbody> und <tfoot>
Es enthält eine oder mehrere <tr>-Zeilen mit <th>-Zellen (Kopfzellen)
Pro Tabelle ist nur ein <thead> erlaubt
Browser können <thead> beim Drucken auf jeder Seite wiederholen
Bei scrollbaren Tabellen lässt sich <thead> mit CSS als sticky Header fixieren
<th>-Zellen im <thead> sollten scope="col" haben, um die Barrierefreiheit zu verbessern

Syntax

index.html

Grundsyntax

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Rolle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Anna</td>
      <td>Entwicklerin</td>
    </tr>
    <tr>
      <td>Ben</td>
      <td>Designer</td>
    </tr>
  </tbody>
</table>

Beispiele

3 Beispiele

Ein farblich abgesetzter Kopfbereich macht Tabellen sofort übersichtlicher. Mit <thead> kannst du das Styling gezielt auf den Kopf beschränken, ohne einzelne Zeilen markieren zu müssen.

index.html

Gestylter Tabellenkopf

<table>
  <thead>
    <tr style="background: #4338ca; color: white;">
      <th scope="col">Technologie</th>
      <th scope="col">Typ</th>
      <th scope="col">Einsatzgebiet</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>React</td>
      <td>Library</td>
      <td>UI-Komponenten</td>
    </tr>
    <tr>
      <td>Astro</td>
      <td>Framework</td>
      <td>Content-Websites</td>
    </tr>
    <tr>
      <td>Node.js</td>
      <td>Runtime</td>
      <td>Server-Anwendungen</td>
    </tr>
  </tbody>
</table>

Der Kopfbereich kann mehrere Zeilen haben, etwa wenn du Spalten unter einer gemeinsamen Überschrift gruppieren willst. Das ist typisch für Berichte und Finanzübersichten.

index.html

Mehrzeiliger Kopfbereich

<table>
  <thead>
    <tr>
      <th rowspan="2" scope="col">Mitarbeiter</th>
      <th colspan="2" scope="colgroup">Bewertung</th>
    </tr>
    <tr>
      <th scope="col">Technik</th>
      <th scope="col">Teamwork</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Anna</td>
      <td>4/5</td>
      <td>5/5</td>
    </tr>
    <tr>
      <td>Ben</td>
      <td>5/5</td>
      <td>4/5</td>
    </tr>
  </tbody>
</table>

Die komplette Tabellenstruktur mit Kopf-, Daten- und Fußbereich. Der Fußbereich enthält typischerweise Summen oder Zusammenfassungen.

index.html

Vollständige Tabellenstruktur

<table>
  <thead>
    <tr>
      <th scope="col">Artikel</th>
      <th scope="col">Menge</th>
      <th scope="col">Preis</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Domain (1 Jahr)</td>
      <td>1</td>
      <td>12,00 €</td>
    </tr>
    <tr>
      <td>Hosting (1 Monat)</td>
      <td>1</td>
      <td>5,00 €</td>
    </tr>
    <tr>
      <td>SSL-Zertifikat</td>
      <td>1</td>
      <td>0,00 €</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="2">Gesamt</td>
      <td>17,00 €</td>
    </tr>
  </tfoot>
</table>

Barrierefreiheit

Screenreader nutzen <thead>, um den Kopfbereich einer Tabelle zu identifizieren und die Spaltenüberschriften den Datenzellen zuzuordnen. Wenn ein blinder Nutzer in der zweiten Spalte einer Datenzeile steht, liest der Screenreader die zugehörige Kopfzelle vor. Aber nur, wenn die Tabelle korrekt mit <thead> und <th scope="col"> strukturiert ist.

Ohne <thead> muss der Screenreader raten, welche Zeilen Überschriften sind. Bei einfachen Tabellen klappt das oft, bei komplexeren Tabellen mit mehreren Kopfzeilen oder colspan/rowspan geht die automatische Erkennung regelmäßig schief.

<thead> ermöglicht es Screenreader-Nutzern auch, gezielt zum Datenbereich zu springen, ohne die Überschriften erneut durchgehen zu müssen. Das spart bei großen Tabellen viel Zeit.

Häufige Fehler

4 Fehler

01 <thead> nach <tbody> platziert

Die Reihenfolge im HTML muss <thead> → <tbody> → <tfoot> sein. Ein <thead> nach <tbody> ist ungültiges HTML und wird vom Browser möglicherweise umgeordnet, was zu unerwartetem Rendering führen kann.

02 <td> statt <th> im <thead>

Kopfzellen im <thead> sollten <th> sein, nicht <td>. Technisch funktioniert <td>, aber die semantische Information geht verloren. Screenreader erkennen die Zellen dann nicht als Überschriften und können sie nicht den Datenzellen zuordnen.

03 Mehrere <thead> pro Tabelle

Eine Tabelle darf nur ein <thead> haben. Wenn du mehrere Kopfzeilen brauchst, packe sie als mehrere <tr> in dasselbe <thead>. Mehrere <thead>-Elemente sind ungültiges HTML.

04 Fehlendes scope="col" auf <th>

Auch innerhalb von <thead> solltest du scope="col" auf den <th>-Zellen setzen. Das ist zwar bei einfachen Tabellen nicht zwingend nötig, macht die Zuordnung für Screenreader aber explizit und unmissverständlich.

Browser-Kompatibilität

5 von 5

Das thead-Element wird von allen modernen und älteren Browsern vollständig unterstützt. Auch das Druckverhalten (Wiederholung des Kopfbereichs auf jeder Seite) funktioniert in den meisten Browsern.

Chrome

Komplett
Firefox

Komplett
Safari

Komplett
Edge

Komplett
Opera

Komplett

Email-Kompatibilität

5 von 5

Tabellen sind das Rückgrat von HTML-E-Mails, und thead wird von allen großen Email-Clients unterstützt. Die semantische Bedeutung wird in E-Mails zwar meist ignoriert, aber die visuelle Darstellung funktioniert zuverlässig.

Apple Mail

Komplett
Gmail

Komplett
Outlook

Komplett

Tabellen sind die bevorzugte Layout-Methode in Outlook. thead wird korrekt gerendert.
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

<thead>

Grundlagen

Syntax

Beispiele

Barrierefreiheit

Häufige Fehler

Browser-Kompatibilität

Email-Kompatibilität

Newsletter