<th>: Das Tabellenkopfzellen-Element

Dieses Element enthält die globalen Attribute.

abbr

Eine kurze, abgekürzte Beschreibung des Inhalts der Kopfzelle, die als alternatives Label bereitgestellt wird, um die Kopfzelle in anderen Kontexten zu referenzieren. Einige Benutzeragenten, wie z. B. Bildschirmlesegeräte, können diese Beschreibung vor dem eigentlichen Inhalt präsentieren.

colspan

Ein nicht-negativer Ganzzahlwert, der angibt, wie viele Spalten die Kopfzelle überspannt oder erweitert. Der Standardwert ist 1. Benutzeragenten verwerfen Werte größer als 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 Kopfzeilen für diese Kopfzelle bereitstellen.

rowspan

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

scope

Definiert die Zellen, zu denen die im <th> definierte Kopfzelle gehört. Mögliche Aufzählungswerte sind:

• row: die Kopfzelle gehört zu allen Zellen der Zeile, zu der sie gehört;
• col: die Kopfzelle gehört zu allen Zellen der Spalte, zu der sie gehört;
• rowgroup: die Kopfzelle gehört zu einer Zeilengruppe und zu allen darin enthaltenen Zellen;
• colgroup: die Kopfzelle gehört zu einer Spaltengruppe und zu allen darin enthaltenen Zellen.

Wenn das scope-Attribut nicht angegeben ist oder sein Wert nicht row, col, rowgroup oder colgroup ist, wählen die 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 zur Referenz aufgeführt, wenn bestehender Code aktualisiert wird oder aus historischem Interesse.

align Veraltet

Gibt die horizontale Ausrichtung der Kopfzelle an. Die möglichen Aufzählungswerte 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 Versatz aus. Verwenden Sie die CSS-Eigenschaft text-align, da dieses Attribut veraltet ist.

axis Veraltet

Enthält eine Liste von durch Leerzeichen getrennten Werten, die jeweils dem id-Attribut einer Gruppe von Zellen entsprechen, auf die die Kopfzelle angewendet wird. Verwenden Sie das scope-Attribut stattdessen, da dieses Attribut veraltet ist.

bgcolor Veraltet

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

char Veraltet

Tut nichts. Ursprünglich war es vorgesehen, die Ausrichtung des Inhalts an einem Zeichen der Kopfzelle zu spezifizieren. Typische Werte hierfür sind ein Punkt (.), um zu versuchen, Zahlen oder Geldwerte auszurichten. Wenn align nicht auf char gesetzt ist, wird dieses Attribut ignoriert.

charoff Veraltet

Tut nichts. Ursprünglich war es vorgesehen, die Anzahl der Zeichen anzugeben, um den Inhalt der Kopfzelle vom durch das char-Attribut angegebenen Ausrichtungszeichen zu versetzen.

height Veraltet

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

valign Veraltet

Gibt die vertikale Ausrichtung der Kopfzelle an. Die möglichen Aufzählungswerte sind baseline, bottom, middle und top. Verwenden Sie die CSS-Eigenschaft vertical-align, da dieses Attribut veraltet ist.

width Veraltet

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

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

• In einfachen Kontexten ist die Verwendung des scope-Attributs bei Kopfzellen (<th>-Elementen) redundant, da scope abgeleitet wird. Jedoch können einige unterstützende Technologien das nicht richtig erkennen, daher kann die Angabe des Bereichs der Kopfzelle die Benutzererfahrung verbessern.

• Wenn die colspan- und rowspan-Attribute verwendet werden, um Kopfzellen über mehrere Spalten und Zeilen hinweg zu spannen, werden Zellen ohne diese definierten Attribute (mit einem Standardwert von 1) automatisch in freien verfügbaren Räumen der Tabellenstruktur, die 1x1-Zellen umfassen, eingepasst, wie in der folgenden Abbildung gezeigt:

  

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

Sehen Sie <table> für ein vollständiges Tabellenbeispiel, das gemeinsame Standards und bewährte Praktiken einführt.

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 verbleibenden 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, was im folgenden 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-Einstellungen werden verwendet, um die Tabelle und ihre Zellen zu gestalten. Wir verwenden CSS Attributselektoren, um Kopfzellen basierend auf ihren scope-Attributwerten anzusprechen, wobei Spalten- und Zeilenköpfe (<th>-Elemente) hervorgehoben und von den Datenzellen (<td>) unterschieden werden.

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: #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 Spaltenköpfe hinzugefügt wird.

HTML

Es wird eine zusätzliche Tabellenzeile (<tr>-Element) 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 umgeschriebene Aussprache (die ursprüngliche Aussprache-Spalte). Die entsprechenden Datenzellen (<td>-Elemente) werden zu jeder nachfolgenden Zeile hinzugefügt.

Wie in den Verwendungshinweisen gezeigt, können die colspan- und rowspan-Attribute bei den <th>-Elementen verwendet werden, um die Kopfzellen den richtigen Spalten und Zeilen zuzuordnen. Um eine "zwei Zeilen"-Kopfzeile in der Tabellenstruktur zu erreichen, werden die ersten beiden Kopfzellen innerhalb des ersten <tr>-Elements über zwei Zeilen hinweg überspannt. Die dritte Kopfzelle wird über zwei Spalten in der ersten Zeile überspannt. Diese Anordnung lässt in der zweiten Zeile zwei verfügbare Bereiche in der dritten und vierten Spalte, in die die beiden Kopfzeilen im zweiten <tr>-Element automatisch platziert werden, wobei der Standardwert für die colspan- und rowspan-Attribute 1 beträgt.

<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: #eee;
}

Ergebnis

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

HTML

Um die Barrierefreiheit des vorherigen Beispiels zu verbessern und Bildschirmlesegeräten beispielsweise zu ermöglichen, die mit jeder Kopfzelle verknüpften Überschriften vorzulesen, kann das headers-Attribut zusammen mit id-Attributen eingeführt werden. Aufgrund der Aufteilung der "Aussprache"-Spalte in zwei Spalten im Beispiel, die eine "zwei Zeilen"-Kopfzeile einführt, sind unterstützende Technologien wie Bildschirmlesegeräte möglicherweise nicht in der Lage zu erkennen, mit welchen zusätzlichen Kopfzellen (th-Elementen) die "Aussprache"-Kopfzeile verbunden ist und umgekehrt. Daher wird das headers-Attribut auf den Kopfzellen "Aussprache", "IPA" und "Umschrift" verwendet, um die entsprechenden Kopfzellen basierend auf den Werten der eindeutigen IDs 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 ist unverändert gegenüber der vorherigen Beispielstabelle.

• Lernen: Grundlagen der HTML-Tabelle
• <caption>, <col>, <colgroup>, <table>, <tbody>, <td>, <tfoot>, <thead>, <tr>: Weitere tabellenbezogene Elemente
• background-color: CSS-Eigenschaft zum Festlegen der Hintergrundfarbe jeder Kopfzelle
• border: CSS-Eigenschaft zur Steuerung der Ränder der 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 zur Auswahl der gewünschten Kopfzellen