<th>: Das Tabellenkopf-Element

Dieses Element umfasst die globalen Attribute.

abbr

Eine kurze, abgekürzte Beschreibung des Inhalts der Kopfzelle, die als alternatives Label bereitgestellt wird, um auf die Kopfzelle in anderen Kontexten zu verweisen. Einige Benutzeragenten, wie Screenreader, 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 verwerfen Werte über 1000 als inkorrekt und setzen solche Werte auf 1.

headers

Eine Liste von durch Leerzeichen getrennten Zeichenfolgen, die 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 der Wert auf 0 gesetzt ist, wird die Kopfzelle bis zum Ende des Tabellengruppierungsbereichs (<thead>, <tbody>, <tfoot>, auch wenn implizit definiert) verlängert, zu dem das <th>-Element gehört. Werte über 65534 werden auf 65534 beschränkt.

scope

Definiert die Zellen, zu denen die Kopfelemente (im <th>-Element definiert) gehören. Mögliche aufzählbare 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 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 die Kopfzelle angewendet wird.

Die folgenden Attribute sind veraltet und sollten nicht verwendet werden. Sie sind unten dokumentiert, um sie beim Aktualisieren vorhandenen Codes als Referenz und aus historischem Interesse zu nutzen.

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 Zeichen aus, das im char-Attribut definiert ist, und an dem Versatz, der im charoff-Attribut definiert ist. 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 die Kopfzelle angewendet wird. 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 sechsstelliger hexadezimaler RGB-Code, dem ein # vorangestellt ist, oder ein Farbbegriff. 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 dazu gedacht, die Ausrichtung des Inhalts an einem Zeichen der Kopfzelle anzugeben. Typische Werte hierfür sind ein Punkt (.), wenn versucht wird, Zahlen oder Währungswerte auszurichten. Wenn align nicht auf char gesetzt ist, wird dieses Attribut ignoriert.

charoff Veraltet

Tut nichts. Es war ursprünglich dazu gedacht, die Anzahl der Zeichen anzugeben, um die der Inhalt der Kopfzelle vom Ausrichtungszeichen, das durch das char-Attribut spezifiziert ist, zu versetzen.

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 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 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 auf Kopfzellen (<th>-Elemente) redundant, da scope abgeleitet wird. Bestimmte unterstützende Technologien können jedoch möglicherweise nicht korrekt ableiten, sodass die Angabe der Kopfbereichs die Benutzererfahrung verbessern kann.

• Bei der Verwendung der Attribute colspan und rowspan, um Kopfzellen über mehrere Spalten und Zeilen hinweg zu umfassen, werden Zellen ohne diese definierten Attribute (mit einem Standardwert von 1) automatisch in freie verfügbare Räume in der Tabellenstruktur eingefügt, die 1x1-Zellen umfassen, wie in der folgenden Abbildung dargestellt:

  

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

Siehe <table> für ein vollständiges Tabellenbeispiel, das allgemeine 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) als erste Zelle. Dadurch wird eine Spalte mit Zeilenüberschriften als erste Spalte der Tabelle erstellt. Ähnlich wie bei den Spaltenüberschriften wird das scope-Attribut auf row gesetzt, um anzugeben, auf welche Zellen sich jede Zeilenüberschrift bezieht, die in dem untenstehenden 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

Ein einfaches CSS wird verwendet, um die Tabelle und ihre Zellen zu gestalten. Wir verwenden CSS-Attributselektoren, um Kopfzellen basierend auf ihren scope-Attributwerten anzusprechen, 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 grundlegende Tabelle aus dem vorherigen Beispiel durch Hinzufügen einer zweiten Zeile für zusätzliche Spaltenüberschriften.

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 unterteilt, eine für die IPA (International Phonetic Alphabet)-Notation und eine für die Lautumschrift (die ursprüngliche Aussprachespalte). Die entsprechenden Datenzellen (<td>-Elemente) werden zu jeder nachfolgenden Zeile hinzugefügt.

Wie in den Verwendungshinweisen gezeigt, können die Attribute colspan und rowspan für die <th>-Elemente verwendet werden, um die Kopfzellen den richtigen Spalten und Zeilen zuzuordnen. Um in der Tabellenstruktur einen "zweizeiligen" Kopf zu erreichen, werden die ersten beiden Kopfzellen innerhalb des ersten <tr>-Elements über zwei Zeilen gespannt. Die dritte Kopfzelle wird zwei Spalten lang (in der ersten Zeile verbleibend) gespannt. Diese Konfiguration lässt zwei verfügbare Bereiche in der dritten und vierten Spalte in der zweiten Zeile frei, in denen die beiden Kopfzellen 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 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 alleinige Verwendung von th-Elementen mit dem scope-Attribut für unterstützende Technologien, insbesondere Screenreader, nicht ausreichen.

HTML

Um die Barrierefreiheit des vorhergehenden Beispiels zu verbessern und zum Beispiel zu ermöglichen, dass Screenreader die mit jeder Kopfzelle assoziierten Überschriften vorlesen können, kann das headers-Attribut zusammen mit id-Attributen eingeführt werden. Aufgrund der Weise, in der die "Aussprachespalte" in zwei Spalten in dem Beispiel unterteilt ist und eine "zweizeilige" Kopfzeile eingeführt wird, können unterstützende Technologien wie Screenreader möglicherweise nicht erkennen, mit welchen zusätzlichen Kopfzellen (th-Elementen) die "Aussprache"-Kopfzeile in Beziehung steht, und umgekehrt. Daher wird das headers-Attribut auf den "Aussprache"-, "IPA"- und "Umschrift"-Kopfzellen verwendet, um die entsprechenden Kopfzellen basierend auf den Werten der eindeutigen Bezeichner der hinzugefügten id-Attribute in Form einer 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 Beispielstabelle.

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