HTML <thead>-Tag
Das HTML <thead>-Tag gruppiert die Kopfzeilen einer Tabelle. Syntax, Barrierefreiheit mit th scope und CSS mit Beispielen erklärt.
Das <thead>-Tag definiert den Kopf einer HTML-Tabelle. Das Tag wird zusammen mit den Tags <tbody> und <tfoot> verwendet, die den Körper bzw. den Fuß der Tabelle angeben.
Das <thead>-Tag muss als untergeordnetes Element des <table>-Elements verwendet werden, nach den Elementen <caption> und <colgroup> und vor den Elementen <tbody>, <tfoot> und <tr>. Innerhalb einer <table> darf nur ein <thead>-Tag verwendet werden.
In HTML5 kann das <tfoot>-Tag entweder vor oder nach <tbody> platziert werden — der Browser rendert die Fußzeile in beiden Fällen am unteren Ende der Tabelle. (In der älteren HTML-4.01-Spezifikation musste <tfoot> vor <tbody> stehen; diese Anforderung wurde in HTML5 aufgehoben.)
Warum das <thead>-Tag wichtig ist
Das Gruppieren der Kopfzeilen in <thead> dient nicht nur ordentlichem Markup. Es verleiht der Tabelle eine echte semantische Struktur, die Browser und assistive Technologien nutzen können:
- Screenreader können die Kopfzellen identifizieren und ankündigen, was Nutzern hilft zu verstehen, was jede Datenzelle bedeutet, wenn sie durch die Tabelle navigieren.
- Drucken und lange Tabellen: Wenn eine Tabelle mehrere gedruckte Seiten umfasst (oder innerhalb eines Containers mit fester Höhe scrollt), können Browser die
<thead>-Zeilen oben auf jeder Seite oder jedem Abschnitt wiederholen, sodass die Spalten beschriftet bleiben. - Gestaltung und Skripting werden einfacher: Sie können
theadin CSS ansprechen oder nur die Körperzeilen in JavaScript sortieren, ohne den Kopf zu berühren.
Damit die Struktur sinnvoll ist, platzieren Sie <th scope="col">-Zellen innerhalb von <thead> — siehe den Abschnitt Barrierefreiheit weiter unten.
Das <thead>-Tag muss mindestens ein <tr>-Element enthalten.
Die Elemente <thead>, <tbody> und <tfoot> beeinflussen das Tabellenlayout standardmäßig nicht. Verwenden Sie CSS-Eigenschaften, um das Erscheinungsbild der Tabelle anzupassen.
Syntax
Das <thead>-Tag wird paarweise verwendet. Der Inhalt wird zwischen dem öffnenden (<thead>) und dem schließenden (</thead>) Tag geschrieben.
<table>
<thead>
<tr>
<th scope="col"> ... </th>
</tr>
</thead>
<tbody> ... </tbody>
<tfoot> ... </tfoot>
</table>Beispiel des HTML-<thead>-Tags:
<!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: #ffffff;
}
th,
td {
padding: 10px;
border: 1px solid #666666;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th scope="col">Month</th>
<th scope="col">Savings</th>
</tr>
</thead>
<tbody>
<tr>
<td>January</td>
<td>500</td>
</tr>
<tr>
<td>February</td>
<td>1000</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Total</td>
<td>1500</td>
</tr>
</tfoot>
</table>
</body>
</html>Barrierefreiheit
Das <thead>-Tag entfaltet seinen Wert hauptsächlich durch Barrierefreiheit. Um den vollen Nutzen zu erzielen, verwenden Sie <th> (nicht <td>) darin und fügen Sie das scope-Attribut hinzu:
<thead>
<tr>
<th scope="col">Month</th>
<th scope="col">Savings</th>
</tr>
</thead>scope="col" teilt Screenreadern mit, dass die Zelle der Header für die gesamte Spalte ist. Wenn der Nutzer die Spalte nach unten navigiert, kann die assistive Technologie den Header vor jeder Datenzelle ankündigen, sodass die Beziehung zwischen einem Wert (zum Beispiel 500) und seiner Bezeichnung (Savings) nie verloren geht. Für einen Header, der eine Zeile statt einer Spalte beschriftet, verwenden Sie scope="row". Weitere Informationen zu Headerzellen und Scopes finden Sie beim <th>-Tag.
Halten Sie die eigentlichen Spaltenüberschriften in <thead> und Zusammenfassungs- oder Laufende-Summen-Zeilen in <tfoot>; diese konsistente Struktur ermöglicht es Screenreadern, Druckstylesheets und Skripten, den Header korrekt zu behandeln.
Attribute
Alle nachfolgenden Attribute sind veraltet und werden in HTML5 nicht unterstützt. Sie sind hier nur aufgeführt, damit Sie sie in altem Markup erkennen können. Verwenden Sie stattdessen CSS — siehe Ersetzen der veralteten Attribute durch CSS.
| Attribut | Werte | Beschreibung |
|---|---|---|
| align | left, right, center, justify, char | Horizontale Ausrichtung des Inhalts innerhalb eines <thead>. Wird in HTML5 nicht unterstützt. |
| bgcolor | color (Name oder Hex) | Hintergrundfarbe der Zeilen innerhalb eines <thead>. Wird in HTML5 nicht unterstützt. |
| char | character | Richtet den Inhalt an einem Zeichen aus; wird nur mit align="char" verwendet. Wird in HTML5 nicht unterstützt. |
| charoff | number | Versatz (in Zeichen) vom durch char festgelegten Zeichen; wird nur mit align="char" verwendet. Wird in HTML5 nicht unterstützt. |
| valign | top, bottom, middle, baseline | Vertikale Ausrichtung des Inhalts innerhalb eines <thead>. Wird in HTML5 nicht unterstützt. |
Das <thead>-Tag unterstützt auch die globalen Attribute und die Ereignisattribute.
Ersetzen der veralteten Attribute durch CSS
Jedes der obigen Präsentationsattribute hat eine direkte CSS-Entsprechung, die Sie stattdessen verwenden sollten:
| Altes Attribut | CSS-Ersatz |
|---|---|
align="center" | text-align: center; |
valign="middle" | vertical-align: middle; |
bgcolor="#f2f2f2" | background-color: #f2f2f2; |
char / charoff | Kein CSS-Äquivalent; Zahlen mit text-align oder Padding ausrichten. |
Ein typisch gestalteter Header sieht so aus:
thead {
background-color: #f2f2f2;
font-weight: bold;
}
thead th {
text-align: center;
vertical-align: middle;
padding: 10px;
}Weitere Optionen zur Tabellengestaltung finden Sie unter CSS Tables.