HTML th-Tag - Learn HTML

Der <th>-Tag definiert eine Kopfzelle in einer HTML-Tabelle. Er muss als untergeordnetes Element von <tr> verwendet werden, das wiederum innerhalb des <table>-Tags platziert wird. Zur Definition einer normalen Datenzelle wird der <td>-Tag verwendet.

Diese Seite erklärt, was <th> leistet, wie Zellen mit colspan und rowspan verbunden werden und – am wichtigsten – wie Tabellenkopfzeilen mithilfe des scope-Attributs und des id/headers-Musters barrierefrei gestaltet werden, sodass Screenreader für jede Zelle den richtigen Kopf ansagen können.

Der <th>-Tag kann Text, Bilder, Formulare, Links oder beliebige andere HTML-Elemente enthalten, die im Body eines HTML-Dokuments verwendet werden können. Die Größe der Tabelle passt sich automatisch an den Inhalt an.

In HTML-Tabellen werden Daten vertikal in Spalten angeordnet. Wenn die erste Zeile der Tabelle als Bezeichnungen oder Überschriften angezeigt werden soll, müssen <th>-Elemente anstelle von <td>-Elementen für diese Zeile verwendet werden. Der Inhalt des <th>-Tags ist standardmäßig fett und zentriert. Um sein Aussehen zu ändern, können CSS-Stile verwendet werden. Tabellenüberschriften lassen sich auch unabhängig vom restlichen Tabelleninhalt gestalten.

Beachten Sie, dass alle Zeilen einer Tabelle die gleiche Anzahl von Zellen haben sollten. Wenn eine Zeile weniger Zellen hat, rendert der Browser die fehlenden Zellen implizit. Diese impliziten Zellen erben die Rahmenstile der Tabelle. Um anzuzeigen, dass andere Zellen keine Daten enthalten, können leere Zellen angelegt werden. Wenn implizite Zellen aufeinanderfolgend auftreten, werden sie möglicherweise als eine einzige zusammengeführte Zelle gerendert.

Syntax

Der <th>-Tag wird paarweise verwendet. Der Inhalt wird zwischen dem öffnenden (<th>) und dem schließenden (</th>) Tag geschrieben.

HTML <th>-Tag

<table> 
  <tr> 
    <th>...</th> 
  </tr> 
</table>

Beispiel des HTML `<th>`-Tags:

Monat und Datum — Beispiel des HTML <th>-Tags — W3Docs

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      table {
        width: 80%;
        margin: 30px auto;
        border-collapse: collapse;
      }
      thead {
        background-color: #1c87c9;
        color: #fff;
      }
      th,
      td {
        padding: 10px;
        border: 1px solid #666;
      }
    </style>
  </head>
  <body>
    <table>
      <thead>
        <tr>
          <th>Month</th>
          <th>Date</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>June</td>
          <td>18.07.2018</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

Probier es selbst »

Ergebnis

In diesem Beispiel sind unsere Überschriften „Month" und „Date", die wir mit <th>-Tags definieren. Beide Tags werden innerhalb eines <tr>-Elements platziert.

Das colspan-Attribut wird häufig mit dem <th>-Tag verwendet, damit Inhalt mehrere Spalten überspannen kann. Sehen wir uns das in der Praxis an.

Beispiel des HTML `<th>`-Tags mit dem colspan-Attribut:

Beispiel mit einem colspan-Attribut — HTML <th>-Tag — W3Docs

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      table {
        width: 80%;
        margin: 30px auto;
        border-collapse: collapse;
      }
      tr {
        background-color: #1c87c9;
        color: #ffffff;
      }
      th,
      td {
        padding: 10px;
        border: 1px solid #666;
      }
    </style>
  </head>
  <body>
    <table>
      <thead>
        <tr>
          <th colspan="2">Month and Date</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Jun</td>
          <td>18.07.2014</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

Probier es selbst »

In diesem Beispiel hat das colspan-Attribut den Wert "2". Das bedeutet, dass die einzelne Kopfzelle über zwei Spalten gestreckt wird.

Beispiel des HTML `<th>`-Tags mit dem rowspan-Attribut

Das rowspan-Attribut ist das vertikale Gegenstück zu colspan: Es lässt eine Kopfzelle mehrere Zeilen überspannen. Dies ist nützlich, wenn eine Überschrift für mehrere Datenzeilen gilt.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      table {
        border-collapse: collapse;
        margin: 30px auto;
      }
      th,
      td {
        padding: 10px;
        border: 1px solid #666;
      }
      thead {
        background-color: #1c87c9;
        color: #fff;
      }
    </style>
  </head>
  <body>
    <table>
      <thead>
        <tr>
          <th>Day</th>
          <th>Slot</th>
          <th>Activity</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th rowspan="2" scope="rowgroup">Monday</th>
          <td>Morning</td>
          <td>HTML basics</td>
        </tr>
        <tr>
          <td>Afternoon</td>
          <td>CSS basics</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

Hier verwendet die Kopfzelle „Monday" rowspan="2", sodass sie sowohl die Morgen- als auch die Nachmittagszeile abdeckt.

Das scope-Attribut

Das wichtigste Barrierefreiheitsmerkmal von <th> ist das scope-Attribut. Es teilt assistiven Technologien – insbesondere Screenreadern – mit, welche Zellen eine Überschrift beschreibt. Sehende Benutzer erkennen dies am Layout, aber ein Screenreader liest Zellen nacheinander und benötigt scope, um vor jeder Datenzelle die richtige Überschrift anzukündigen.

scope akzeptiert vier sinnvolle Werte:

Wert	Die Überschrift gilt für…
`col`	jede Zelle in der Spalte darunter
`row`	jede Zelle in der Zeile rechts davon
`colgroup`	eine Gruppe von Spalten (verwendet mit `<colgroup>`)
`rowgroup`	eine Gruppe von Zeilen (z. B. alle Zeilen innerhalb eines `<tbody>`)

Eine Tabelle kann Überschriften in beiden Richtungen haben. Spaltenüberschriften befinden sich im <thead> mit scope="col"; das führende Label einer Zeile ist ein <th scope="row"> innerhalb des <tbody>.

Beispiel einer vollständig barrierefreien Tabelle mit scope

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      table {
        border-collapse: collapse;
        margin: 30px auto;
      }
      th,
      td {
        padding: 10px;
        border: 1px solid #666;
        text-align: left;
      }
      thead th,
      tbody th {
        background-color: #1c87c9;
        color: #fff;
      }
    </style>
  </head>
  <body>
    <table>
      <caption>Weekly study plan</caption>
      <thead>
        <tr>
          <th scope="col">Day</th>
          <th scope="col">Topic</th>
          <th scope="col">Hours</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th scope="row">Monday</th>
          <td>HTML</td>
          <td>2</td>
        </tr>
        <tr>
          <th scope="row">Tuesday</th>
          <td>CSS</td>
          <td>3</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

Wenn ein Screenreader-Benutzer auf die Zelle mit dem Wert 3 trifft, kann der Screenreader „Tuesday, Hours, 3" ansagen, da sowohl die Spaltenüberschrift (scope="col") als auch die Zeilenüberschrift (scope="row") eindeutig sind.

Barrierefreiheit

Warum scope wichtig ist

Eine Datentabelle ist ein Raster von Beziehungen: Jede <td> gehört zu einer oder mehreren Überschriften. Sehende Benutzer lesen diese Beziehungen visuell; Screenreader-Benutzer tun das nicht. Kopfzellen mit <th> auszuzeichnen und ihnen ein korrektes scope zu geben, ermöglicht es assistiven Technologien, beim Navigieren durch die Tabelle die richtige Überschrift laut vorzulesen. Ohne dies ist eine komplexe Tabelle nur eine Folge unzusammenhängender Werte.

`<th>` vs. `<td role>`

Verwenden Sie für Überschriften immer ein echtes <th>-Element, anstatt ein <td> fett zu stylen. Ein <th> trägt automatisch Header-Semantik; ein einfaches <td> tut das nicht, egal wie es aussieht. Den Einsatz von role="columnheader" oder role="rowheader" auf einem <td> sollte letzter Ausweg sein (z. B. wenn das Markup nicht geändert werden kann). Natives <th> mit scope ist einfacher und besser unterstützt.

Das `id`/`headers`-Muster für komplexe Tabellen

scope funktioniert gut für einfache Raster, kann jedoch nicht jede Beziehung in Tabellen mit unregelmäßigen Spans oder mehreren Überschriftenebenen ausdrücken. Geben Sie in diesen Fällen jeder Überschrift eine id und listen Sie die relevanten Header-IDs auf jeder Datenzelle über das headers-Attribut (leerzeichen-getrennt) auf. So wird jede Zelle explizit mit ihren Überschriften verknüpft.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      table { border-collapse: collapse; margin: 30px auto; }
      th, td { padding: 10px; border: 1px solid #666; }
    </style>
  </head>
  <body>
    <table>
      <thead>
        <tr>
          <th id="name">Name</th>
          <th id="q1">Q1</th>
          <th id="q2">Q2</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th id="alice" headers="name">Alice</th>
          <td headers="alice q1">120</td>
          <td headers="alice q2">150</td>
        </tr>
        <tr>
          <th id="bob" headers="name">Bob</th>
          <td headers="bob q1">90</td>
          <td headers="bob q2">110</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

Die Zelle mit dem Wert 150 ist nun explizit sowohl der Zeilenüberschrift Alice als auch der Spaltenüberschrift Q2 zugeordnet, sodass ein Screenreader „Alice, Q2, 150" ohne Rätselraten ansagen kann.

Das `abbr`-Attribut

Wenn der vollständige Text einer Überschrift lang ist, stellt das abbr-Attribut eine Kurzform bereit. Einige Sprachbrowser lesen diese abgekürzte Form (anstatt die lange Überschrift zu wiederholen) jedes Mal vor, wenn sie eine Zelle in dieser Spalte ankündigen, was das Navigieren durch breite Tabellen deutlich angenehmer macht.

<th scope="col" abbr="HDI">Human Development Index</th>

Der sichtbare Text bleibt „Human Development Index", aber ein Screenreader kann jede Zelle in dieser Spalte als „HDI" ankündigen.

Attribute

Nur abbr, colspan, rowspan, headers und scope sind in HTML5 gültig. Die mit Veraltet markierten Zeilen sind veraltete Präsentationsattribute – diese sollten nicht verwendet werden; erzielen Sie dasselbe Ergebnis stattdessen mit CSS.

Attribut	Wert	Beschreibung
abbr	Text	Definiert eine abgekürzte Version des Inhalts einer Kopfzelle. Einige User-Agents wie Sprachleser können diese Kurzform anstelle des vollständigen Textes vorlesen.
colspan	Zahl	Legt fest, über wie viele Spalten sich eine Zelle erstrecken soll. Der Wert muss eine positive ganze Zahl sein. Standardwert ist 1.
headers	header_id	Eine leerzeichen-getrennte Liste von Kopfzellen-IDs, die diese Zelle beschreiben. Jeder Wert muss mit der `id` einer Kopfzelle übereinstimmen. Wird für komplexe Tabellen verwendet.
rowspan	Zahl	Die Anzahl der Zeilen, die eine Zelle überspannen soll. Der Wert muss eine positive ganze Zahl sein. Standard ist 1. Werte über 65534 werden auf 65534 begrenzt.
scope	col / colgroup / row / rowgroup	Gibt an, auf welche Zellen sich die Überschrift bezieht. Unverzichtbar für die Barrierefreiheit von Tabellen.
align	left / right / center	Veraltet. Hat den Inhalt ausgerichtet. Verwenden Sie stattdessen CSS `text-align`.
axis	category_name	Veraltet. Hat Zellen mit ähnlichem Inhalt kategorisiert.
background	url	Veraltet. Hat ein Hintergrundbild gesetzt. Verwenden Sie stattdessen CSS `background`.
bgcolor	rgb(x,x,x) / #xxxxxx / colorname	Veraltet. Hat die Hintergrundfarbe gesetzt. Verwenden Sie CSS `background-color`.
bordercolor	color	Veraltet. Hat die Rahmenfarbe gesetzt. Verwenden Sie CSS `border`.
char	character	Veraltet. Hat den Inhalt an einem Zeichen ausgerichtet (nur mit `align="char"`).
charoff	number	Veraltet. Versatz des Ausrichtungszeichens.
height	% / pixels	Veraltet. Hat die Zellhöhe gesetzt. Verwenden Sie CSS `height`.
nowrap	nowrap	Veraltet. Hat den Zeilenumbruch des Inhalts verhindert. Verwenden Sie CSS `white-space: nowrap`.
sorted	(verschiedene)	Veraltet. Hat die Sortierrichtung einer Spalte definiert.
valign	top / middle / bottom / baseline	Veraltet. Vertikale Ausrichtung. Verwenden Sie CSS `vertical-align`.
width	% / pixels	Veraltet. Hat die Zellenbreite gesetzt. Verwenden Sie CSS `width`.

Der <th>-Tag unterstützt außerdem die globalen Attribute und die Ereignisattribute.

Wie man einen HTML `<th>`-Tag stylt

th {
  background-color: #f2f2f2;
  color: #333;
  padding: 8px;
  border: 1px solid #ccc;
}

Übungen

Übung

Was ist der primäre Zweck des HTML th-Elements?

Es definiert eine Kopfzelle und verleiht ihr Header-Semantik, die assistive Technologien den zugehörigen Datenzellen zuordnen können.Es stellt eine gewöhnliche Datenzelle im Körper einer Tabelle dar.Es gruppiert den Fußzeileninhalt in einer langen Tabelle.Seine einzige Aufgabe ist es, Text fett darzustellen.Es erstellt eine neue Tabellenzeile.

HTML <th>-Tag

Syntax

Beispiel des HTML `<th>`-Tags:

Ergebnis

Beispiel des HTML `<th>`-Tags mit dem colspan-Attribut:

Beispiel des HTML `<th>`-Tags mit dem rowspan-Attribut

Das scope-Attribut

Beispiel einer vollständig barrierefreien Tabelle mit scope

Barrierefreiheit

Warum scope wichtig ist

`<th>` vs. `<td role>`

Das `id`/`headers`-Muster für komplexe Tabellen

Das `abbr`-Attribut

Attribute

Wie man einen HTML `<th>`-Tag stylt

Verwandte Tags

Übungen

Syntax

Beispiel des HTML <th>-Tags:

Ergebnis

Beispiel des HTML <th>-Tags mit dem colspan-Attribut:

Beispiel des HTML <th>-Tags mit dem rowspan-Attribut

Das scope-Attribut

Beispiel einer vollständig barrierefreien Tabelle mit scope

Barrierefreiheit

Warum scope wichtig ist

<th> vs. <td role>

Das id/headers-Muster für komplexe Tabellen

Das abbr-Attribut

Attribute

Wie man einen HTML <th>-Tag stylt

Verwandte Tags

Übungen

Beispiel des HTML `<th>`-Tags:

Beispiel des HTML `<th>`-Tags mit dem colspan-Attribut:

Beispiel des HTML `<th>`-Tags mit dem rowspan-Attribut

`<th>` vs. `<td role>`

Das `id`/`headers`-Muster für komplexe Tabellen

Das `abbr`-Attribut

Wie man einen HTML `<th>`-Tag stylt