<th>: Das Tabellenkopfzeilenelement

Dieses Element enthält die globalen Attribute.

abbr

Eine kurze, abgekürzte Beschreibung des Inhalts der Kopfzeile, die als alternatives Label für die Kopfzeile verwendet wird, wenn auf die Zelle in anderen Kontexten Bezug genommen wird. Einige Benutzeragenten, wie z. B. Screenreader, können diese Beschreibung vor dem eigentlichen Inhalt präsentieren.

colspan

Ein nicht-negativer ganzzahliger Wert, der angibt, wie viele Spalten die Kopfzeile umfasst oder erweitert. Der Standardwert ist 1. Benutzeragenten lehnen Werte über 1000 als falsch ab und setzen solche Werte standardmäßig auf 1.

headers

Eine Liste von durch Leerzeichen getrennten Zeichenfolgen, die den id-Attributen der <th>-Elemente entsprechen, die die Kopfzeilen für diese Kopfzeile bereitstellen.

rowspan

Ein nicht-negativer ganzzahliger Wert, der angibt, wie viele Zeilen die Kopfzeile umfasst oder erweitert. Der Standardwert ist 1; wenn der Wert auf 0 gesetzt wird, erstreckt sich die Kopfzeile bis zum Ende des Tabellengruppenabschnitts (<thead>, <tbody>, <tfoot>, auch wenn implizit definiert), zu dem das <th> gehört. Werte größer als 65534 werden auf 65534 begrenzt.

scope

Definiert die Zellen, auf die sich die Kopfzeile (im <th> definiert) 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 die Gruppe von Zellen aus, auf die sich die Kopfzeile bezieht.

Die folgenden Attribute sind veraltet und sollten nicht mehr verwendet werden. Sie werden hier aus Dokumentationsgründen beim Aktualisieren bestehenden Codes und aus historischem Interesse aufgeführt.

align Veraltet

Gibt die horizontale Ausrichtung der Kopfzeile an. Die möglichen enumerierten Werte sind left, center, right, justify und char. Wenn unterstützt, richtet der Wert char den Textinhalt an dem Zeichen aus, das im char-Attribut definiert ist, und an dem Versatz, der im charoff-Attribut definiert ist. Verwenden Sie die text-align-CSS-Eigenschaft anstelle dieses Attributs, da es 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 Kopfzeile bezieht. Verwenden Sie das scope-Attribut statt dessen, da dieses Attribut veraltet ist.

bgcolor Veraltet

Definiert die Hintergrundfarbe der Kopfzeile. Der Wert ist eine HTML-Farbe; entweder ein 6-stelliger hexadezimaler RGB-Code, mit einem # präfixiert, oder ein Farbbezeichner. Andere CSS-<color>-Werte werden nicht unterstützt. Verwenden Sie die background-color-CSS-Eigenschaft anstelle dieses Attributs, da es veraltet ist.

char Veraltet

Hat keine Funktion. Es war ursprünglich vorgesehen, um die Ausrichtung des Inhalts an einem Zeichen der Kopfzeile festzulegen. 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

Hat keine Funktion. Es war ursprünglich vorgesehen, um die Anzahl der Zeichen anzugeben, um die der Inhalt der Kopfzeile von dem im char-Attribut spezifizierten Ausrichtungszeichen versetzt wird.

height Veraltet

Definiert eine empfohlene Höhe der Kopfzeile. Verwenden Sie die height-CSS-Eigenschaft anstelle dieses Attributs, da es veraltet ist.

valign Veraltet

Gibt die vertikale Ausrichtung der Kopfzeile an. Die möglichen enumerierten Werte sind baseline, bottom, middle und top. Verwenden Sie die vertical-align-CSS-Eigenschaft anstelle dieses Attributs, da es veraltet ist.

width Veraltet

Definiert eine empfohlene Breite der Kopfzeile. Verwenden Sie die width-CSS-Eigenschaft anstelle dieses Attributs, da es veraltet ist.

• Die <th>-Elemente dürfen nur innerhalb eines <tr>-Elements verwendet werden.

• In einfachen Kontexten ist die Verwendung des scope-Attributs auf Kopfzeilen (<th>-Elemente) überflüssig, da scope impliziert wird. Allerdings können bestimmte Hilfstechnologien die richtige Ableitung nicht vollziehen, daher kann das Spezifizieren des Kopfzeilenbereichs die Benutzererfahrung verbessern.

• Bei der Verwendung der colspan- und rowspan-Attribute, um Kopfzeilen über mehrere Spalten und Zeilen zu verteilen, werden Zellen ohne diese definierten Attribute (mit dem Standardwert 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 mit allgemeinen Standards und bewährten 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 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), die als erste Zelle eingeführt wird. Dadurch entsteht eine Spalte mit Zeilenüberschriften als erste Spalte der Tabelle. Ähnlich den Spaltenüberschriften wird das scope-Attribut auf row gesetzt, um anzugeben, auf welche Zellen sich jede Zeilenüberschrift bezieht, im untenstehenden Beispiel sind dies alle Datenzellen (<td>-Elemente) in jeder Zeile.

<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 werden verwendet, um die Tabelle und ihre Zellen zu gestalten. Wir verwenden CSS-Attributselektoren, um Kopfzeilen basierend auf ihren scope-Attributwerten zu formatieren, indem Spalten- und Zeilenüberschriften (<th>-Elemente) hervorgehoben und voneinander sowie 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: #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, 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 hinzugefügt, die zwei zusätzliche Spaltenüberschriften (<th>-Elemente) enthält. So wird die "Aussprache"-Spalte in zwei Spalten unterteilt, eine für die IPA (Internationales Phonetisches Alphabet)-Notation und eine für die Umschrift (die ursprüngliche Aussprache-Spalte). Die entsprechenden Datenzellen (<td>-Elemente) werden jeder folgenden Zeile hinzugefügt.

Wie in den Verwendungshinweisen gezeigt, können die colspan- und rowspan-Attribute für die <th>-Elemente verwendet werden, um die Kopfzeilen den richtigen Spalten und Zeilen zuzuordnen. Um eine "zweizeilige" Kopfzeile in der Tabellenstruktur zu erreichen, werden die ersten beiden Kopfzeilenzellen innerhalb des ersten <tr>-Elements über zwei Zeilen verteilt. Die dritte Kopfzeilenzelle wird über zwei Spalten (verbleibend in der ersten Zeile) verteilt. Dieses Setup lässt zwei verfügbare Bereiche in der dritten und vierten Spalte in der zweiten Zeile, in denen die zwei Kopfzeilen innerhalb des zweiten <tr>-Elements automatisch platziert werden, wobei der Standardwert für die colspan- und rowspan-Attribute 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 ist unverändert zum 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 Kopfzeilenzellen reicht die Verwendung von th-Elementen mit dem scope-Attribut allein möglicherweise nicht für Hilfstechnologien aus, insbesondere Screenreader.

HTML

Um die Zugänglichkeit des vorherigen Beispiels zu verbessern und um Screenreadern beispielsweise zu ermöglichen, die mit jeder Kopfzeilenzelle verbundenen Überschriften auszusprechen, kann das headers-Attribut zusammen mit den id-Attributen eingeführt werden. Aufgrund der Art und Weise, wie die "Aussprache"-Spalte in zwei Spalten im Beispiel unterteilt ist und eine "zweizeilige" Kopfzeile einführt, sind Hilfstechnologien wie Screenreader möglicherweise nicht in der Lage, zu identifizieren, mit welchen zusätzlichen Kopfzeilenzellen die "Aussprache"-Kopfzeilenzelle in Beziehung steht und umgekehrt. Daher wird das headers-Attribut auf den Kopfzeilenzellen "Aussprache", "IPA" und "Umschrift" verwendet, um die zugehörigen Kopfzeilenzellen basierend auf den Werten der hinzugefügten id-Attribute in der Form einer leerzeichengetrennten Liste zu assoziieren.

<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 zum vorherigen Tabellenbeispiel.

• Lernen: HTML-Tabellen-Grundlagen
• <caption>, <col>, <colgroup>, <table>, <tbody>, <td>, <tfoot>, <thead>, <tr>: Andere tabellenbezogene Elemente
• background-color: CSS-Eigenschaft, um die Hintergrundfarbe jeder Kopfzeile festzulegen
• border: CSS-Eigenschaft, um die Ränder von Kopfzeilen zu steuern
• height: CSS-Eigenschaft, um die empfohlene Höhe der Kopfzeile zu steuern
• text-align: CSS-Eigenschaft, um den Inhalt jeder Kopfzeile horizontal auszurichten
• vertical-align: CSS-Eigenschaft, um den Inhalt jeder Kopfzeile vertikal auszurichten
• width: CSS-Eigenschaft, um die empfohlene Breite der Kopfzeile zu steuern
• :nth-of-type, :first-of-type, :last-of-type: CSS-Pseudoklassen, um die gewünschten Kopfzeilen auszuwählen