<thead> HTML-Tabellenkopf-Element

Probieren Sie es aus

<table>
  <caption>
    Council budget (in £) 2018
  </caption>
  <thead>
    <tr>
      <th scope="col">Items</th>
      <th scope="col">Expenditure</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Donuts</th>
      <td>3,000</td>
    </tr>
    <tr>
      <th scope="row">Stationery</th>
      <td>18,000</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th scope="row">Totals</th>
      <td>21,000</td>
    </tr>
  </tfoot>
</table>

thead,
tfoot {
  background-color: #2c5e77;
  color: white;
}

tbody {
  background-color: #e4f0f5;
}

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;
}

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

td {
  text-align: center;
}

Attribute

Dieses Element enthält die globalen Attribute.

Veraltete Attribute

Die folgenden Attribute sind veraltet und sollten nicht mehr verwendet werden. Sie sind hier zur Referenz für die Aktualisierung bestehender Codes und aus historischem Interesse dokumentiert.

align

Gibt die horizontale Ausrichtung jeder Kopfzelle an. Die möglichen aufgezählten Werte sind left, center, right, justify und char. Wenn unterstützt, richtet der Wert char den Textinhalt an dem im char-Attribut definierten Zeichen und dem im charoff-Attribut definierten Versatz aus. Verwenden Sie stattdessen die text-align CSS-Eigenschaft, da dieses Attribut veraltet ist.

bgcolor

Definiert die Hintergrundfarbe jeder Kopfzelle. Der Wert ist eine HTML-Farbe; entweder ein 6-stelliger hexadezimaler RGB-Code, den ein # vorangestellt ist, oder ein Farbenschlüsselwort. Andere CSS <color>-Werte werden nicht unterstützt. Verwenden Sie stattdessen die background-color CSS-Eigenschaft, da dieses Attribut veraltet ist.

char

Hat keine Funktion. Es war ursprünglich dazu gedacht, die Ausrichtung des Inhalts an einem Zeichen jeder Kopfzelle zu spezifizieren. Wenn align nicht auf char gesetzt ist, wird dieses Attribut ignoriert.

charoff

Hat keine Funktion. Es war ursprünglich dazu gedacht, die Anzahl der Zeichen anzugeben, um die der Inhalt der Kopfzelle von dem durch das char-Attribut angegebenen Ausrichtungszeichen versetzt sein soll.

valign

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

Anwendungshinweise

• Das <thead> wird nach allen <caption> und <colgroup> Elementen platziert, aber vor allen <tbody>, <tfoot> und <tr> Elementen.
• Zusammen mit den verwandten <tbody> und <tfoot> Elementen, liefert das <thead> Element nützliche semantische Informationen und kann beim Rendern sowohl für den Bildschirm als auch für den Druck verwendet werden. Die Angabe solcher Tabelleninhaltsgruppen liefert auch wertvolle kontextuelle Informationen für unterstützende Technologien, einschließlich Screenreadern und Suchmaschinen.
• Beim Drucken eines Dokuments gibt der Tabellenkopf in der Regel Informationen an, die auf jeder Seite einer mehrseitigen Tabelle gleich bleiben.

Beispiele

Siehe <table> für ein komplettes Tabellenbeispiel, das gängige Standards und Best Practices vorstellt.

Grundlegender Kopfaufbau

Dieses Beispiel zeigt eine Tabelle, die in einen Kopfbereich mit Spaltenüberschriften und einen Datenbereich unterteilt ist.

HTML

Die <thead> und <tbody> Elemente werden verwendet, um die Tabellenzeilen in semantische Abschnitte zu strukturieren. Das <thead>-Element repräsentiert den Kopfbereich der Tabelle, der eine Zeile (<tr>) mit Spaltenkopfzellen (<th>) enthält.

<table>
  <thead>
    <tr>
      <th>Student ID</th>
      <th>Name</th>
      <th>Major</th>
      <th>Credits</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>3741255</td>
      <td>Jones, Martha</td>
      <td>Computer Science</td>
      <td>240</td>
    </tr>
    <tr>
      <td>3971244</td>
      <td>Nim, Victor</td>
      <td>Russian Literature</td>
      <td>220</td>
    </tr>
    <tr>
      <td>4100332</td>
      <td>Petrov, Alexandra</td>
      <td>Astrophysics</td>
      <td>260</td>
    </tr>
  </tbody>
</table>

CSS

Ein paar einfache CSS-Richtlinien werden verwendet, um den Tabellenkopf so zu gestalten und hervorzuheben, dass die Überschriften der Spalten sich von den Daten im Tabellenkörper abheben.

thead {
  border-bottom: 2px solid rgb(160 160 160);
  text-align: center;
  background-color: #2c5e77;
  color: white;
}

tbody {
  background-color: #e4f0f5;
}

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;
}

tbody > tr > td:last-of-type {
  text-align: center;
}

Ergebnis

Mehrere Kopfzeilen

Dieses Beispiel zeigt einen Tabellenkopfbereich mit zwei Zeilen.

HTML

Wir erweitern den Markup der Tabelle aus dem grundlegenden Beispiel, indem wir innerhalb des <thead>-Elements zwei Zeilen (<tr>) einfügen, wodurch ein mehrreihiger Tabellenkopf entsteht. Wir haben eine zusätzliche Spalte eingefügt, die die Namen der Studenten in Vor- und Nachnamen unterteilt.

<table>
  <thead>
    <tr>
      <th rowspan="2">Student ID</th>
      <th colspan="2">Student</th>
      <th rowspan="2">Major</th>
      <th rowspan="2">Credits</th>
    </tr>
    <tr>
      <th>First name</th>
      <th>Last name</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>3741255</td>
      <td>Martha</td>
      <td>Jones</td>
      <td>Computer Science</td>
      <td>240</td>
    </tr>
    <tr>
      <td>3971244</td>
      <td>Victor</td>
      <td>Nim</td>
      <td>Russian Literature</td>
      <td>220</td>
    </tr>
    <tr>
      <td>4100332</td>
      <td>Alexandra</td>
      <td>Petrov</td>
      <td>Astrophysics</td>
      <td>260</td>
    </tr>
  </tbody>
</table>

Zellenspannung

Um die Kopfzellen korrekt mit den entsprechenden Spalten und Zeilen zu verknüpfen und auszurichten, werden die Attribute colspan und rowspan auf den <th>-Elementen verwendet. Die in diesen Attributen gesetzten Werte geben an, wie viele Zellen jede Kopfzelle (<th>) spannt. Aufgrund der Art und Weise, wie diese Attribute gesetzt sind, sind die beiden Kopfzellen der zweiten Zeile mit den Spalten ausgerichtet, die sie leiten. Diese erstrecken sich jeweils über eine Zeile und eine Spalte, da die Standardwerte für die Attribute colspan und rowspan beide 1 sind.

Die in diesem Beispiel demonstrierte Spalten- und Zeilenspannung wird in der folgenden Abbildung illustriert:

CSS

Das CSS bleibt unverändert gegenüber dem vorherigen Beispiel.

thead {
  border-bottom: 2px solid rgb(160 160 160);
  background-color: #2c5e77;
  color: white;
}

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

tbody {
  background-color: #e4f0f5;
}

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

tbody > tr > td:last-of-type {
  text-align: center;
}

Ergebnis

Technische Zusammenfassung

Spezifikationen

Browser-Kompatibilität

Siehe auch

• Lernen: HTML-Tabellen-Grundlagen
• <caption>, <col>, <colgroup>, <table>, <tbody>, <td>, <tfoot>, <th>, <tr>: Weitere tabellenbezogene Elemente
• background-color: CSS-Eigenschaft, um die Hintergrundfarbe jeder Kopfzelle festzulegen
• border: CSS-Eigenschaft zur Steuerung der Ränder von Kopfzellen
• text-align: CSS-Eigenschaft, um den Inhalt jeder Kopfzelle horizontal auszurichten
• vertical-align: CSS-Eigenschaft, um den Inhalt jeder Kopfzelle vertikal auszurichten