<th>: Das Tabellenkopfelement

Dieses Element enthält die globalen Attribute.

abbr

Eine kurze, abgekürzte Beschreibung des Inhalts der Kopfzelle, bereitgestellt als alternatives Label, das bei Bezugnahme auf die Kopfzelle in anderen Kontexten verwendet wird. Einige Benutzeragenten, wie Sprachleseer, können diese Beschreibung vor dem eigentlichen Inhalt präsentieren.

colspan

Ein nicht-negativer Ganzzahlwert, der angibt, über wie viele Spalten die Kopfzelle sich erstreckt. Der Standardwert ist 1. Benutzeragenten verwerfen Werte über 1000 als fehlerhaft 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 Kopfzelle bereitstellen.

rowspan

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

scope

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

Ist das scope-Attribut nicht angegeben oder sein Wert weder row, col, rowgroup noch colgroup, wählen Browser automatisch die Menge der Zellen, auf die die Kopfzelle angewendet wird.

Die folgenden Attribute sind veraltet und sollten nicht verwendet werden. Sie werden zu Referenzzwecken dokumentiert, wenn vorhandener Code aktualisiert wird, und nur aus historischem Interesse.

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 am im char-Attribut definierten Zeichen und dem im charoff-Attribut definierten Offset aus. 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 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, eingeleitet durch ein #, oder ein Farbkeyword. 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 vorgesehen, den Inhalt an einem Zeichen der Kopfzelle auszurichten. Typische Werte hierfür beinhalten einen 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 anzugeben, um den Inhalt der Kopfzelle vom im char-Attribut angegebenen Ausrichtungszeichen zu versetzen.

height Veraltet

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

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

• In einfachen Kontexten ist die Verwendung des scope-Attributes für Kopfzellen (<th>-Elemente) überflüssig, da scope erschlossen wird. Bestimmte Hilfstechnologien können jedoch die richtige Erschließung nicht durchführen, daher kann die Angabe des Kopfumfangs die Benutzererfahrung verbessern.

• Beim Verwenden der Attribute colspan und rowspan, um Kopfzellen über mehrere Spalten und Zeilen zu erstrecken, werden Zellen ohne diese Attribute (mit einem Standardwert von 1) automatisch in den freien verfügbaren Bereichen in der Tabellenstruktur platziert, die 1x1-Zellen umfassen, wie in der folgenden Darstellung 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 Zeilenköpfe in einer einfachen Tabellenstruktur einzuführen.

HTML

Die erste Zeile (<tr>-Element) enthält die Spaltenköpfe (<th>-Elemente), die als "Titel" für die Spalten dienen, um die Informationen in den Spalten leichter verständlich zu machen und die Daten zu identifizieren. Um anzugeben, 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 erstellt 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. In dem Beispiel unten sind dies alle Datenzellen (<td>-Elemente) in jeder row.

<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-Stile werden verwendet, um die Tabelle und ihre Zellen zu gestalten. Wir verwenden CSS Attributselektoren, um Kopfzellen basierend auf ihren scope-Attributwerten zu gestalten und Spalten- und Zeilenköpfe (<th>-Elemente) hervorzuheben, um sie sowohl voneinander als auch 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 einfache Tabelle aus dem vorherigen 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 mit zwei zusätzlichen Spaltenköpfen (<th>-Elemente) hinzugefügt. Auf diese Weise wird die "Aussprache"-Spalte in zwei Spalten aufgeteilt, eine für die IPA-Notation (Internationales Phonetisches Alphabet) und eine für die Re-Spellings (die ursprüngliche Aussprache-Spalte). Die entsprechenden Datenzellen (<td>-Elemente) werden jeder folgenden 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 "zweizeilige" Kopfzeile in der Tabellenstruktur zu erzielen, werden die ersten beiden Kopfzellen innerhalb des ersten <tr>-Elements über zwei Zeilen erstreckt. Die dritte Kopfzelle erstreckt sich zwei Spalten weit (bleibt in der ersten Zeile). Dieses Setup 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, mit dem Standardwert 1 für die Attribute colspan und rowspan.

<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 vom vorherigen Beispiel unverändert.

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 Bildschirmleser, möglicherweise nicht ausreichend sein.

HTML

Um die Zugänglichkeit des vorherigen Beispiels zu verbessern und beispielsweise Bildschirmlesern zu ermöglichen, die mit jeder Kopfzelle verknüpften Kopfzeilen zu lesen, kann das headers-Attribut zusammen mit id-Attributen eingeführt werden. Aufgrund der Art und Weise, wie die "Aussprache"-Spalte in zwei Spalten unterteilt wird, wird im Beispiel eine "zweizeilige" Kopfzeile eingeführt, wobei unterstützende Technologien wie Bildschirmleser möglicherweise nicht in der Lage sind zu ermitteln, auf welche zusätzlichen Kopfzellen (th-Elemente) sich die Kopfzelle "Aussprache" bezieht und umgekehrt. Daher wird das headers-Attribut auf den "Aussprache", "IPA" und "Umschrift"-Kopfzellen verwendet, um die verknüpften Kopfzellen anhand der Werte der eindeutigen Kennungen der hinzugefügten id-Attribute 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 zum vorherigen Beispiel der Tabelle.

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