Das<th>-Element inHTML definiert eine Zelle als Überschrift für eine Gruppe von Tabellenzellen und kann als Kind des<tr>-Elements verwendet werden. Die genaue Natur 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 Überschriftzelle, die als alternatives Label verwendet wird, um die Zelle in anderen Kontexten zu referenzieren. Einige Benutzeragenten, wie Screenreader, können diese Beschreibung vor dem eigentlichen Inhalt darstellen.

colspan

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

headers

Eine Liste von durch Leerzeichen getrennten Zeichenfolgen, die denid-Attributen der<th>-Elemente entsprechen, welche die Überschriften für diese Überschriftzelle bereitstellen.

rowspan

Ein nicht-negativer ganzzahliger Wert, der angibt, wie viele Zeilen die Überschriftzelle überspannt oder erweitert. Der Standardwert ist1; wenn der Wert auf0 gesetzt wird, erstreckt sich die Überschriftzelle bis zum Ende des Tabellenbereichs (<thead>,<tbody>,<tfoot>, auch wenn implizit definiert), zu dem das<th> gehört. Werte über65534 werden bei65534 abgeschnitten.

scope

Definiert die Zellen, auf die sich die Überschrift (im<th>-Element definiert) bezieht. Möglicheaufzählbare Werte sind:

• row: Die Überschrift bezieht sich auf alle Zellen der Zeile, zu der sie gehört;
• col: Die Überschrift bezieht sich auf alle Zellen der Spalte, zu der sie gehört;
• rowgroup: Die Überschrift gehört zu einer Zeilengruppe und bezieht sich auf alle deren Zellen;
• colgroup: Die Überschrift gehört zu einer Spaltengruppe und bezieht sich auf alle deren Zellen.

Wenn dasscope-Attribut nicht spezifiziert ist oder sein Wert nichtrow,col,rowgroup odercolgroup ist, wählen Browser automatisch die Gruppe der Zellen aus, auf die sich die Überschriftzelle bezieht.

Veraltete Attribute

Die folgenden Attribute sind veraltet und sollten nicht verwendet werden. Sie sind unten dokumentiert, um vorhandenen Code zu aktualisieren und aus historischem Interesse.

alignVeraltet

Bestimmt die horizontale Ausrichtung der Überschriftzelle. Die möglichenaufzählbaren Werte sindleft,center,right,justify undchar. Wenn unterstützt, richtet derchar-Wert den textuellen Inhalt an dem imchar-Attribut definierten Zeichen aus, sowie an dem durch dascharoff-Attribut definierten Versatz. Verwenden Sie dietext-align CSS-Eigenschaft statt dieses Attributs, da es veraltet ist.

axisVeraltet

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

bgcolorVeraltet

Definiert die Hintergrundfarbe der Überschriftzelle. Der Wert ist eine HTML-Farbe; entweder einsechsstelliger hexadezimaler RGB-Code, vorangestellt mit einem#, oder einFarb-Keyword. Andere CSS<color>-Werte werden nicht unterstützt. Verwenden Sie diebackground-color CSS-Eigenschaft statt dieses Attributs, da es veraltet ist.

charVeraltet

Tut nichts. Es war ursprünglich gedacht, um die Ausrichtung des Inhalts an einem Zeichen der Überschriftzelle zu spezifizieren. Typische Werte hierfür beinhalten einen Punkt (.), wenn versucht wird, Zahlen oder Geldwerte auszurichten. Wennalign nicht aufchar gesetzt ist, wird dieses Attribut ignoriert.

charoffVeraltet

Tut nichts. Es war ursprünglich gedacht, um die Anzahl der Zeichen anzugeben, mit denen der Inhalt der Überschriftzelle vom imchar-Attribut spezifizierten Ausrichtungszeichen versetzt werden soll.

heightVeraltet

Definiert eine empfohlene Höhe der Überschriftzelle. Verwenden Sie dieheight CSS-Eigenschaft statt dieses Attributs, da es veraltet ist.

valignVeraltet

Bestimmt die vertikale Ausrichtung der Überschriftzelle. Die möglichenaufzählbaren Werte sindbaseline,bottom,middle undtop. Verwenden Sie dievertical-align CSS-Eigenschaft statt dieses Attributs, da es veraltet ist.

widthVeraltet

Definiert eine empfohlene Breite der Überschriftzelle. Verwenden Sie diewidth CSS-Eigenschaft statt dieses Attributs, da es veraltet ist.

Nutzungshinweise

• Das<th>-Element darf nur innerhalb eines<tr>-Elements verwendet werden.

• In einfachen Kontexten ist die Verwendung desscope-Attributs in Überschriftzellen (<th>-Elemente) redundant, dascope abgeleitet wird. Bestimmte unterstützende Technologien können jedoch möglicherweise nicht korrekt ableiten, daher kann die Angabe des Bereichs der Überschrift die Benutzererfahrung verbessern.

• Beim Verwenden der Attributecolspan undrowspan, um Überschriftzellen über mehrere Spalten und Zeilen zu erstrecken, werden Zellen ohne definierte Attribute (mit einem Standardwert von1) automatisch in freie verfügbare Räume der Tabellenstruktur integriert, die 1x1-Zellen umfassen, wie im folgenden Bild veranschaulicht:

  

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

Beispiele

Das<table> zeigt ein vollständiges Tabellenbeispiel, das gängige Standards und bewährte Praktiken einführt.

Grundlegende Spalten- und Zeilenüberschriften

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

HTML

Die erste Zeile (<tr>-Element) enthält die Spaltenüberschriften (<th>-Elemente), die als "Titel" für die Spalten fungieren, um das Verständnis der Informationen in den Spalten und die Identifikation der Daten zu erleichtern. Um anzuzeigen, dass sich jede Spaltenüberschrift auf alle Zellen der entsprechenden Spalte bezieht, wird dasscope-Attribut aufcol (Spalte) gesetzt.

Die verbleibenden Zeilen enthalten die Hauptdaten der Tabelle. Jede dieser Zeilen hat eine Zeilenüberschrift (<th>-Element), die als erste Zelle eingeführt wird. Dadurch entsteht eine Spalte mit Zeilenüberschriften als erste Spalte der Tabelle. Ähnlich wie bei den Spaltenüberschriften wird dasscope-Attribut aufrow gesetzt, um zu spezifizieren, auf welche Zellen sich jede Zeilenüberschrift bezieht, was im unten stehenden Beispiel alle Datenzellen (<td>-Elemente) in jederrow 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

Einige grundlegende CSS-Regeln werden verwendet, um die Tabelle und ihre Zellen zu gestalten. Wir verwenden CSS-Attributselektoren, um Überschriftzellen basierend auf ihrenscope-Attributwerten auszuwählen und Spalten- und Zeilenüberschriften (<th>-Elemente) zu kennzeichnen, um sie voneinander und 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 Zeilenspannen

Dieses Beispiel erweitert und verbessert die Grundtabelle aus demvorherigen Beispiel durch das Hinzufügen einer zweiten Zeile für zusätzliche Spaltenüberschriften.

HTML

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

Wie in denNutzungshinweisen gezeigt, können diecolspan undrowspan-Attribute für die<th>-Elemente verwendet werden, um die Überschriftzellen den richtigen Spalten und Zeilen zuzuordnen. Um eine "zweizeilige" Überschrift in der Tabellenstruktur zu erreichen, werden die ersten beiden Überschriftzellen innerhalb des ersten<tr>-Elements auf zwei Zeilen erstreckt. Die dritte Überschriftzelle erstreckt sich über zwei Spalten (bleibt in der ersten Zeile). Diese Einrichtung lässt zwei verfügbare Bereiche in der dritten und vierten Spalte in der zweiten Zeile frei, in denen die beiden Überschriften innerhalb des zweiten<tr>-Elements automatisch platziert werden, wobei der Standardwert für diecolspan undrowspan-Attribute1 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 zumvorherigen 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

Verknüpfen von Überschriftzellen mit anderen Überschriftzellen

Für komplexere Beziehungen zwischen Überschriftzellen kann die alleinige Nutzung vonth-Elementen mit demscope-Attribut für unterstützende Technologien, insbesondere Screenreader, nicht ausreichen.

HTML

Um dieZugänglichkeit desvorherigen Beispiels zu verbessern und um beispielsweise Screenreadern das Vorlesen der mit jeder Überschriftzelle verbundenen Überschriften zu ermöglichen, kann dasheaders-Attribut zusammen mitid-Attributen eingeführt werden. Aufgrund der Art und Weise, wie die "Aussprache"-Spalte im Beispiel in zwei Spalten aufgeteilt wird, wobei eine "zweizeilige" Überschrift eingeführt wird, können unterstützende Technologien wie Screenreader möglicherweise nicht identifizieren, mit welchen zusätzlichen Überschriftzellen (th-Elemente) die "Aussprache"-Überschriftzelle in Beziehung steht und umgekehrt. Daher wird dasheaders-Attribut auf den "Aussprache"-, "IPA"- und "Respelling"-Überschriftzellen verwendet, um die entsprechenden Überschriftzellen basierend auf den Werten der einzigartigen Kennungen aus den hinzugefügtenid-Attributen in Form einer durch Leerzeichen getrennten Liste zu verknüpfen.

<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 zumvorherigen Tabellenbeispiel.

Technische Zusammenfassung

Spezifikationen

Browser-Kompatibilität

Siehe auch

• Lernen: Grundlegende HTML-Tabellen
• <caption>,<col>,<colgroup>,<table>,<tbody>,<td>,<tfoot>,<thead>,<tr>: Andere tabellenbezogene Elemente
• background-color: CSS-Eigenschaft, um die Hintergrundfarbe jeder Überschriftzelle zu setzen
• border: CSS-Eigenschaft, um die Begrenzungen der Überschriftzellen zu steuern
• height: CSS-Eigenschaft, um die empfohlene Höhe der Überschriftzelle zu steuern
• text-align: CSS-Eigenschaft, um den Inhalt jeder Überschriftzelle horizontal auszurichten
• vertical-align: CSS-Eigenschaft, um den Inhalt jeder Überschriftzelle vertikal auszurichten
• width: CSS-Eigenschaft, um die empfohlene Breite der Überschriftzelle zu steuern
• :nth-of-type,:first-of-type,:last-of-type: CSS-Pseudoklassen, um die gewünschten Überschriftzellen auszuwählen