Das<th>HTML Element definiert eine Zelle als Kopfzelle einer Gruppe von Tabellenzellen und kann als Kind des<tr> Elements verwendet werden. Die genaue Art dieser Gruppe wird durch die Attributescope undheaders definiert.

Probieren Sie es aus

<table>  <caption>    Alien football stars  </caption>  <thead>    <tr>      <th scope="col">Player</th>      <th scope="col">Gloobles</th>      <th scope="col">Za'taak</th>    </tr>  </thead>  <tbody>    <tr>      <th scope="row">TR-7</th>      <td>7</td>      <td>4,569</td>    </tr>    <tr>      <th scope="row">Khiresh Odo</th>      <td>7</td>      <td>7,223</td>    </tr>    <tr>      <th scope="row">Mia Oolong</th>      <td>9</td>      <td>6,219</td>    </tr>  </tbody></table>

th,td {  border: 1px solid rgb(160 160 160);  padding: 8px 10px;}th[scope="col"] {  background-color: #505050;  color: white;}th[scope="row"] {  background-color: #d6ecd4;}td {  text-align: center;}tr:nth-of-type(even) {  background-color: #eeeeee;}table {  border-collapse: collapse;  border: 2px solid rgb(140 140 140);  font-family: sans-serif;  font-size: 0.8rem;  letter-spacing: 1px;}caption {  caption-side: bottom;  padding: 10px;}

Attribute

Dieses Element umfasst dieglobalen Attribute.

abbr

Eine kurze, abgekürzte Beschreibung des Inhalts der Kopfzelle, die als alternatives Label dient, wenn auf die Kopfzelle in anderen Kontexten verwiesen wird. Einige Benutzeragenten, wie z.B. Screenreader, können diese Beschreibung vor dem eigentlichen Inhalt anzeigen.

colspan

Ein nicht-negativer ganzzahliger Wert, der angibt, wie viele Spalten die Kopfzelle umfasst oder erweitert. Der Standardwert ist1. Benutzeragenten verwerfen Werte über 1000 als falsch und setzen solche Werte standardmäßig auf1.

headers

Eine durch Leerzeichen getrennte Liste von Zeichenfolgen, die denid-Attributen der<th>-Elemente entsprechen, die die Kopfzeilen für diese Kopfzelle bereitstellen.

rowspan

Ein nicht-negativer ganzzahliger Wert, der angibt, wie viele Zeilen die Kopfzelle umfasst oder erweitert. Der Standardwert ist1; wenn sein Wert auf0 gesetzt ist, wird die Kopfzelle bis zum Ende des Tabellengruppierungsabschnitts (<thead>,<tbody>,<tfoot>, auch wenn implizit definiert) erweitert, zu dem das<th> gehört. Werte über65534 werden auf65534 gekappt.

scope

Definiert die Zellen, zu denen die Kopfzeile (definiert im<th>) Element gehört. Möglicheaufgezählte Werte sind:

• row: die Kopfzeile bezieht sich auf alle Zellen der Zeile, zu der sie gehört;
• col: die Kopfzeile bezieht sich auf alle Zellen der Spalte, zu der sie gehört;
• rowgroup: die Kopfzeile gehört zu einer Zeilengruppe und bezieht sich auf alle ihre Zellen;
• colgroup: die Kopfzeile gehört zu einer Spaltengruppe und bezieht sich auf alle ihre Zellen.

Wenn dasscope-Attribut nicht spezifiziert ist oder sein Wert nichtrow,col,rowgroup odercolgroup ist, wählen Browser automatisch die Gruppe von Zellen aus, auf die die Kopfzelle zutrifft.

Veraltete Attribute

Die folgenden Attribute sind veraltet und sollten nicht verwendet werden. Sie sind hier dokumentiert, um beim Aktualisieren vorhandenen Codes als Referenz zu dienen und aus geschichtlichem Interesse.

alignVeraltet

Gibt die horizontale Ausrichtung der Kopfzelle an. Die möglichenaufgezählten Werte sindleft,center,right,justify undchar. Wenn unterstützt, richtet derchar-Wert den Textinhalt an dem Zeichen aus, das imchar Attribut definiert ist, und an dem Offset, das durch dascharoff Attribut definiert ist. Verwenden Sie stattdessen dietext-align CSS-Eigenschaft, da dieses Attribut veraltet ist.

axisVeraltet

Enthält eine Liste von durch Leerzeichen getrennten Zeichenfolgen, die jeweils demid-Attribut einer Gruppe von Zellen entsprechen, auf die die Kopfzelle zutrifft. Verwenden Sie stattdessen dasscope Attribut, da dieses Attribut veraltet ist.

bgcolorVeraltet

Definiert die Hintergrundfarbe der Kopfzelle. Der Wert ist eine HTML-Farbe; entweder ein6-stelliger hexadezimaler RGB-Code, dem ein# vorangestellt ist, oder einFarb-Begriff. Andere CSS<color> Werte werden nicht unterstützt. Verwenden Sie stattdessen diebackground-color CSS-Eigenschaft, da dieses Attribut veraltet ist.

charVeraltet

Macht nichts. Es war ursprünglich dazu gedacht, die Ausrichtung des Inhalts an einem Zeichen in der Kopfzelle anzugeben. Typische Werte hierfür beinhalten einen Punkt (.), wenn versucht wird, Zahlen oder Geldwerte auszurichten. Wennalign nicht aufchar gesetzt ist, wird dieses Attribut ignoriert.

charoffVeraltet

Macht nichts. Es war ursprünglich dazu gedacht, die Anzahl der Zeichen anzugeben, die den Inhalt der Kopfzelle vom durch daschar Attribut definierten Ausrichtungszeichen versetzen.

heightVeraltet

Definiert eine empfohlene Kopfzellenhöhe. Verwenden Sie stattdessen dieheight CSS-Eigenschaft, da dieses Attribut veraltet ist.

valignVeraltet

Gibt die vertikale Ausrichtung der Kopfzelle an. Die möglichenaufgezählten Werte sindbaseline,bottom,middle undtop. Verwenden Sie stattdessen dievertical-align CSS-Eigenschaft, da dieses Attribut veraltet ist.

widthVeraltet

Definiert eine empfohlene Kopfzellenbreite. Verwenden Sie stattdessen diewidth CSS-Eigenschaft, da dieses Attribut veraltet ist.

Anwendungshinweise

• Das<th> kann nur innerhalb eines<tr> Elements verwendet werden.

• In einfachen Kontexten ist die Verwendung desscope Attributs in Kopfzellen (<th> Elemente) redundant, dascope impliziert ist. Bestimmte unterstützende Technologien könnten jedoch nicht korrekt ableiten, daher kann das Angeben des Kopfbereichs die Benutzererfahrung verbessern.

• Beim Verwenden dercolspan undrowspan Attribute, um Kopfzellen über mehrere Spalten und Zeilen zu erstrecken, werden Zellen ohne diese definierten Attribute (mit einem Standardwert von1) automatisch in freie verfügbare Räume in der Tabellenstruktur eingepasst, die 1x1 Zellen umfassen, wie in der folgenden Abbildung illustriert:

  

  Hinweis:Diese Attribute dürfen nicht verwendet werden, um Zellen zu überlappen.

Beispiele

Sehen Sie sich<table> für ein vollständiges Tabellenbeispiel an, das allgemeine Standards und bewährte Verfahren einführt.

Einfache Spalten- und Zeilenköpfe

In diesem Beispiel werden<th> Elemente verwendet, um Spalten- und Zeilenköpfe in einer grundlegenden Tabellenstruktur einzuführen.

HTML

Die erste Zeile (<tr> Element) enthält die Spaltenköpfe (<th> Elemente), die als "Titel" für die Spalten fungieren, um das Verstehen der Informationen in den Spalten zu erleichtern und die Daten zu identifizieren. Um anzuzeigen, dass sich jeder Spaltenkopf auf alle Zellen in der entsprechenden Spalte bezieht, ist dasscope Attribut aufcol (Spalte) gesetzt.

Die verbleibenden Zeilen enthalten die Hauptdaten der Tabelle. Jede dieser Zeilen hat einen Zeilenkopf (<th> Element), der als erste Zelle eingeführt wird. Dadurch entsteht eine Spalte mit Zeilenköpfen als erste Spalte der Tabelle. Ähnlich wie bei den Spaltenköpfen ist dasscope Attribut aufrow gesetzt, um anzugeben, auf welche Zellen sich jeder Zeilenkopf bezieht, was in dem folgenden Beispiel alle Datenzellen (<td> Elemente) in jeder Zeile sind.

<table>  <tr>    <th scope="col">Symbol</th>    <th scope="col">Code word</th>    <th scope="col">Pronunciation</th>  </tr>  <tr>    <th scope="row">A</th>    <td>Alfa</td>    <td>AL fah</td>  </tr>  <tr>    <th scope="row">B</th>    <td>Bravo</td>    <td>BRAH voh</td>  </tr>  <tr>    <th scope="row">C</th>    <td>Charlie</td>    <td>CHAR lee</td>  </tr>  <tr>    <th scope="row">D</th>    <td>Delta</td>    <td>DELL tah</td>  </tr></table>

CSS

Ein einfaches CSS wird verwendet, um die Tabelle und ihre Zellen zu stylen. Wir verwenden CSSAttributselektoren, um Kopfzellen basierend auf ihrenscope Attributwerten anzuvisieren, Spalten- und Zeilenköpfe (<th> Elemente) hervorzuheben und sie sowohl untereinander als auch von den Datenzellen (<td>) zu unterscheiden.

th,td {  border: 1px solid rgb(160 160 160);  padding: 8px 10px;}th[scope="col"] {  background-color: #505050;  color: white;}th[scope="row"] {  background-color: #d6ecd4;}tr:nth-of-type(odd) td {  background-color: #eeeeee;}

table {  border-collapse: collapse;  border: 2px solid rgb(140 140 140);  font-family: sans-serif;  font-size: 0.8rem;  letter-spacing: 1px;}

Ergebnis

Spalten- und Zeilenübergreifend

Dieses Beispiel erweitert und verbessert die Grundtabelle aus demvorherigen Beispiel, indem eine zweite Zeile für zusätzliche Spaltenköpfe hinzugefügt wird.

HTML

Eine zusätzliche Tabellenzeile (<tr> Element) wird als zweite Kopfzeile der Tabelle hinzugefügt, mit zwei zusätzlichen Spaltenköpfen (<th> Elemente). Auf diese Weise wird die "Aussprache"-Spalte in zwei Spalten unterteilt, eine für die IPA (Internationale Phonetische Alphabet) Notation und eine für die Umschrift (die ursprüngliche Aussprache-Spalte). Die entsprechenden Datenzellen (<td> Elemente) werden jeder nachfolgenden Zeile hinzugefügt.

Wie in denAnwendungshinweisen gezeigt, können diecolspan undrowspan Attribute für die<th> Elemente verwendet werden, um die Kopfzellen den richtigen Spalten und Zeilen zuzuordnen. Um in der Tabellenstruktur einen "zwei-zeiligen" Kopf zu erreichen, werden die ersten beiden Kopfzellen innerhalb des ersten<tr> Elements über zwei Zeilen erstreckt. Die dritte Kopfzelle wird über zwei Spalten in der ersten Zeile erstreckt. Diese Anordnung lässt zwei verfügbare Bereiche in der dritten und vierten Spalte in der zweiten Zeile, wo die beiden Köpfe innerhalb des zweiten<tr> Elements automatisch platziert werden, wobei der Standardwert für diecolspan undrowspan Attribute auf1 gesetzt ist.

<table>  <tr>    <th scope="col" rowspan="2">Symbol</th>    <th scope="col" rowspan="2">Code word</th>    <th scope="col" colspan="2">Pronunciation</th>  </tr>  <tr>    <th scope="col">IPA</th>    <th scope="col">Respelling</th>  </tr>  <tr>    <th scope="row">A</th>    <td>Alfa</td>    <td>ˈælfa</td>    <td>AL fah</td>  </tr>  <tr>    <th scope="row">B</th>    <td>Bravo</td>    <td>ˈbraːˈvo</td>    <td>BRAH voh</td>  </tr>  <tr>    <th scope="row">C</th>    <td>Charlie</td>    <td>ˈtʃɑːli</td>    <td>CHAR lee</td>  </tr>  <tr>    <th scope="row">D</th>    <td>Delta</td>    <td>ˈdeltɑ</td>    <td>DELL tah</td>  </tr></table>

CSS

Das CSS ist unverändert gegenüber demvorherigen Beispiel.

table {  border-collapse: collapse;  border: 2px solid rgb(140 140 140);  font-family: sans-serif;  font-size: 0.8rem;  letter-spacing: 1px;}th,td {  border: 1px solid rgb(160 160 160);  padding: 8px 10px;}th[scope="col"] {  background-color: #505050;  color: white;}th[scope="row"] {  background-color: #d6ecd4;}tr:nth-of-type(odd) td {  background-color: #eeeeee;}

Ergebnis

Kopfzellen mit anderen Kopfzellen assoziieren

Für komplexere Beziehungen zwischen Kopfzellen reicht die Verwendung vonth Elementen mit demscope Attribut allein möglicherweise nicht aus, insbesondere für unterstützende Technologien wie Screenreader.

HTML

Um dieBarrierefreiheit desvorherigen Beispiels zu verbessern und um Screenreader beispielsweise die zugeordneten Kopfzellen sprechen zu lassen, kann dasheaders Attribut zusammen mitid Attributen eingeführt werden. Durch die Art und Weise, wie die "Aussprache"-Spalte in zwei Spalten unterteilt wird, was einen "zwei-zeiligen" Kopf einführt, können unterstützende Technologien wie Screenreader möglicherweise nicht erkennen, mit welchen zusätzlichen Kopfzellen (th Elemente) die "Aussprache"-Kopfzelle verbunden ist und umgekehrt. Daher wird dasheaders Attribut auf den Kopfzellen "Aussprache", "IPA" und "Umschrift" verwendet, um die zugeordneten Kopfzellen basierend auf den Werten der eindeutigen Bezeichner, die aus den hinzugefügtenid Attributen stammen, als durch Leerzeichen getrennte Liste zu assoziieren.

<table>  <tr>    <th scope="col" rowspan="2">Symbol</th>    <th scope="col" rowspan="2">Code word</th>    <th scope="col" colspan="2" headers="i r">Pronunciation</th>  </tr>  <tr>    <th scope="col" headers="p">IPA</th>    <th scope="col" headers="p">Respelling</th>  </tr>  <tr>    <th scope="row">A</th>    <td>Alfa</td>    <td>ˈælfa</td>    <td>AL fah</td>  </tr>  <tr>    <th scope="row">B</th>    <td>Bravo</td>    <td>ˈbraːˈvo</td>    <td>BRAH voh</td>  </tr>  <tr>    <th scope="row">C</th>    <td>Charlie</td>    <td>ˈtʃɑːli</td>    <td>CHAR lee</td>  </tr>  <tr>    <th scope="row">D</th>    <td>Delta</td>    <td>ˈdeltɑ</td>    <td>DELL tah</td>  </tr></table>

Ergebnis

Dasvisuelle Ergebnis ist unverändert gegenüber dervorherigen Tabelle.

Technische Zusammenfassung

Spezifikationen

Browser-Kompatibilität

Siehe auch

• Lernen: Grundlagen von HTML-Tabellen
• <caption>,<col>,<colgroup>,<table>,<tbody>,<td>,<tfoot>,<thead>,<tr>: Weitere tabellenbezogene Elemente
• background-color: CSS-Eigenschaft, um die Hintergrundfarbe jeder Kopfzelle festzulegen
• border: CSS-Eigenschaft zur Steuerung der Ränder von Kopfzellen
• height: CSS-Eigenschaft zur Steuerung der empfohlenen Kopfzellenhöhe
• text-align: CSS-Eigenschaft zur horizontalen Ausrichtung des Inhalts jeder Kopfzelle
• vertical-align: CSS-Eigenschaft zur vertikalen Ausrichtung des Inhalts jeder Kopfzelle
• width: CSS-Eigenschaft zur Steuerung der empfohlenen Kopfzellenbreite
• :nth-of-type,:first-of-type,:last-of-type: CSS-Pseudoklassen zur Auswahl der gewünschten Kopfzellen