<th>: Das Tabellenkopf-Element

Dieses Element enthält die globalen Attribute.

abbr

Eine kurze, abgekürzte Beschreibung des Inhalts der Kopfzelle, die als alternatives Label zur Verwendung für die Kopfzelle bereitgestellt wird, wenn auf die Zelle in anderen Kontexten verwiesen wird. Einige Benutzeragenten, wie Screenreader, können diese Beschreibung vor dem eigentlichen Inhalt wiedergeben.

colspan

Ein nicht-negativer Ganzzahlwert, der angibt, wie viele Spalten die Kopfzelle überbrückt oder erweitert. Der Standardwert ist 1. Benutzeragenten verwerfen Werte größer als 1000 als unkorrekt und setzen diese Werte auf 1 zurück.

headers

Eine Liste von durch Leerzeichen getrennten Zeichenfolgen, die den id-Attributen der <th>-Elemente entsprechen, die die Kopfzellen für diese Kopfzelle bereitstellen.

rowspan

Ein nicht-negativer Ganzzahlwert, der angibt, wie viele Zeilen die Kopfzelle überbrückt oder erweitert. Der Standardwert ist 1; ist der Wert auf 0 gesetzt, erstreckt sich die Kopfzelle bis zum Ende des Tabellensektionsgruppierungsabschnitts (<thead>, <tbody>, <tfoot>, auch wenn implizit definiert), dem das <th>-Element gehört. Werte größer als 65534 werden auf 65534 gekürzt.

scope

Definiert die Zellen, zu denen sich die Kopfzelle (im <th>-Element definiert) verhält. Mögliche aufzählbare Werte sind:

• row: Die Kopfzelle bezieht sich auf alle Zellen der Zeile, zu der sie gehört;
• col: Die Kopfzelle bezieht sich auf alle Zellen der Spalte, zu der sie gehört;
• rowgroup: Die Kopfzelle gehört zu einer Zeilengruppe und bezieht sich auf alle ihre Zellen;
• colgroup: Die Kopfzelle 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.

Die folgenden Attribute sind veraltet und sollten nicht verwendet werden. Sie werden hier der Vollständigkeit halber dokumentiert, um bestehende Codes zu aktualisieren und aus historischem Interesse.

align Veraltet

Gibt die horizontale Ausrichtung der Kopfzelle an. Die möglichen aufzählbaren Werte sind left, center, right, justify und char. Wenn unterstützt, richtet der char-Wert den Textinhalt an dem im char-Attribut definierten Zeichen und dem im 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 durch Leerzeichen getrennten Zeichenfolgen, die jeweils dem id-Attribut 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, dem ein # vorangestellt ist, oder ein Farbname. Andere CSS <color>-Werte werden nicht unterstützt. Verwenden Sie stattdessen die background-color CSS-Eigenschaft, da dieses Attribut veraltet ist.

char Veraltet

Hat keine Funktion. Es war ursprünglich vorgesehen, die Ausrichtung des Inhalts an einem Zeichen der Kopfzelle zu spezifizieren. Typische Werte hierfür sind ein Punkt (.), wenn versucht wird, Zahlen oder Geldbeträge auszurichten. Wenn align nicht auf char gesetzt ist, wird dieses Attribut ignoriert.

charoff Veraltet

Hat keine Funktion. Es war ursprünglich vorgesehen, die Anzahl der Zeichen anzugeben, um die der Kopfzelleninhalt vom im char-Attribut angegebenen Zeichen auszugleichen.

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. Die möglichen aufzählbaren 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.

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

• In einfachen Kontexten ist die Verwendung des scope-Attributs in Kopfzellen (<th>-Elemente) redundant, weil scope impliziert wird. Allerdings kann es bei bestimmten unterstützenden Technologien zu Problemen bei der korrekten Interpretation kommen, sodass die Angabe der Kopfzeilenreichweite die Benutzererfahrung verbessern kann.

• Bei der Verwendung der Attribute colspan und rowspan, um Kopfzellen über mehrere Spalten und Zeilen hinweg zu erweitern, werden Zellen ohne definierte Attribute (mit einem Standardwert von 1) automatisch in frei verfügbaren Bereichen in der Tabellenstruktur platziert, die 1x1-Zellen abdecken, wie in der folgenden Abbildung gezeigt:

  

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

Siehe <table> für ein vollständiges Tabellenbeispiel, das gängige Standards und Best Practices einführt.

Dieses Beispiel verwendet <th>-Elemente, 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 zu erleichtern und die Daten zu identifizieren. Um anzuzeigen, dass sich jede Spaltenüberschrift auf alle Zellen in der entsprechenden Spalte bezieht, wird das scope-Attribut auf col (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. Dies erstellt eine Spalte mit Zeilenüberschriften als erste Spalte der Tabelle. Ähnlich wie bei den Spaltenüberschriften wird das scope-Attribut auf row gesetzt, um festzulegen, auf welche Zellen sich jede Zeilenüberschrift bezieht; im folgenden Beispiel sind dies alle Datenzellen (<td>-Elemente) in jeder Zeile.

<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 stylen. Wir verwenden CSS-Attributselektoren, um Kopfzellen basierend auf ihren scope-Attributwerten zu adressieren und Spalten- sowie Zeilenüberschriften (<th>-Elemente) hervorzuheben, sie von den anderen zu unterscheiden und von den Datenzellen (<td>).

th,
td {
  border: 1px solid rgb(160 160 160);
  padding: 8px 10px;
}

th[scope="col"] {
  background-color: #505050;
  color: #fff;
}

th[scope="row"] {
  background-color: #d6ecd4;
}

tr:nth-of-type(odd) td {
  background-color: #eee;
}

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

Ergebnis

Dieses Beispiel erweitert und verbessert die grundlegende Tabelle aus dem vorherigen Beispiel, indem eine zweite Zeile für zusätzliche Spaltenüberschriften hinzugefügt wird.

HTML

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

Wie in den Verwendungshinweisen gezeigt, können die Attribute colspan und rowspan bei den <th>-Elementen verwendet werden, um die Kopfzellen den korrekten Spalten und Zeilen zuzuordnen. Um eine "Zwei-Zeilen"-Kopfzeile in der Tabellenstruktur zu erreichen, werden die ersten zwei Kopfzellen innerhalb des ersten <tr>-Elements über zwei Zeilen gespannt. Die dritte Kopfzelle wird über zwei Spalten hinweg erweitert (verbleibend in der ersten Zeile). Dieses Setup lässt zwei verfügbare Bereiche in der dritten und vierten Spalte in der zweiten Zeile, in denen die zwei Überschriften innerhalb des zweiten <tr>-Elements automatisch platziert werden, wobei der Standardwert für die Attribute colspan und rowspan 1 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 vom 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: #fff;
}

th[scope="row"] {
  background-color: #d6ecd4;
}

tr:nth-of-type(odd) td {
  background-color: #eee;
}

Ergebnis

Für komplexere Beziehungen zwischen Kopfzeilen reicht die Verwendung von th-Elementen mit dem scope-Attribut allein möglicherweise nicht aus, um unterstützenden Technologien, insbesondere Screenreadern, gerecht zu werden.

HTML

Um die Zugänglichkeit des vorherigen Beispiels zu verbessern und Screenreader, z. B., die mit jeder Kopfzelle verbundenen Überschriften aussprechen zu lassen, kann das headers-Attribut zusammen mit id-Attributen eingeführt werden. Aufgrund der Art und Weise, wie die "Aussprache"-Spalte im Beispiel in zwei Spalten unterteilt ist, die eine "Zwei-Zeilen"-Kopfzeile bilden, könnte es für unterstützende Technologien wie Screenreader schwierig sein, zu erkennen, mit welchen zusätzlichen Kopfzellen (th-Elemente) die "Aussprache"-Kopfzelle verwandt ist und umgekehrt. Deshalb wird das headers-Attribut bei der "Aussprache"-, "IPA"- und "Umschrift"-Kopfzelle verwendet, um die verwandten Kopfzellen anhand der Werte der einzigartigen Bezeichner aus den hinzugefügten id-Attributen in Form einer durch Leerzeichen getrennten Liste zuzuordnen.

<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 ist unverändert von der vorherigen Beispielstabelle.

• Lernen: Grundlegende HTML-Tabellen
• <caption>, <col>, <colgroup>, <table>, <tbody>, <td>, <tfoot>, <thead>, <tr>: Andere tabellenbezogene Elemente
• background-color: CSS-Eigenschaft zur Festlegung der Hintergrundfarbe jeder Kopfzelle
• border: CSS-Eigenschaft zur Steuerung der Rahmen der 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