<th>: Das Tabellenkopf-Element

Dieses Element beinhaltet 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 Bildschirmleser, können diese Beschreibung vor dem eigentlichen Inhalt darstellen.

colspan

Ein nicht-negativer ganzzahliger Wert, der angibt, über wie viele Spalten sich die Kopfzelle erstreckt. Der Standardwert ist 1. Benutzeragenten verwerfen Werte über 1000 als falsch und verwenden stattdessen 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 ganzzahliger Wert, der angibt, über wie viele Zeilen sich die Kopfzelle erstreckt. Der Standardwert ist 1; wenn der Wert auf 0 gesetzt wird, erstreckt sich die Kopfzelle bis zum Ende des Tabellenbereichs (<thead>, <tbody>, <tfoot>, auch wenn implizit definiert), zu dem das <th> gehört. Werte über 65534 werden bei 65534 abgeschnitten.

scope

Definiert die Zellen, zu denen die Kopfzeile (definiert im <th>) gehört. Mögliche aufgezählte 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 beträgt sein Wert nicht row, col, rowgroup oder colgroup, wählen Browser automatisch die Menge der Zellen aus, auf die sich die Kopfzelle bezieht.

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

align Veraltet

Gibt die horizontale Ausrichtung der Kopfzelle an. Die möglichen aufgezählten Werte 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 durch das charoff-Attribut definierten Abstand aus. Verwenden Sie die text-align CSS-Eigenschaft stattdessen, 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 hexadezimaler RGB-Code, eingeleitet von einem #, oder ein Farbenschlüsselwort. Andere CSS <color>-Werte werden nicht unterstützt. Verwenden Sie die background-color CSS-Eigenschaft stattdessen, da dieses Attribut veraltet ist.

char Veraltet

Hat keine Funktion. Es war ursprünglich dazu gedacht, die Ausrichtung des Inhalts an einem Zeichen in der Kopfzelle anzugeben. Typische Werte dafür umfassen einen Punkt (.), wenn versucht wird, Zahlen oder Geldbeträge auszurichten. Wenn align nicht auf char gesetzt ist, wird dieses Attribut ignoriert.

charoff Veraltet

Hat keine Funktion. Es war ursprünglich dazu gedacht, die Anzahl der Zeichen anzugeben, um die der Inhalt der Kopfzelle von dem durch das char-Attribut spezifizierten Ausrichtungszeichen verschoben werden soll.

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 aufgezählten 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 an Kopfzellen (<th>-Elemente) überflüssig, da scope inferiert wird. Allerdings können bestimmte Hilfstechnologien möglicherweise nicht korrekt ableiten, daher kann die Angabe des Kopfbereichs das Benutzererlebnis verbessern.

• Bei der Verwendung der Attribute colspan und rowspan, um Kopfzellen auf mehrere Spalten und Zeilen zu verteilen, werden Zellen ohne diese definierten Attribute (mit einem Standardwert von 1) automatisch in freie Markierungen der Tabellenstruktur eingefügt, die 1x1 Zellen umfassen, wie in der folgenden Abbildung gezeigt:

  

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

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

In diesem Beispiel werden <th>-Elemente verwendet, 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 Informationen in den Spalten zu erleichtern und die Daten zu identifizieren. Um zu zeigen, dass sich jede Spaltenüberschrift auf alle Zellen 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. Dies erstellt eine Spalte mit Zeilenüberschriften als erste Spalte der Tabelle. Ähnlich wie bei den Spaltenüberschriften wird das scope-Attribut auf row gesetzt, um anzugeben, zu welchen Zellen sich jede Zeilenüberschrift bezieht, was im unten stehenden Beispiel alle Datenelemente (<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

Ein bisschen CSS wird verwendet, um die Tabelle und ihre Zellen zu gestalten. Wir verwenden CSS-Attribut-Selektoren, um Kopfzellen basierend auf ihren scope-Attributwerten zu zielen, wobei Spalten- und Zeilenüberschriften (<th>-Elemente) hervorgehoben und voneinander 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: #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

In diesem Beispiel wird die grundlegende Tabelle aus dem vorherigen Beispiel durch Hinzufügen einer zweiten Zeile für zusätzliche Spaltenüberschriften erweitert und verbessert.

HTML

Eine zusätzliche Tabellenzeile (<tr>-Element) wird als zweite Kopfzeile der Tabelle mit zwei zusätzlichen Spaltenüberschriften (<th>-Elemente) hinzugefügt. So wird die Spalte "Aussprache" in zwei Spalten aufgeteilt, eine für die IPA (International Phonetic Alphabet)-Notierung und eine für die Neuschreibung (die ursprüngliche Aussprache-Spalte). Die entsprechenden Datenelemente (<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 Kopfzeilen den richtigen Spalten und Zeilen zuzuordnen. Um eine "zweizeilige" Kopfzeile im Tabellenlayout zu erreichen, werden die ersten beiden Kopfzellen innerhalb des ersten <tr>-Elements über zwei Zeilen gespannt. Die dritte Kopfzelle wird zwei Spalten breit gespannt (verbleibt in der ersten Zeile). Dieses Setup lässt zwei verfügbare Flächen in der dritten und vierten Spalte in der zweiten Zeile, in die die beiden Kopfzeilen innerhalb des zweiten <tr>-Elements automatisch eingefügt 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 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 möglicherweise nicht ausreichen, insbesondere für Hilfstechnologien wie Bildschirmleser.

HTML

Um die Zugänglichkeit des vorherigen Beispiels zu verbessern und um z.B. Bildschirmlesern zu ermöglichen, die mit jeder Kopfzeile verbundenen Überschriften vorzulesen, kann das headers-Attribut zusammen mit id-Attributen eingeführt werden. Aufgrund der Aufteilung der "Aussprache"-Spalte in zwei Spalten im Beispiel, wodurch eine "zweizeilige" Kopfzeile entsteht, können Hilfstechnologien wie Bildschirmleser möglicherweise nicht erkennen, mit welchen zusätzlichen Kopfzeilen (th-Elementen) die "Aussprache"-Kopfzeile verbunden ist und umgekehrt. Daher wird das headers-Attribut auf den Kopfzellen "Aussprache", "IPA" und "Neuschreibung" verwendet, um die zugehörigen Kopfzellen basierend auf den Werten der eindeutigen Kennungen der hinzugefügten id-Attribute in Form einer durch Leerzeichen getrennten 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 im Vergleich zur vorherigen Beispiel-Tabelle.

• Lernen: 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 festzulegen
• border: CSS-Eigenschaft, um die Ränder der Kopfzellen zu steuern
• height: CSS-Eigenschaft, um die empfohlene Kopfzellenhöhe 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 Kopfzellenbreite zu steuern
• :nth-of-type, :first-of-type, :last-of-type: CSS-Pseudoklassen, um die gewünschten Kopfzellen auszuwählen