<thead>

Zuletzt aktualisiert am 4. Februar 2026

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.

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

<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

Tabelle mit gestyltem Kopfbereich

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.

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

Mehrzeiliger Kopfbereich mit colspan

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.

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

Vollständige Tabellenstruktur mit thead, tbody und tfoot

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

<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

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

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

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.

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

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.

Email-Kompatibilität

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.

Verwandte Elemente