HTML <th>-Tag
Das <th>-Tag gibt eine Kopfzelle in einer HTML-Tabelle an. Es muss als untergeordnetes Element von <tr> verwendet werden, das wiederum innerhalb des <table>-Tags platziert wird. Um eine normale Datenzelle zu definieren, wird das <td>-Tag verwendet.
Das <th>-Tag kann Text, Bilder, Formulare, Links oder jedes andere HTML-Element enthalten, das im Body eines HTML-Dokuments verwendet werden kann. Die Größe der Tabelle wird automatisch an die Größe ihres Inhalts angepasst.
In HTML-Tabellen werden Daten vertikal in Spalten angeordnet. Wenn Sie die erste Zeile der Tabelle als Beschriftungen oder Überschriften anzeigen möchten, müssen Sie für diese Zeile <th>-Elemente anstelle von <td>-Elementen verwenden. Standardmäßig ist der Inhalt des <th>-Tags fett und zentriert. Um sein Erscheinungsbild zu ändern, können Sie CSS-Stile verwenden. Tabellenüberschriften können außerdem leicht unabhängig vom restlichen Tabelleninhalt gestaltet werden.
Beachten Sie, dass alle Zeilen in einer Tabelle die gleiche Anzahl an Zellen haben sollten. Wenn eine Zeile weniger Zellen hat, rendert der Browser die fehlenden Zellen implizit. Diese impliziten Zellen übernehmen die Rahmenstile der Tabelle. Wenn Sie angeben müssen, dass andere Zellen keine Daten enthalten, erstellen Sie bei Bedarf leere Zellen. Wenn implizite Zellen direkt aufeinander folgen, können sie als eine einzige zusammengeführte Zelle dargestellt werden.
Syntax
Das <th>-Tag kommt paarweise vor. Der Inhalt wird zwischen dem öffnenden (<th>) und dem schließenden (</th>) Tag geschrieben.
HTML <th>-Tag
<table>
<tr>
<th>...</th>
</tr>
</table>Beispiel für das HTML <th>-Tag:
Monat und Datum — Beispiel für das 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:first-child {
background-color: #1c87c9;
color: #fff;
}
th,
td {
padding: 10px;
border: 1px solid #666;
}
</style>
</head>
<body>
<table>
<tr>
<th>Month</th>
<th>Date</th>
</tr>
<tr>
<td>June</td>
<td>18.07.2018</td>
</tr>
</table>
</body>
</html>Ergebnis
In diesem Beispiel sind unsere Überschriften „Month“ und „Date“, die wir mit <th>-Tags definieren. Wir platzieren beide Tags innerhalb eines <tr>-Elements.
Das colspan-Attribut wird im Allgemeinen mit dem <th>-Tag verwendet, damit sich der Inhalt über mehrere Spalten erstrecken kann. Sehen wir uns das in der Praxis an.
Beispiel für das HTML <th>-Tag 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>
<tr>
<th colspan="2">Month and Date</th>
</tr>
<tr>
<td>Jun</td>
<td>18.07.2014</td>
</tr>
</table>
</body>
</html>In diesem Beispiel ist der Wert des colspan-Attributs „2“. Das bedeutet, dass sich eine Kopfzelle über zwei Spalten erstrecken soll.
Attribute
Hinweis: Attribute wie align, bgcolor, valign, width, height und andere sind in HTML5 veraltet. Verwenden Sie stattdessen CSS für das Styling.
| Attribut | Wert | Beschreibung |
|---|---|---|
| abbr | text | Definiert eine abgekürzte Version des Inhalts in einer Kopfzelle oder einen alternativen Text. Einige Benutzeragenten, wie z. B. Sprachausleser, können diese Beschreibung vor dem eigentlichen Inhalt ausgeben. |
| align | left right center | Richtet den Inhalt in einer Kopfzelle aus. In HTML 5 nicht unterstützt. |
| axis | category_name | Kategorisiert Zellen mit ähnlichem Inhalt. In HTML 5 nicht unterstützt. |
| background | background | Legt den Hintergrund in einer Zelle fest. In HTML 5 nicht unterstützt. |
| bgcolor | rgb(x,x,x) #xxxxxx colorname | Definiert die Hintergrundfarbe einer Zelle. In HTML 5 nicht unterstützt. |
| bordercolor | bordercolor | Legt die Farbe eines Rahmens fest. In HTML 5 nicht unterstützt. |
| char | character | Richtet den Inhalt in einer Kopfzelle an einem Zeichen aus. Wird nur verwendet, wenn das Attribut align="char" ist. In HTML 5 nicht unterstützt. |
| charoff | number | Legt die Anzahl der Zeichen fest, um die der Inhalt vom durch das char-Attribut angegebenen Zeichen aus ausgerichtet wird. Wird nur verwendet, wenn das Attribut align="char" ist. In HTML 5 nicht unterstützt. |
| colspan | number | Definiert die Anzahl der Spalten, über die sich eine Zelle erstrecken soll. Der Wert des Attributs sollte eine positive ganze Zahl sein. Der Standardwert ist 1. |
| headers | header_id | Gibt eine durch Leerzeichen getrennte Liste von Kopfzellen an, die Informationen über diese Zelle enthalten. Der Wert muss der id der Kopfzelle entsprechen (festgelegt mit dem id-Attribut). |
| height | % pixels | Legt die Höhe einer Zelle fest. In HTML 5 nicht unterstützt. |
| nowrap | nowrap | Gibt an, dass der Inhalt innerhalb einer Zelle nicht umbrochen werden soll. In HTML 5 nicht unterstützt. |
| rowspan | number | Gibt die Anzahl der Zeilen an, über die sich eine Zelle erstrecken soll. Der Wert des Attributs sollte eine positive ganze Zahl sein. Der Standardwert ist 1. Es wird nicht empfohlen, Werte über 65534 zu verwenden, da sie auf 65534 begrenzt werden. |
| scope | col colgroup row rowgroup auto | Definiert die Zellen, auf die sich das Kopf-Element (definiert in <th>) bezieht. Wichtig für die Barrierefreiheit von Tabellen. |
| sorted | reversed number reversed number number reversed | Definiert die Sortierrichtung einer Spalte. In HTML 5 nicht unterstützt. |
| valign | top middle bottom baseline | Gibt die vertikale Ausrichtung des Inhalts innerhalb einer Zelle an. In HTML 5 nicht unterstützt. |
| width | % pixels | Legt die Breite einer Zelle fest. In HTML 5 nicht unterstützt. |
Das <th>-Tag unterstützt außerdem die Global Attributes und die Event Attributes.
So stylen Sie ein HTML <th>-Tag
th {
background-color: #f2f2f2;
color: #333;
padding: 8px;
border: 1px solid #ccc;
}Practice
What is the purpose of the HTML <th> tag?