<th> HTML-Tabellenkopfelement

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 beinhaltet die globalen Attribute.

abbr

Eine kurze, abgekürzte Beschreibung des Inhalts der Kopfzelle, die als alternatives Label zur Nutzung der Kopfzelle beim Referenzieren in anderen Kontexten bereitgestellt wird. Einige Benutzeragenten, wie Bildschirmauslesegeräte, können diese Beschreibung vor dem eigentlichen Inhalt präsentieren.

colspan

Ein nicht-negativer Ganzwert, der angibt, über wie viele Spalten die Kopfzelle sich erstreckt. Der Standardwert ist 1. Benutzeragenten verwerfen Werte höher als 1000 als falsch und setzen solche Werte auf 1.

headers

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

rowspan

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

scope

Definiert die Zellen, zu denen die Kopfzelle (im <th> definiert) gehört. Mögliche enumerierte Werte sind:

• row: die Kopfzeile bezieht sich auf alle Zellen der Reihe, 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 all ihre Zellen.

Wenn das scope Attribut nicht angegeben ist oder sein Wert nicht row, col, rowgroup oder colgroup ist, wählen Browser automatisch den Satz von Zellen aus, auf die sich die Kopfzelle bezieht.

Veraltete Attribute

Die folgenden Attribute sind veraltet und sollten nicht verwendet werden. Sie sind hier dokumentiert, um beim Aktualisieren vorhandenen Codes zu helfen und aus historischen Interesse.

align

Gibt die horizontale Ausrichtung der Kopfzelle an. Die möglichen enumerierten Werte sind left, center, right, justify und char. Wenn unterstützt, richtet der Wert char den Textinhalt auf das Zeichen aus, das im char Attribut definiert ist, sowie auf den Versatz, der durch das charoff Attribut definiert wird. Verwenden Sie stattdessen die text-align CSS-Eigenschaft, da dieses Attribut veraltet ist.

axis

Enthält eine Liste von Leerzeichen-getrennten Zeichenketten, 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

Definiert die Hintergrundfarbe der Kopfzelle. Der Wert ist eine HTML-Farbe; entweder ein 6-stelliges hexadezimales RGB-Kennzeichen, das mit einem # beginnt, 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

Hat keine Funktion. War ursprünglich dafür gedacht, die Ausrichtung des Inhalts auf ein Zeichen der Kopfzelle zu spezifizieren. Typische Werte hierfür beinhalten einen Punkt (.), wenn versucht wird, Zahlen oder Währungswerte auszurichten. Wenn align nicht auf char gesetzt ist, wird dieses Attribut ignoriert.

charoff

Hat keine Funktion. War ursprünglich dafür gedacht, die Anzahl der Zeichen zu spezifizieren, die den Inhalt der Kopfzelle vom Ausrichtungszeichen, das durch das char Attribut spezifiziert wird, verschieben.

height

Definiert eine empfohlene Höhe für die Kopfzelle. Verwenden Sie stattdessen die height CSS-Eigenschaft, da dieses Attribut veraltet ist.

valign

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

width

Definiert eine empfohlene Breite der Kopfzelle. Verwenden Sie stattdessen die width CSS-Eigenschaft, da dieses Attribut veraltet ist.

Hinweise zur Verwendung

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

• In einfachen Kontexten ist die Verwendung des scope Attributs auf Kopfzellen (<th> Elemente) redundant, weil das scope Attribut abgeleitet wird. In bestimmten unterstützenden Technologien kann es jedoch vorkommen, dass die Ableitung fehlschlägt, daher kann das Spezifizieren des Kopfbereichs das Benutzererlebnis verbessern.

• Bei der Verwendung der Attribute colspan und rowspan zum Spannen von Kopfzeilen über mehrere Spalten und Zeilen werden Zellen ohne definierte Attribute (mit einem Standardwert von 1) automatisch in freie verfügbare Räume in 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 überlappen.

Beispiele

Siehe <table> für ein vollständiges Tabellenbeispiel, das gängige Standards und bewährte Vorgehensweisen einführt.

Einfache Spalten- und Zeilenkopfzellen

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 fungieren, um das Verständnis der Informationen in den Spalten zu erleichtern und die Daten zu identifizieren. Um anzuzeigen, dass sich jeder Spaltenkopf auf alle Zellen in der entsprechenden Spalte bezieht, wird das scope Attribut auf col (Spalte) gesetzt.

Die übrigen 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 Spaltenköpfen wird das scope Attribut auf row gesetzt, um anzugeben, auf welche Zellen sich jede Zeilenüberschrift bezieht, die im folgenden Beispiel alle Datenzellen (<td> Elemente) in jeder Zeile 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 Kopfzellen basierend auf ihren scope Attributwerten anzusprechen, Spalten- und Zeilenköpfe (<th> Elemente) hervorzuheben und sie jeweils untereinander 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 Zeilen-Spannung

Dieses Beispiel erweitert und verbessert die einfache Tabelle aus dem vorherigen Beispiel durch Hinzufügen einer zweiten Zeile für zusätzliche Spaltenköpfe.

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 (Internationales Phonetisches Alphabet) Notation und eine für die Umschrift (die ursprüngliche Aussprache-Spalte). Die entsprechenden Datenzellen (<td> Elemente) werden zu jeder nachfolgenden Zeile hinzugefügt.

Wie in den Verwendungshinweisen gezeigt, können die colspan und rowspan Attribute für die <th> Element verwendet werden, um die Kopfzellen den richtigen Spalten und Zeilen zuzuweisen. Um eine "zwei-Zeilen"-Kopfzeile in der Tabellenstruktur zu erreichen, werden die ersten beiden Kopfzellen im ersten <tr> Element über zwei Zeilen gespannt. Die dritte Kopfzelle erstreckt sich über zwei Spalten (bleibt in der ersten Zeile). Dieses Setup lässt zwei verfügbare Bereiche in der dritten und vierten Spalte der zweiten Zeile, wo die beiden Kopfzeilen innerhalb des zweiten <tr> Elements automatisch platziert werden, mit dem Standardwert 1 für die colspan und rowspan Attribute.

<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 vom 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

Kopfzellen mit anderen Kopfzellen verknüpfen

Für komplexere Beziehungen zwischen Kopfzellen allein mit th Elementen und dem scope Attribut können Unterstützungstechnologien, insbesondere Bildschirmauslesegeräte, möglicherweise nicht ausreichen.

HTML

Um die Zugänglichkeit des vorherigen Beispiels zu verbessern und um Bildschirmauslesegeräten, zum Beispiel, das Vorlesen der mit jeder Kopfzelle verbundenen Kopfzellen zu ermöglichen, kann das headers Attribut zusammen mit id Attributen eingeführt werden. Aufgrund der Art, wie die "Aussprache"-Spalte im Beispiel in zwei Spalten aufgeteilt ist und eine "zwei-Zeilen"-Kopfzeile bildet, können unterstützende Technologien wie Bildschirmauslesegeräte möglicherweise nicht erkennen, mit welchen zusätzlichen Kopfzellen (th Elemente) die "Aussprache"-Kopfzelle verbunden ist und umgekehrt. Daher wird das headers Attribut auf den Kopfzellen "Aussprache", "IPA" und "Umschrift" verwendet, um die verbundenen Kopfzellen basierend auf den Werten der eindeutigen Identifikatoren der hinzugefügten id Attribute in Form einer 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 bleibt unverändert im Vergleich zur vorherigen Beispiel-Tabelle.

Technische Zusammenfassung

Spezifikationen

Browser-Kompatibilität

Siehe auch

• Lernen: Grundlegendes zu HTML-Tabellen
• <caption>, <col>, <colgroup>, <table>, <tbody>, <td>, <tfoot>, <thead>, <tr>: Andere tabellenbezogene Elemente
• background-color: CSS-Eigenschaft zum Setzen der Hintergrundfarbe jeder Kopfzelle
• border: CSS-Eigenschaft zur Steuerung der Ränder von Kopfzellen
• height: CSS-Eigenschaft, um die empfohlene Kopfzellenhöhe zu steuern
• text-align: CSS-Eigenschaft zur horizontalen Ausrichtung des Inhalts jeder Kopfzelle
• vertical-align: CSS-Eigenschaft zur vertikalen Ausrichtung des Inhalts jeder Kopfzelle
• width: CSS-Eigenschaft, um die empfohlene Breite der Kopfzelle zu steuern
• :nth-of-type, :first-of-type, :last-of-type: CSS-Pseudoklassen zur Auswahl der gewünschten Kopfzellen