<th>

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.

Steckbrief <th>

Kategorie: Tabellen
Art: Block
Attribute: 4
Beispiele: 3
Browser: 5 von 5
E-Mail: 5 von 5
Stand: 03.02.2026

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

index.html

Grundsyntax mit Spaltenüberschriften

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

Attribute

4 Attribute

Attribut und Beispiel	Beschreibung
`scope` col \| row \| colgroup \| rowgroup scope="col"	Gibt an, für welche Zellen diese Überschrift gilt. Essentiell für Barrierefreiheit.
`colspan` Number colspan="2"	Anzahl der Spalten, über die sich die Zelle erstreckt.
`rowspan` Number rowspan="3"	Anzahl der Zeilen, über die sich die Zelle erstreckt.
`abbr` String abbr="Durchschn."	Abkürzung oder kurze Beschreibung der Überschrift. Nützlich bei langen Überschriften für Screenreader.

Beispiele

3 Beispiele

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

index.html

Produkttabelle mit Spaltenüberschriften

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

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

index.html

Finanztabelle mit Zeilen- und Spaltenüberschriften

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

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

index.html

Kontakttabelle mit gruppierten Spalten

<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

4 Fehler

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

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

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

04 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

5 von 5

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.

Chrome

Komplett
Firefox

Komplett
Safari

Komplett
Edge

Komplett
Opera

Komplett

Email-Kompatibilität

5 von 5

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.

Apple Mail

Komplett
Gmail

Komplett

Semantische Attribute wie scope werden ignoriert, visuelle Darstellung funktioniert.
Outlook

Komplett

Tabellen sind die bevorzugte Layout-Methode. scope wird ignoriert.
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

<th>

Grundlagen

Syntax

Attribute

Beispiele

Barrierefreiheit

Häufige Fehler

Browser-Kompatibilität

Email-Kompatibilität

Newsletter