<th> HTML-Tabellenkopfelement - HTML | MDN

Seitenleiste umschalten

Farbschema

Systemeinstellung
Hell
Dunkel

Deutsch

Sprache merken Mehr erfahren

<th> HTML-Tabellenkopfelement

Baseline Weitgehend verfügbar *

Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Juli 2015 browserübergreifend verfügbar.

* Einige Teile dieser Funktion werden möglicherweise unterschiedlich gut unterstützt.

Das <th> HTML Element definiert eine Zelle als Kopf einer Gruppe von Tabellenzellen und kann als Kind-Element des <tr> Elements verwendet werden. Die genaue Natur dieser Gruppe wird durch die Attribute scope und headers definiert.

In diesem Artikel

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.

Hinweis: Normalerweise werden die Gruppierungselemente <thead> und <tbody> verwendet, um Zeilen mit Kopfzellen in die jeweiligen Tabellenkopf- und Körperabschnitte zu gruppieren. Diese Elemente wurden in diesem Beispiel weggelassen, um die Komplexität zu reduzieren und den Fokus auf die Verwendung von Kopfzellen zu legen.

html
<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.

css
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.

Hinweis: Normalerweise werden <thead> und <tbody> Elemente verwendet, um Zeilen mit Kopfzeilen in die jeweiligen Tabellenkopf- und Körperabschnitte zu gruppieren. Dies ist in diesem Beispiel nicht implementiert, um sich auf die Kopfzeilen und Spannungen zu konzentrieren und die Komplexität des Beispiels zu reduzieren.

html
<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.

Hinweis: Es wird empfohlen, aussagekräftigere und nützlichere Werte für das id Attribut zu verwenden. Jede id in einem Dokument muss für dieses Dokument eindeutig sein. In diesem Beispiel sind die id Werte Einzelzeichen, um die Konzentration auf das Konzept des headers Attributs zu beibehalten.

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

Inhaltskategorien Zulässiger Inhalt Tag-Auslassung Erlaubte Eltern Implizite ARIA-Rolle Erlaubte ARIA-Rollen DOM-Schnittstelle

Keine.

Fließender Inhalt, aber ohne Kopf-, Fuß-, Strukturierungsinhalt oder Überschrift-Nachkommen.

Das Starttag ist obligatorisch.
Das Endtag kann weggelassen werden, wenn es direkt von einem <th> oder <td> Element gefolgt wird oder wenn es keine weiteren Daten in seinem Elternelement gibt.

Ein <tr> Element.

columnheader oder rowheader

Beliebige

[`HTMLTableCellElement`](/de/docs/Web/API/HTMLTableCellElement)

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

Help improve MDN

War diese Übersetzung hilfreich?

Ja Nein

Erfahren Sie, wie Sie beitragen können Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden

<th> HTML-Tabellenkopfelement

In diesem Artikel

Probieren Sie es aus

Attribute

Veraltete Attribute

Hinweise zur Verwendung

Beispiele

Einfache Spalten- und Zeilenkopfzellen

HTML

CSS

Ergebnis

Spalten- und Zeilen-Spannung

HTML

CSS

Ergebnis

Kopfzellen mit anderen Kopfzellen verknüpfen

HTML

Ergebnis

Technische Zusammenfassung

Spezifikationen

Browser-Kompatibilität

Siehe auch

Help improve MDN