<th>: Das Tabellenkopf-Element

Probieren Sie es aus

<table>
  <caption>
    Alien football stars
  </caption>
  <tr>
    <th scope="col">Player</th>
    <th scope="col">Gloobles</th>
    <th scope="col">Za'taak</th>
  </tr>
  <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>
</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 die globalen Attribute.

abbr

Eine kurze, abgekurzte Beschreibung des Zelleninhalts, die als alternatives Label für die Zelle in anderen Kontexten verwendet wird. Einige Benutzeragenten, wie Bildschirmlesegeräte, könnten diese Beschreibung vor dem eigentlichen Inhalt präsentieren.

colspan

Ein nicht-negativer ganzzahliger Wert, der angibt, wie viele Spalten die Kopfzelle überspannt oder erweitert. Der Standardwert ist 1. Werte über 1000 werden von Benutzeragenten als inkorrekt verworfen und stattdessen auf 1 gesetzt.

headers

Eine Liste von leerzeichenseparierten Strings, die den id-Attributen der <th>-Elemente entsprechen und die Header für diese Kopfzelle bereitstellen.

rowspan

Ein nicht-negativer ganzzahliger Wert, der angibt, wie viele Zeilen die Kopfzelle überspannt oder erweitert. Der Standardwert ist 1; wenn der Wert auf 0 gesetzt wird, erstreckt sich die Kopfzelle bis zum Ende des Tabellengruppierungsbereichs (<thead>, <tbody>, <tfoot>, auch wenn implizit definiert), zu dem das <th> gehört. Werte über 65534 werden bei 65534 abgeschnitten.

scope

Definiert die Zellen, die mit dem Kopf (definiert in <th>) zusammenhängen. Mögliche aufzählbare Werte sind:

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

Wenn das scope-Attribut nicht angegeben ist oder sein Wert nicht row, col, rowgroup oder colgroup ist, wählen Browser automatisch den Satz von Zellen aus, auf den sich die Kopfzelle bezieht.

Veraltete Attribute

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

align Veraltet

Gibt die horizontale Ausrichtung der Kopfzelle an. Mögliche aufzählbare Werte sind left, center, right, justify und char. Wenn unterstützt, richtet der Wert char den textuellen Inhalt an dem durch das char-Attribut definierten Zeichen und dem durch das charoff-Attribut definierten Offset aus. Verwenden Sie stattdessen die text-align CSS-Eigenschaft, da dieses Attribut veraltet ist.

axis Veraltet

Enthält eine Liste von leerzeichenseparierten Strings, die jeweils den id-Attributen einer Gruppe von Zellen entsprechen, auf die sich die Kopfzelle bezieht. Verwenden Sie stattdessen das scope-Attribut, da dieses Attribut veraltet ist.

bgcolor Veraltet

Definiert die Hintergrundfarbe der Kopfzelle. Der Wert ist eine HTML-Farbe; entweder ein 6-stelliger hexadezimaler RGB-Code, der mit einem # beginnt, oder ein Farb-Schlüsselwort. Andere CSS <color>-Werte werden nicht unterstützt. Verwenden Sie stattdessen die background-color CSS-Eigenschaft, da dieses Attribut veraltet ist.

char Veraltet

Tut nichts. Es war ursprünglich gedacht, um die Ausrichtung des Inhalts an einem Zeichen der Kopfzelle zu spezifizieren. Typische Werte dafür sind ein Punkt (.), wenn versucht wird, Zahlen oder Geldwerte auszurichten. Wenn align nicht auf char gesetzt ist, wird dieses Attribut ignoriert.

charoff Veraltet

Tut nichts. Es war ursprünglich gedacht, um die Anzahl der Zeichen anzugeben, um die der Inhalt der Kopfzelle von dem durch das char-Attribut angegebenen Ausrichtungszeichen zu verschieben.

height Veraltet

Definiert eine empfohlene Höhe der Kopfzelle. Verwenden Sie stattdessen die height CSS-Eigenschaft, da dieses Attribut veraltet ist.

valign Veraltet

Gibt die vertikale Ausrichtung der Kopfzelle an. Mögliche aufzählbare Werte sind baseline, bottom, middle und top. Verwenden Sie stattdessen die vertical-align CSS-Eigenschaft, da dieses Attribut veraltet ist.

width Veraltet

Definiert eine empfohlene Breite der Kopfzelle. Verwenden Sie stattdessen die width CSS-Eigenschaft, da dieses Attribut veraltet ist.

Nutzungshinweise

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

• In einfachen Kontexten ist die Verwendung des scope-Attributs bei Kopfzellen (<th>-Elemente) überflüssig, da scope vermutet wird. Allerdings könnten bestimmte unterstützende Technologien es nicht korrekt vermuten, daher kann die Angabe des Header-Scopes die Benutzererfahrung verbessern.

• Beim Verwenden der colspan- und rowspan-Attribute, um Kopfzellen über mehrere Spalten und Zeilen zu spannnen, werden Zellen ohne definierte Attribute (mit einem Standardwert von 1) automatisch in freie verfügbare Bereiche innerhalb der Tabellenstruktur eingefügt, die 1x1 Zellen spannen, wie in der folgenden Abbildung dargestellt:

  

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

Beispiele

Siehe <table> für ein vollständiges Tabellenbeispiel, das allgemeine Standards und bewährte Verfahren vorstellt.

Grundlegende Spalten- und Zeilenköpfe

Dieses Beispiel verwendet <th>-Elemente, 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 Verständnis 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 das scope-Attribut auf col (Spalte) gesetzt.

Die restlichen Zeilen enthalten die Hauptdaten der Tabelle. Jede dieser Zeilen hat einen Zeilenkopf (<th>-Element), der als erste Zelle eingeführt wird. Dies erzeugt eine Spalte mit Zeilenköpfen als erste Spalte der Tabelle. Ähnlich wie bei den Spaltenköpfen ist das scope-Attribut auf row gesetzt, um anzugeben, auf welche Zellen sich jeder Zeilenkopf bezieht, die im unten stehenden 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

Einfaches CSS wird verwendet, um die Tabelle und ihre Zellen zu gestalten. Wir verwenden CSS-Attributselektoren, um Kopfzellen basierend auf ihren scope-Attributwerten zu identifizieren, Spalten- und Zeilenköpfe (<th>-Elemente) hervorzuheben und 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 die grundlegende Tabelle aus dem vorherigen Beispiel um eine zweite Zeile für zusätzliche Spaltenköpfe.

HTML

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

Wie in den Nutzungshinweisen gezeigt, können die Attribute colspan und rowspan für die <th>-Elemente verwendet werden, um die Kopfzellen korrekt auf die Spalten und Zeilen zu verteilen. Um eine "Zwei-Zeilen"-Kopfzeile in der Tabellenstruktur zu erreichen, werden die ersten beiden Kopfzellen innerhalb des ersten <tr>-Elements über zwei Zeilen erstreckt. Die dritte Kopfzelle erstreckt sich über zwei Spalten (bleibt in der ersten Zeile). Diese Anordnung lässt zwei verfügbare Bereiche in der dritten und vierten Spalte in der zweiten Reihe, in denen die beiden Kopfzeilen innerhalb des zweiten <tr>-Elements mit dem Standardwert 1 für die Attribute colspan und rowspan automatisch platziert werden.

<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 bleibt unverändert gegenüber dem vorherigen 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 verknüpfen

Für komplexere Beziehungen zwischen Kopfzellen reicht die Verwendung von th-Elementen mit dem scope-Attribut allein möglicherweise nicht aus, insbesondere für unterstützende Technologien wie Bildschirmlesegeräte.

HTML

Um die Barrierefreiheit des vorherigen Beispiels zu verbessern und insbesondere, um Bildschirmlesegeräten die Möglichkeit zu geben, die mit jeder Kopfzelle verknüpften Header zu lesen, kann das headers-Attribut zusammen mit id-Attributen eingeführt werden. Aufgrund der Art und Weise, wie die "Aussprache"-Spalte in zwei Spalten aufgeteilt wird und so eine "Zwei-Zeilen"-Kopfzeile entsteht, könnten unterstützende Technologien wie Bildschirmlesegeräte möglicherweise nicht in der Lage sein, zu identifizieren, mit welchen zusätzlichen Kopfzellen (th-Elementen) die "Aussprache"-Kopfzelle in Beziehung steht und umgekehrt. Daher wird das headers-Attribut auf den "Aussprache"-, "IPA"- und "Umschrift"-Kopfzellen verwendet, um die zugehörigen Kopfzellen basierend auf den Werten der hinzugefügten einzigartigen Kennungen aus den id-Attributen in Form einer leerzeichenseparierten 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" id="p" headers="i r">Pronunciation</th>
  </tr>
  <tr>
    <th scope="col" id="i" headers="p">IPA</th>
    <th scope="col" id="r" 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

Das visuelle Ergebnis bleibt unverändert gegenüber der vorherigen Beispielstabelle.

Technische Zusammenfassung

Spezifikationen

Browser-Kompatibilität

Siehe auch

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