<th>: Das Tabellenkopf-Element

Dieses Element enthält die globalen Attribute.

abbr

Eine kurze, abgekürzte Beschreibung des Inhalts der Kopfzelle, die als alternative Beschriftung für die Kopfzelle in anderen Kontexten verwendet wird. Einige Benutzeragenten, wie z.B. Bildschirmlesegeräte, können 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. Benutzeragenten ignorieren Werte höher als 1000 als falsch und setzen solche Werte auf 1.

headers

Eine Liste von Zeichenfolgen, die durch Leerzeichen getrennt sind und den id-Attributen der <th>-Elemente entsprechen, die die Überschriften 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 sein Wert auf 0 gesetzt ist, erstreckt sich die Kopfzelle bis zum Ende des Tabellen-Gruppierungsabschnitts (<thead>, <tbody>, <tfoot>, auch wenn implizit definiert), zu dem das <th>-Element gehört. Werte höher als 65534 werden auf 65534 gekürzt.

scope

Definiert die Zellen, auf die sich die Kopfzelle (definiert im <th>-Element) bezieht. Mögliche enumerierte 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 deren Zellen;
• colgroup: die Kopfzelle gehört zu einer Spaltengruppe und bezieht sich auf alle deren Zellen.

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

Die folgenden Attribute sind veraltet und sollten nicht mehr verwendet werden. Sie werden nur dokumentiert, um vorhandenen Code beim Aktualisieren und aus historischem Interesse zu berücksichtigen.

align Veraltet

Gibt die horizontale Ausrichtung der Kopfzelle an. Die möglichen enumerierten Werte sind left, center, right, justify und char. Wenn unterstützt, richtet der Wert char den Textinhalt an dem im char-Attribut definierten Zeichen und dem im charoff-Attribut definierten Versatz aus. Verwenden Sie stattdessen die text-align-CSS-Eigenschaft, da dieses Attribut veraltet ist.

axis Veraltet

Enthält eine Liste von Zeichenfolgen, die durch Leerzeichen getrennt sind und 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, vorangestellt durch ein #, 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 Wirkung. Es war ursprünglich gedacht, um die Ausrichtung des Inhalts auf ein Zeichen der Kopfzelle zu spezifizieren. Typische Werte hierfür umfassen einen Punkt (.), wenn versucht wird, Zahlen oder Geldwerte auszurichten. Wenn align nicht auf char gesetzt ist, wird dieses Attribut ignoriert.

charoff Veraltet

Hat keine Wirkung. Es war ursprünglich gedacht, um die Anzahl der Zeichen anzugeben, die der Inhalt der Kopfzelle vom Ausrichtungszeichen verschoben ist, das durch das char-Attribut spezifiziert ist.

height Veraltet

Definiert eine empfohlene Höhe für die 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 enumerierten 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 für die Kopfzelle. Verwenden Sie stattdessen die width-CSS-Eigenschaft, da dieses Attribut veraltet ist.

• Das <th>-Element 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 abgeleitet wird. Einige unterstützende Technologien können jedoch keine korrekten Rückschlüsse ziehen, daher kann das explizite Festlegen des Kopfbereichs die Benutzererfahrung verbessern.

• Beim Verwenden der Attribute colspan und rowspan, um Kopfzellen über mehrere Spalten und Zeilen zu erstrecken, werden Zellen ohne definierte Attribute (mit einem Standardwert von 1) automatisch in freie verfügbare Räume der Tabellenstruktur eingefügt, die 1x1-Zellen umfassen, wie im folgenden Bild dargestellt:

  

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

Siehe <table> für ein vollständiges Tabellenbeispiel mit Einführung in allgemeine Standards und bewährte Praktiken.

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 dienen, um das Verstehen der Informationen in den Spalten zu erleichtern und die Daten zu identifizieren. Um anzugeben, 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) eingeführt als die erste Zelle. Dadurch entsteht eine Spalte mit Zeilenüberschriften als erste Spalte der Tabelle. Ähnlich wie bei den Spaltenüberschriften wird das scope-Attribut auf row gesetzt, um anzugeben, auf welche Zellen sich jede Zeilenüberschrift bezieht, die im folgenden Beispiel alle Datenzellen (<td>-Elemente) in jeder row 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-Stile werden verwendet, um die Tabelle und ihre Zellen zu gestalten. Wir verwenden CSS-Attributselektoren, um Kopfzellen basierend auf ihren scope-Attributwerten zu selektieren, Spalten- und Zeilenüberschriften (<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: #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 einfache Tabelle des vorherigen Beispiels, 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 Neuschreibung (die ursprüngliche Aussprache-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 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 erstreckt. Die dritte Kopfzelle wird über zwei Spalten breit gemacht (verbleibend in der ersten Zeile). Dieses Setup lässt zwei verfügbare Bereiche in den dritten und vierten Spalten in der zweiten Zeile, in denen die beiden Kopfzellen innerhalb des zweiten <tr>-Elements automatisch platziert werden, wobei der Standardwert 1 für die Attribute colspan und rowspan 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 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: #fff;
}

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

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

Ergebnis

Für komplexere Beziehungen zwischen Kopfzellen kann die Verwendung von th-Elementen mit dem scope-Attribut allein für unterstützende Technologien, insbesondere Bildschirmlesegeräte, nicht ausreichend sein.

HTML

Um die Barrierefreiheit des vorherigen Beispiels zu verbessern und es Bildschirmlesegeräten zum Beispiel zu ermöglichen, die zugehörigen Überschriften mit jeder Kopfzelle auszusprechen, 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 aufgeteilt ist, indem eine "Zwei-Zeilen"-Kopfzeile eingeführt wird, können unterstützende Technologien wie Bildschirmlesegeräte möglicherweise nicht erkennen, zu welchen zusätzlichen Kopfzellen (th-Elementen) die "Aussprache"-Kopfzelle gehört und umgekehrt. Daher wird das headers-Attribut auf den "Aussprache"-, "IPA"- und "Neuschreibung"-Kopfzellen verwendet, um die zugehörigen Kopfzellen basierend auf den Werten der einzigartigen Bezeichner aus den hinzugefügten id-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" 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 Beispieltabelle.

• Learn: Grundlagen von HTML-Tabellen
• <caption>, <col>, <colgroup>, <table>, <tbody>, <td>, <tfoot>, <thead>, <tr>: Andere tabellenbezogene Elemente
• background-color: CSS-Eigenschaft zum Festlegen der Hintergrundfarbe jeder Kopfzelle
• border: CSS-Eigenschaft zur Steuerung der Rahmen von Kopfzellen
• height: CSS-Eigenschaft zur Steuerung der empfohlenen Höhe einer Kopfzelle
• 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 Breite einer Kopfzelle
• :nth-of-type, :first-of-type, :last-of-type: CSS-Pseudoklassen zur Auswahl der gewünschten Kopfzellen