<th>

Zuletzt aktualisiert am 3. Februar 2026

Das <th>-Element (table header) definiert eine Überschriftenzelle in einer HTML-Tabelle. Im Gegensatz zu normalen Datenzellen (<td>) werden Überschriftenzellen standardmäßig fett und zentriert dargestellt. Noch wichtiger: Sie vermitteln semantische Informationen über die Struktur der Tabelle und sind essentiell für die Barrierefreiheit.

Grundlagen

<th> wird verwendet, um Spalten- oder Zeilenüberschriften in Tabellen zu kennzeichnen. Browser stellen diese Zellen automatisch mit fettem Text und zentrierter Ausrichtung dar, aber die wahre Stärke liegt in der semantischen Bedeutung. Screenreader nutzen <th>-Elemente, um blinden Nutzern die Tabellenstruktur zu vermitteln und Datenzellen ihren Überschriften zuzuordnen.

Du kannst <th> sowohl im <thead> (für Spaltenüberschriften) als auch im <tbody> (für Zeilenüberschriften) verwenden. Das scope-Attribut gibt dabei explizit an, ob die Überschrift für eine Spalte oder Zeile gilt.

Syntax

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

Attribute

Beispiele

Spaltenüberschriften

Der häufigste Anwendungsfall: Überschriften für Tabellenspalten im <thead>.

<table>
  <thead>
    <tr>
      <th scope="col">Produkt</th>
      <th scope="col">Preis</th>
      <th scope="col">Verfügbarkeit</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Laptop</td>
      <td>899€</td>
      <td>Auf Lager</td>
    </tr>
    <tr>
      <td>Maus</td>
      <td>29€</td>
      <td>Nicht verfügbar</td>
    </tr>
  </tbody>
</table>

Zeilenüberschriften

Überschriften können auch am Anfang jeder Zeile stehen, um die Zeile zu beschreiben.

<table>
  <thead>
    <tr>
      <th scope="col">Quartal</th>
      <th scope="col">Q1</th>
      <th scope="col">Q2</th>
      <th scope="col">Q3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Umsatz</th>
      <td>150.000€</td>
      <td>180.000€</td>
      <td>220.000€</td>
    </tr>
    <tr>
      <th scope="row">Kosten</th>
      <td>90.000€</td>
      <td>95.000€</td>
      <td>110.000€</td>
    </tr>
  </tbody>
</table>

Komplexe Tabelle mit colspan

Überschriften können sich über mehrere Spalten erstrecken.

<table>
  <thead>
    <tr>
      <th scope="col" rowspan="2">Name</th>
      <th scope="colgroup" colspan="2">Kontakt</th>
    </tr>
    <tr>
      <th scope="col">E-Mail</th>
      <th scope="col">Telefon</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Max Müller</th>
      <td>max@example.com</td>
      <td>030-12345</td>
    </tr>
    <tr>
      <th scope="row">Lisa Schmidt</th>
      <td>lisa@example.com</td>
      <td>040-67890</td>
    </tr>
  </tbody>
</table>

Barrierefreiheit

Das scope-Attribut ist essentiell für Screenreader. Es teilt assistiven Technologien explizit mit, ob eine Überschrift für eine Spalte (col), eine Zeile (row), eine Spaltengruppe (colgroup) oder eine Zeilengruppe (rowgroup) gilt.

Ohne scope müssen Screenreader die Tabellenstruktur erraten, was oft zu Verwirrung führt. Ein blinder Nutzer hört beispielsweise “150.000€” und weiß nicht, ob das der Umsatz oder die Kosten sind, wenn die Zeilenüberschrift nicht korrekt zugeordnet ist.

Das abbr-Attribut ist nützlich bei sehr langen Überschriften. Screenreader können die Abkürzung verwenden, anstatt bei jeder Zelle die vollständige Überschrift vorzulesen.

Häufige Fehler

th ohne scope-Attribut: Viele Entwickler vergessen das scope-Attribut. Während moderne Browser oft ohne auskommen, ist es für Screenreader unverzichtbar. Gewöhne dir an, bei jeder <th>-Zelle scope="col" oder scope="row" anzugeben.

th nur im thead verwenden: Ein weit verbreitetes Missverständnis ist, dass <th> nur im <thead> erlaubt ist. Tatsächlich kannst du <th> auch im <tbody> verwenden, um Zeilenüberschriften zu definieren. Das ist besonders bei Datentabellen mit beschreibenden Zeilen sinnvoll.

Verwechslung von scope-Werten: scope="col" bedeutet “diese Überschrift gilt für die Spalte darunter”, scope="row" bedeutet “diese Überschrift gilt für die Zeile daneben”. Viele Anfänger verwechseln das und verwenden scope="row" für Spaltenüberschriften.

Keine visuelle Unterscheidung: Manchmal wird <th> nur aus semantischen Gründen verwendet, aber die Standard-Formatierung (fett, zentriert) wird per CSS entfernt. Das ist für sehende Nutzer verwirrend. Wenn du <th> verwendest, sollte die Zelle auch visuell als Überschrift erkennbar sein.

Browser-Kompatibilität

Das th-Element wird von allen modernen und älteren Browsern vollständig unterstützt. Auch die Attribute scope, colspan, rowspan und abbr funktionieren überall ohne Probleme.

Email-Kompatibilität

Tabellen sind eines der wenigen HTML-Elemente, die in E-Mails zuverlässig funktionieren. Das th-Element wird von allen gängigen E-Mail-Clients unterstützt. Die visuelle Formatierung (fett, zentriert) bleibt erhalten, allerdings ignorieren einige Clients das scope-Attribut.

Verwandte Elemente