<th>: Das Table Header-Element

Dieses Element umfasst die globalen Attribute.

abbr

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

colspan

Ein nicht-negativer Ganzzahlenwert, der angibt, wie viele Spalten die Kopfzelle überspannt oder erweitert. Der Standardwert ist 1. Benutzeragenten verwerfen Werte höher als 1000 als falsch und setzen solche 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 Ganzzahlenwert, der angibt, wie viele Zeilen die Kopfzelle überspannt oder erweitert. Der Standardwert ist 1; wenn der Wert auf 0 gesetzt wird, erstreckt sich die Kopfzelle bis zum Ende des Tabellengruppierungsabschnitts (<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, auf die sich die im <th> definierte Kopfzelle bezieht. Mögliche enumerierte Werte sind:

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

Die folgenden Attribute sind veraltet und sollten nicht verwendet werden. Sie sind unten dokumentiert, um bestehenden Code zu aktualisieren und aus historischem Interesse.

align Veraltet

Gibt die horizontale Ausrichtung der Kopfzelle an. Mögliche enumerierte Werte sind left, center, right, justify und char. Wenn unterstützt, richtet der char-Wert den textuellen Inhalt auf dem Zeichen aus, das im char-Attribut definiert ist, und dem Offset, das durch das charoff-Attribut definiert ist. Verwenden Sie 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 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-stelliger hexadezimale RGB-Code, mit einem #-Präfix, oder ein Farbname. Andere CSS-<color>-Werte werden nicht unterstützt. Verwenden Sie die background-color CSS-Eigenschaft, da dieses Attribut veraltet ist.

char Veraltet

Tut nichts. Es war ursprünglich gedacht, 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

Tut nichts. Es war ursprünglich gedacht, die Anzahl der Zeichen anzugeben, um den Inhalt der Kopfzelle ab dem Ausrichtungszeichen zu versetzen, das durch das char-Attribut angegeben ist.

height Veraltet

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

width Veraltet

Definiert eine empfohlene Breite der Kopfzelle. Verwenden Sie 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 auf Kopfzellen (<th>-Elemente) überflüssig, da scope impliziert wird. Einige unterstützende Technologien können jedoch möglicherweise keine korrekten Inferenz machen, daher kann die Angabe eines Kopfbereichs das Nutzungserlebnis verbessern.

• Beim Verwenden der Attribute colspan und rowspan, um Kopfzellen über mehrere Spalten und Zeilen zu spannen, werden Zellen ohne diese definierten Attribute (mit einem Standardwert von 1) automatisch in die freien verfügbaren Räume in der Tabellenstruktur eingefügt, die 1x1 Zellen überspannen, wie in der folgenden Abbildung veranschaulicht:

  

  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 bewährte Praktiken einführt.

Dieses Beispiel verwendet <th>-Elemente, um Spalten- und Zeilenüberschriften in einer einfachen 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 in den Spalten enthaltenen Informationen zu erleichtern und die Daten zu identifizieren. Um anzuzeigen, dass sich jede Spaltenüberschrift auf alle Zellen der entsprechenden Spalte bezieht, wird das Attribut scope auf col (Spalte) gesetzt.

Die restlichen 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 Attribut scope auf row gesetzt, um anzugeben, auf welche Zellen sich jede Zeilenüberschrift bezieht, die in dem unten stehenden 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 wird verwendet, um die Tabelle und ihre Zellen zu stylen. Wir verwenden CSS- Attributselektoren, um Kopfzellen basierend auf ihren scope-Attributwerten zu wählen, 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 Basis-Tabelle aus dem vorherigen Beispiel durch das 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>-Elementen) 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 Umschrift (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 richtigen Spalten und Zeilen zuzuweisen. Um eine "zwei Zeilen"-Kopfzeile in der Tabellenstruktur zu erreichen, werden die ersten beiden Kopfzellen innerhalb des ersten <tr>-Elements über zwei Zeilen gespannt. Die dritte Kopfzelle wird über zwei Spalten hinweg gespannt (bleibt in der ersten Zeile). Dieses Setup lässt zwei verfügbare Bereiche in der dritten und vierten Spalte in der zweiten Zeile, wo die beiden Kopfzellen 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 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 Kopfzellen kann die alleinige Verwendung von th-Elementen mit dem scope-Attribut für unterstützende Technologien, insbesondere Bildschirmleser, möglicherweise nicht ausreichend sein.

HTML

Um die Barrierefreiheit des vorherigen Beispiels zu verbessern und beispielsweise Bildschirmlesern zu ermöglichen, die mit jeder Kopfzelle assoziierten Überschriften anzuzeigen, kann das Attribut headers zusammen mit id-Attributen eingeführt werden. Aufgrund der Art und Weise, wie die "Aussprache"-Spalte in zwei Spalten in dem Beispiel aufgeteilt ist, wodurch eine "zwei-zeilige" Kopfzeile entsteht, können unterstützende Technologien wie Bildschirmleser möglicherweise nicht identifizieren, mit welchen zusätzlichen Kopfzellen (th-Elementen) die "Aussprache"-Kopfzelle in Beziehung steht und umgekehrt. Daher wird das Attribut headers auf der "Aussprache", "IPA" und "Respelling"-Kopfzelle verwendet, um die zugehörigen Kopfzellen basierend auf den Werten der eindeutigen Kennungen 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 von der vorherigen Tabellenausgabe.

• Lernen: 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 Steuerung der Ränder von Kopfzellen
• height: CSS-Eigenschaft zur Steuerung 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 Steuerung der empfohlenen Breite der Kopfzelle
• :nth-of-type, :first-of-type, :last-of-type: CSS-Pseudoklassen, um die gewünschten Kopfzellen auszuwählen