<th>: Das Table Header Element

Dieses Element umfasst die globalen Attribute.

abbr

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

colspan

Ein nicht-negativer Ganzzahlwert, der angibt, wie viele Spalten die Überschriftzelle umfasst oder erweitert. Der Standardwert ist 1. Benutzeragenten verwerfen Werte, die höher als 1000 sind, als falsch und setzen solche Werte auf 1.

headers

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

rowspan

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

scope

Definiert die Zellen, auf die sich die Überschrift (im <th> definiert) bezieht. Mögliche augezählte Werte sind:

• row: Die Überschrift bezieht sich auf alle Zellen der Zeile, zu der sie gehört;
• col: Die Überschrift bezieht sich auf alle Zellen der Spalte, zu der sie gehört;
• rowgroup: Die Überschrift gehört zu einer Zeilengruppe und bezieht sich auf alle ihre Zellen;
• colgroup: Die Überschrift gehört zu einer Spaltengruppe und bezieht sich auf alle ihre Zellen.

Ist das scope Attribut nicht spezifiziert oder sein Wert nicht row, col, rowgroup oder colgroup, wählen Browser automatisch die Menge von Zellen aus, auf die sich die Überschriftzelle bezieht.

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

align Veraltet

Gibt die horizontale Ausrichtung der Überschriftzelle an. Die möglichen augezählten Werte sind left, center, right, justify und char. Wenn unterstützt, richtet der char Wert den Textinhalt am Zeichnen aus, das im char Attribut definiert ist und versetzt durch das charoff Attribut. 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 einem id Attribut einer Gruppe von Zellen entsprechen, auf die sich die Überschriftzelle bezieht. Verwenden Sie das scope Attribut stattdessen, da dieses Attribut veraltet ist.

bgcolor Veraltet

Definiert die Hintergrundfarbe der Überschriftzelle. Der Wert ist eine HTML-Farbe; entweder ein 6-stelliger hexadezimaler RGB Code, mit einem # versehen, oder ein Farbbegriff. 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 Wirkung. Es war ursprünglich dazu gedacht, die Ausrichtung des Inhalts an einem Zeichen der Überschriftzelle anzugeben. Typische Werte dafür sind ein Punkt (.) beim Versuch, Zahlen oder Geldwerte auszurichten. Wenn align nicht auf char gesetzt ist, wird dieses Attribut ignoriert.

charoff Veraltet

Hat keine Wirkung. Es war ursprünglich dazu gedacht, die Anzahl der Zeichen anzugeben, um den Inhalt der Überschriftzelle vom durch das char Attribut angegebenen Ausrichtungszeichen zu versetzen.

height Veraltet

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

valign Veraltet

Gibt die vertikale Ausrichtung der Überschriftzelle an. Die möglichen augezä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 Überschriftzelle. 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 für Überschriftzellen (<th> Elemente) redundant, weil scope abgeleitet wird. Bestimmte unterstützende Technologien könnten jedoch nicht korrekt ableiten, sodass das Angeben des Überschriftsbereichs die Benutzererfahrung verbessern kann.

• Bei der Verwendung der Attribute colspan und rowspan zur Erweiterung von Überschriftzellen über mehrere Spalten und Zeilen hinweg fügen sich Zellen ohne diese Attribute (mit dem Standardwert 1) automatisch in freie verfügbare Bereiche der Tabellenstruktur ein, die 1x1 Zellen umfassen, 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 Verfahren 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 Informationen in den Spalten zu erleichtern und die Daten zu identifizieren. Um anzugeben, 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 ist. Dies erstellt eine Kolumne mit Zeilenüberschriften als erste Kolumne der Tabelle. Ähnlich wie bei den Spaltenüberschriften wird das scope Attribut auf row gesetzt, um anzugeben, auf welche Zellen sich jede Zeilenüberschrift bezieht, in dem Beispiel unten sind dies alle Datenelemente (<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 wird verwendet, um die Tabelle und ihre Zellen zu gestalten. Wir verwenden CSS Attributselektoren, um Überschriftzellen basierend auf ihren scope Attributwerten zu zielen, 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;
}

Resultat

Dieses Beispiel erweitert und verbessert die grundlegende Tabelle aus dem vorangegangenen Beispiel durch 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> Elemente) 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 Aussprache (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 colspan und rowspan Attribute für die <th> Elemente verwendet werden, um die Überschriftzellen den richtigen Spalten und Zeilen zuzuordnen. Um eine "zweizeilige" Kopfzeile in der Tabellenstruktur zu schaffen, werden die ersten beiden Überschriftzellen innerhalb des ersten <tr> Elements über zwei Zeilen hinweg ausgedehnt. Die dritte Überschriftzelle wird über zwei Spalten (weiterhin in der ersten Zeile) ausgedehnt. Diese Anordnung lässt zwei verfügbare Flächen in den dritten und vierten Spalten in der zweiten Zeile frei, wo die beiden Überschriften innerhalb des zweiten <tr> Elements automatisch platziert werden, wobei der Standardwert 1 für die colspan und rowspan Attribute 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 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;
}

Resultat

Für komplexere Beziehungen zwischen Überschriftzellen reicht die Verwendung von th Elementen mit dem scope Attribut allein für unterstützende Technologien, insbesondere Bildschirmleser, möglicherweise nicht aus.

HTML

Um die Zugänglichkeit des vorherigen Beispiels zu verbessern und Bildschirmlesern beispielsweise zu erlauben, die mit jeder Überschriftzelle verbundenen Überschriften auszusprechen, kann das headers Attribut zusammen mit id Attributen eingeführt werden. Aufgrund der Art und Weise, wie die "Aussprache" Spalte in zwei Spalten im Beispiel aufgeteilt ist und eine "zweizeilige" Kopfzeile geschaffen wird, können unterstützende Technologien wie Bildschirmleser möglicherweise nicht erkennen, mit welchen zusätzlichen Überschriftzellen (th Elemente) die "Aussprache" Überschriftzelle verbunden ist und umgekehrt. Daher wird das headers Attribut auf den "Aussprache", "IPA" und "Aussprache" Überschriftzellen verwendet, um die verwandten Überschriftzellen basierend auf den Werten der einzigartigen Identifikatoren von den hinzugefügten id Attributen in der 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>

Resultat

Das visuelle Ergebnis bleibt unverändert gegenüber der vorherigen Beispieltabelle.

• 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 Überschriftzelle zu setzen
• border: CSS Eigenschaft zur Steuerung der Rahmen von Überschriftzellen
• height: CSS Eigenschaft zur Steuerung der empfohlenen Höhe der Überschriftzelle
• text-align: CSS Eigenschaft, um den Inhalt jeder Überschriftzelle horizontal auszurichten
• vertical-align: CSS Eigenschaft, um den Inhalt jeder Überschriftzelle vertikal auszurichten
• width: CSS Eigenschaft zur Steuerung der empfohlenen Breite der Überschriftzelle
• :nth-of-type, :first-of-type, :last-of-type: CSS Pseudoklassen, um die gewünschten Überschriftzellen auszuwählen