<th>: Das Tabellenelement für Überschriften

Probieren Sie es aus

<table>
  <caption>
    Alien football stars
  </caption>
  <thead>
    <tr>
      <th scope="col">Player</th>
      <th scope="col">Gloobles</th>
      <th scope="col">Za'taak</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">TR-7</th>
      <td>7</td>
      <td>4,569</td>
    </tr>
    <tr>
      <th scope="row">Khiresh Odo</th>
      <td>7</td>
      <td>7,223</td>
    </tr>
    <tr>
      <th scope="row">Mia Oolong</th>
      <td>9</td>
      <td>6,219</td>
    </tr>
  </tbody>
</table>

th,
td {
  border: 1px solid rgb(160 160 160);
  padding: 8px 10px;
}

th[scope="col"] {
  background-color: #505050;
  color: white;
}

th[scope="row"] {
  background-color: #d6ecd4;
}

td {
  text-align: center;
}

tr:nth-of-type(even) {
  background-color: #eeeeee;
}

table {
  border-collapse: collapse;
  border: 2px solid rgb(140 140 140);
  font-family: sans-serif;
  font-size: 0.8rem;
  letter-spacing: 1px;
}

caption {
  caption-side: bottom;
  padding: 10px;
}

Attribute

Dieses Element umfasst die globalen Attribute.

abbr

Eine kurze, abgekürzte Beschreibung des Inhalts der Überschriftzelle, die als alternatives Label verwendet wird, um die Zelle in anderen Kontexten zu referenzieren. Einige Benutzeragenten, wie Screenreader, können diese Beschreibung vor dem eigentlichen Inhalt darstellen.

colspan

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

headers

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

rowspan

Ein nicht-negativer ganzzahliger Wert, der angibt, wie viele Zeilen die Überschriftzelle überspannt oder erweitert. Der Standardwert ist 1; wenn der Wert auf 0 gesetzt wird, erstreckt sich die Überschriftzelle 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, auf die sich die Überschrift (im <th>-Element definiert) bezieht. Mögliche aufzählbare 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 deren Zellen;
• colgroup: Die Überschrift gehört zu einer Spaltengruppe und bezieht sich auf alle deren Zellen.

Wenn das scope-Attribut nicht spezifiziert ist oder sein Wert nicht row, col, rowgroup oder colgroup ist, wählen Browser automatisch die Gruppe der Zellen aus, auf die sich die Überschriftzelle bezieht.

Veraltete Attribute

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

align Veraltet

Bestimmt die horizontale Ausrichtung der Überschriftzelle. Die möglichen aufzählbaren Werte sind left, center, right, justify und char. Wenn unterstützt, richtet der char-Wert den textuellen Inhalt an dem im char-Attribut definierten Zeichen aus, sowie an dem durch das charoff-Attribut definierten Versatz. Verwenden Sie die text-align CSS-Eigenschaft statt 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 die Überschriftzelle zutrifft. Verwenden Sie das scope-Attribut statt dieses Attributs, da es veraltet ist.

bgcolor Veraltet

Definiert die Hintergrundfarbe der Überschriftzelle. Der Wert ist eine HTML-Farbe; entweder ein sechsstelliger hexadezimaler RGB-Code, vorangestellt mit einem #, oder ein Farb-Keyword. Andere CSS <color>-Werte werden nicht unterstützt. Verwenden Sie die background-color CSS-Eigenschaft statt dieses Attributs, da es veraltet ist.

char Veraltet

Tut nichts. Es war ursprünglich gedacht, um die Ausrichtung des Inhalts an einem Zeichen der Überschriftzelle zu spezifizieren. 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 gedacht, um die Anzahl der Zeichen anzugeben, mit denen der Inhalt der Überschriftzelle vom im char-Attribut spezifizierten Ausrichtungszeichen versetzt werden soll.

height Veraltet

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

valign Veraltet

Bestimmt die vertikale Ausrichtung der Überschriftzelle. Die möglichen aufzählbaren Werte sind baseline, bottom, middle und top. Verwenden Sie die vertical-align CSS-Eigenschaft statt dieses Attributs, da es veraltet ist.

width Veraltet

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

Nutzungshinweise

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

• In einfachen Kontexten ist die Verwendung des scope-Attributs in Überschriftzellen (<th>-Elemente) redundant, da scope abgeleitet wird. Bestimmte unterstützende Technologien können jedoch möglicherweise nicht korrekt ableiten, daher kann die Angabe des Bereichs der Überschrift die Benutzererfahrung verbessern.

• Beim Verwenden der Attribute colspan und rowspan, um Überschriftzellen über mehrere Spalten und Zeilen zu erstrecken, werden Zellen ohne definierte Attribute (mit einem Standardwert von 1) automatisch in freie verfügbare Räume der Tabellenstruktur integriert, die 1x1-Zellen umfassen, wie im folgenden Bild veranschaulicht:

  

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

Beispiele

Das <table> zeigt ein vollständiges Tabellenbeispiel, das gängige Standards und bewährte Praktiken einführt.

Grundlegende Spalten- und Zeilenüberschriften

In diesem Beispiel werden <th>-Elemente verwendet, 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 und die Identifikation der Daten zu erleichtern. Um anzuzeigen, 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. Dadurch entsteht eine Spalte mit Zeilenüberschriften als erste Spalte der Tabelle. Ähnlich wie bei den Spaltenüberschriften wird das scope-Attribut auf row gesetzt, um zu spezifizieren, auf welche Zellen sich jede Zeilenüberschrift bezieht, was im 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-Regeln werden verwendet, um die Tabelle und ihre Zellen zu gestalten. Wir verwenden CSS-Attributselektoren, um Überschriftzellen basierend auf ihren scope-Attributwerten auszuwählen und Spalten- und Zeilenüberschriften (<th>-Elemente) zu kennzeichnen, um 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: white;
}

th[scope="row"] {
  background-color: #d6ecd4;
}

tr:nth-of-type(odd) td {
  background-color: #eeeeee;
}

table {
  border-collapse: collapse;
  border: 2px solid rgb(140 140 140);
  font-family: sans-serif;
  font-size: 0.8rem;
  letter-spacing: 1px;
}

Ergebnis

Spalten- und Zeilenspannen

Dieses Beispiel erweitert und verbessert die Grundtabelle 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 Überschriftenzeile der Tabelle hinzugefügt, mit zwei zusätzlichen Spaltenüberschriften (<th>-Elemente). Auf diese Weise wird die "Aussprache"-Spalte in zwei Spalten aufgeteilt, eine für die IPA (Internationale Phonetische Alphabet)-Notation und eine für die erneute Buchstabierung (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 colspan und rowspan-Attribute für die <th>-Elemente verwendet werden, um die Überschriftzellen den richtigen Spalten und Zeilen zuzuordnen. Um eine "zweizeilige" Überschrift in der Tabellenstruktur zu erreichen, werden die ersten beiden Überschriftzellen innerhalb des ersten <tr>-Elements auf zwei Zeilen erstreckt. Die dritte Überschriftzelle erstreckt sich über zwei Spalten (bleibt in der ersten Zeile). Diese Einrichtung lässt zwei verfügbare Bereiche in der dritten und vierten Spalte in der zweiten Zeile frei, in denen die beiden Überschriften 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: white;
}

th[scope="row"] {
  background-color: #d6ecd4;
}

tr:nth-of-type(odd) td {
  background-color: #eeeeee;
}

Ergebnis

Verknüpfen von Überschriftzellen mit anderen Überschriftzellen

Für komplexere Beziehungen zwischen Überschriftzellen kann die alleinige Nutzung von th-Elementen mit dem scope-Attribut für unterstützende Technologien, insbesondere Screenreader, nicht ausreichen.

HTML

Um die Zugänglichkeit des vorherigen Beispiels zu verbessern und um beispielsweise Screenreadern das Vorlesen der mit jeder Überschriftzelle verbundenen Überschriften zu ermöglichen, kann das headers-Attribut zusammen mit id-Attributen eingeführt werden. Aufgrund der Art und Weise, wie die "Aussprache"-Spalte im Beispiel in zwei Spalten aufgeteilt wird, wobei eine "zweizeilige" Überschrift eingeführt wird, können unterstützende Technologien wie Screenreader möglicherweise nicht identifizieren, mit welchen zusätzlichen Überschriftzellen (th-Elemente) die "Aussprache"-Überschriftzelle in Beziehung steht und umgekehrt. Daher wird das headers-Attribut auf den "Aussprache"-, "IPA"- und "Respelling"-Überschriftzellen verwendet, um die entsprechenden Überschriftzellen basierend auf den Werten der einzigartigen 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 ist unverändert zum vorherigen Tabellenbeispiel.

Technische Zusammenfassung

Spezifikationen

Browser-Kompatibilität

Siehe auch

• Lernen: Grundlegende 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, um die Begrenzungen der Überschriftzellen zu steuern
• height: CSS-Eigenschaft, um die empfohlene Höhe der Überschriftzelle zu steuern
• 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, um die empfohlene Breite der Überschriftzelle zu steuern
• :nth-of-type, :first-of-type, :last-of-type: CSS-Pseudoklassen, um die gewünschten Überschriftzellen auszuwählen