<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 verwendet wird, wenn auf die Kopfzelle in anderen Kontexten verwiesen wird. Einige Benutzeragenten, wie Sprachausgaben, können diese Beschreibung vor dem eigentlichen Inhalt anzeigen.

colspan

Ein nicht-negativer Ganzzahlenwert, der angibt, über wie viele Spalten sich die Kopfzelle erstreckt oder ausdehnt. Der Standardwert ist 1. Benutzeragenten verwerfen Werte über 1000 als falsch und setzen solche Werte standardmäßig auf 1.

headers

Eine Liste von leerzeichengetrennten Zeichenfolgen, die den id-Attributen der <th>-Elemente entsprechen, welche die Kopfzeilen für diese Kopfzelle bereitstellen.

rowspan

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

scope

Definiert die Zellen, auf die sich die Kopfzeile (definiert im <th>-Element) bezieht. Mögliche enumerierte 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 sich die Kopfzelle bezieht.

Die folgenden Attribute sind veraltet und sollten nicht verwendet werden. Sie sind hier nur zur Referenz bei der Aktualisierung vorhandenen Codes und aus historischem Interesse dokumentiert.

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 char-Wert den Textinhalt auf das im char-Attribut definierte Zeichen und das im charoff-Attribut definierte Leerzeichen aus. Verwenden Sie die text-align CSS-Eigenschaft anstatt, da dieses Attribut veraltet ist.

axis Veraltet

Enthält eine Liste von leerzeichengetrennten 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, mit einem # vorangestellt, oder ein Farbname. Andere CSS <color> Werte werden nicht unterstützt. Verwenden Sie die background-color CSS-Eigenschaft stattdessen, da dieses Attribut veraltet ist.

char Veraltet

Tut nichts. Es war ursprünglich vorgesehen, die Ausrichtung des Inhalts auf ein Zeichen der Kopfzelle zu spezifizieren. Typische Werte hierfü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 vorgesehen, die Anzahl der Zeichen zu spezifizieren, um den Inhalt der Kopfzelle von dem im char-Attribut spezifizierten Ausrichtungszeichen zu versetzen.

height Veraltet

Definiert eine empfohlene Höhe der Kopfzelle. Verwenden Sie die height CSS-Eigenschaft stattdessen, 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 die vertical-align CSS-Eigenschaft stattdessen, da dieses Attribut veraltet ist.

width Veraltet

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

• Das <th> 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. Allerdings kann es sein, dass bestimmte unterstützende Technologien die Ableitung nicht korrekt durchführen, daher kann die Angabe des Kopfbereichs die Benutzererfahrung verbessern.

• Bei der Verwendung der Attribute colspan und rowspan, um Kopfzellen über mehrere Spalten und Zeilen hinweg zu spannen, werden Zellen ohne definierte Attribute (mit einem Standardwert von 1) automatisch in frei verfügbare Bereiche 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 komplettes Tabellenbeispiel, das allgemeine Standards und bewährte Praktiken einführt.

Dieses Beispiel verwendet <th>-Elemente zur Einführung von Spalten- und Zeilenköpfen in einer grundlegenden Tabellenstruktur.

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, wird das scope-Attribut auf col (Spalte) gesetzt.

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

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

HTML

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

Wie in den Anwendungshinweisen 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 einen "zwei Zeilen"-Kopf in der Tabellenstruktur zu erreichen, werden die ersten beiden Kopfzellen im ersten <tr>-Element über zwei Zeilen hinweg erstreckt. Die dritte Kopfzelle erstreckt sich über zwei Spalten (verbleibend in der ersten Zeile). Diese Anordnung lässt zwei verfügbare Bereiche in der dritten und vierten Spalte in der zweiten Zeile, in denen die beiden Köpfe innerhalb des zweiten <tr>-Elements automatisch platziert werden, wobei der Standardwert 1 für die Attribute colspan und rowspan gilt.

<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 für Sprachausgaben, nicht ausreichend sein.

HTML

Um die Zugänglichkeit des vorherigen Beispiels zu verbessern und z.B. Sprachausgaben die Möglichkeit zu geben, die den Kopfzellen zugeordneten Kopfzeilen auszusprechen, kann das headers-Attribut zusammen mit id-Attributen eingeführt werden. Aufgrund der Art und Weise, wie die "Aussprache"-Spalte in zwei Spalten aufgeteilt ist, wird in dem Beispiel ein "zwei Zeilen"-Kopf eingeführt. Unterstützende Technologien wie Sprachausgaben können möglicherweise nicht identifizieren, mit welchen zusätzlichen Kopfzellen (th Elemente) die "Aussprache" Kopfzelle und umgekehrt verknüpft sind. Daher wird das headers-Attribut auf den Kopfzellen "Aussprache", "IPA" und "Lautschrift" verwendet, um die zugehörigen Kopfzellen basierend auf den Werten der eindeutigen Bezeichner aus den hinzugefügten id-Attributen in Form einer leerzeichengetrennten 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 bleibt unverändert gegenüber dem vorherigen Beispiel.

• Lernen: Grundlagen der HTML-Tabellen
• <caption>, <col>, <colgroup>, <table>, <tbody>, <td>, <tfoot>, <thead>, <tr>: Weitere tabellenbezogene Elemente
• background-color: CSS-Eigenschaft, um die Hintergrundfarbe jeder Kopfzelle festzulegen
• border: CSS-Eigenschaft zur Steuerung der Ränder von Kopfzellen
• height: CSS-Eigenschaft zur Steuerung der empfohlenen Höhe der Kopfzelle
• 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 zur Steuerung der empfohlenen Breite der Kopfzelle
• :nth-of-type, :first-of-type, :last-of-type: CSS-Pseudoklassen, um die gewünschten Kopfzellen auszuwählen