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

abbr

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

colspan

Ein nicht-negativer Ganzzahlenwert, der angibt, wie viele Spalten die Kopfzelle überspannt oder erweitert. Der Standardwert ist 1. Werte größer als 1000 werden auf 1000 begrenzt.

headers

Eine Liste von durch Leerzeichen getrennten Zeichenfolgen, die den id-Attributen der <th>-Elemente entsprechen, die die Köpfe der Kopfzelle bereitstellen.

rowspan

Ein nicht-negativer Ganzzahlenwert, der angibt, wie viele Zeilen die Kopfzelle überspannt oder erweitert. Der Standardwert ist 1; wenn sein Wert auf 0 gesetzt ist, wird die Kopfzelle bis zum Ende des Tabellen-Gruppierungsabschnitts (<thead>, <tbody>, <tfoot>, auch wenn implizit definiert) erweitert, zu dem das <th> gehört. Werte größer als 65534 werden bei 65534 abgeschnitten.

scope

Definiert die Zellen, auf die sich das Kopf-Element (definiert in <th>) bezieht. Mögliche aufgezählte Werte sind:

• row: der Kopf bezieht sich auf alle Zellen der Reihe, zu der er gehört;
• col: der Kopf bezieht sich auf alle Zellen der Spalte, zu der er gehört;
• rowgroup: der Kopf gehört zu einer Zeilengruppe und bezieht sich auf alle deren Zellen;
• colgroup: der Kopf gehört zu einer Spaltengruppe und bezieht sich auf alle deren Zellen.

Wenn das scope-Attribut nicht angegeben ist oder wenn sein Wert nicht row, col, rowgroup oder colgroup ist, wählen Browser automatisch die Menge der 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 bestehenden Codes und aus historischem Interesse zu dienen.

align

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 auf dem durch das char-Attribut definierten Zeichen und dem durch das charoff-Attribut definierten Offset aus. Verwenden Sie stattdessen die CSS-Eigenschaft text-align, da dieses Attribut veraltet ist.

axis

Enthält eine Liste mit durch Leerzeichen getrennten Zeichenfolgen, die jeweils einem 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-stelliger Hexadezimal-RGB-Code, mit einem # vorangestellt, oder ein Farbname. Andere CSS-<color>-Werte werden nicht unterstützt. Verwenden Sie stattdessen die CSS-Eigenschaft background-color, da dieses Attribut veraltet ist.

char

Führt keine Funktion aus. Ursprünglich war es vorgesehen, die Ausrichtung des Inhalts auf ein Zeichen der Kopfzelle zu spezifizieren. Typische Werte hierfür sind ein Punkt (.), wenn versucht wird, Zahlen oder Geldbeträge auszurichten. Wenn align nicht auf char gesetzt ist, wird dieses Attribut ignoriert.

charoff

Führt keine Funktion aus. Ursprünglich war es vorgesehen, die Anzahl der Zeichen anzugeben, um welche der Kopfzellen-Inhalt von dem durch das char-Attribut angegebenen Ausrichtungszeichen versetzt werden soll.

height

Definiert eine empfohlene Kopfzellenhöhe. Verwenden Sie stattdessen die CSS-Eigenschaft height, da dieses Attribut veraltet ist.

valign

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

width

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

Verwendungshinweise

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

• In einfachen Kontexten ist die Verwendung des Attributs scope in Kopfzellen (<th>-Elemente) überflüssig, da scope abgeleitet wird. Jedoch können bestimmte unterstützende Technologien möglicherweise nicht korrekt ableiten, sodass das Angeben des Headers-Bereichs die Benutzererfahrung verbessern kann.

• Wenn die Attribute colspan und rowspan verwendet werden, um Kopfzellen über mehrere Spalten und Zeilen zu erstrecken, passen Zellen ohne diese definierten Attribute (mit einem Standardwert von 1) automatisch in freie verfügbare Räume in der Tabellenstruktur, die 1x1-Zellen überspannen, wie im folgenden Bild dargestellt:

  

  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 Praktiken einführt.

Grundlegende Spalten- und Zeilenköpfe

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 darauf hinzuweisen, dass sich jeder Spaltenkopf auf alle Zellen der entsprechenden Spalte bezieht, ist das Attribut scope auf col (Spalte) gesetzt.

Die restlichen Zeilen enthalten die Hauptdaten der Tabelle. Jede dieser Zeilen hat einen Zeilenkopf (<th>-Element), das als erste Zelle eingeführt wird. Dies erstellt eine Spalte mit Zeilenköpfen als erste Spalte der Tabelle. Ähnlich wie bei den Spaltenköpfen ist das Attribut scope auf row gesetzt, um anzugeben, auf welche Zellen sich jeder Zeilenkopf bezieht, die im folgenden Beispiel alle Datensätze (<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 einfache CSS-Stile werden verwendet, um die Tabelle und ihre Zellen zu stylen. Wir verwenden CSS-Attributselektoren, um die Kopfzellen basierend auf ihren scope-Attributwerten anzusprechen, die Spalten- und Zeilenköpfe (<th>-Elemente) hervorzuheben und sie voneinander und von den Datensätzen (<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überspannung

Dieses Beispiel erweitert und verbessert die grundlegende 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 unterteilt, eine für die IPA-Notation (International Phonetic Alphabet) und eine für die Neuschreibung (die ursprüngliche Aussprache-Spalte). Die entsprechenden Datensätze (<td>-Elemente) werden jeder nachfolgenden Zeile hinzugefügt.

Wie in den Verwendungshinweisen gezeigt, können die Attribute colspan und rowspan für die <th>-Elemente verwendet werden, um die Kopfzellen den richtigen Spalten und Zeilen zuzuordnen. Um eine "zwei-zeilige" Kopfzeile in der Tabellenstruktur zu erreichen, werden die ersten beiden Kopfzellen innerhalb des ersten <tr>-Elements über zwei Zeilen erstreckt. Die dritte Kopfzelle erstreckt sich über zwei Spalten (erstklassig in der ersten Zeile). Diese Anordnung lässt zwei verfügbare Bereiche in den dritten und vierten Spalten 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 ist 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: 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 reicht es möglicherweise nicht aus, th-Elemente allein mit dem Attribut scope für unterstützende Technologien, insbesondere Bildschirmleseprogramme, zu verwenden.

HTML

Um die Zugänglichkeit des vorherigen Beispiels zu verbessern und Bildschirmleseprogrammen zu ermöglichen, beispielsweise die mit jeder Kopfzelle verbundenen Köpfe zu sprechen, kann das Attribut headers zusammen mit id-Attributen eingeführt werden. Aufgrund der Art und Weise, wie in dem Beispiel die "Aussprache"-Spalte in zwei Spalten unterteilt wird, wobei eine "zwei-zeilige" Kopfzeile eingeführt wird, können unterstützende Technologien wie Bildschirmleseprogramme möglicherweise nicht erkennen, mit welchen zusätzlichen Kopfzellen (th-Elemente) die Kopfzelle "Aussprache" verbunden ist und umgekehrt. Daher wird das Attribut headers auf den Kopfzellen "Aussprache", "IPA" und "Neuschreibung" verwendet, um die zugehörigen Kopfzellen 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 im Vergleich zur vorherigen Beispieltabelle.

Technische Zusammenfassung

Spezifikationen

Browser-Kompatibilität

Siehe auch

• Lernen: HTML-Tabellen Grundlagen
• <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 von 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