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

Veraltete Attribute

Die folgenden Attribute sind veraltet und sollten nicht mehr verwendet werden. Sie sind unten zur Referenz aufgeführt, wenn bestehender Code aktualisiert wird und aus historischem Interesse.

align

Gibt die horizontale Ausrichtung jeder Kopfzelle an. Die möglichen enumerierten Werte sind left, center, right, justify und char. Wenn unterstützt, richtet der char-Wert den Textinhalt auf das durch das char-Attribut definierte Zeichen und den durch das 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, vorangestellt mit einem #, oder ein Farbkeyword. 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. Ursprünglich sollte es die Ausrichtung des Inhalts an einem Zeichen jeder Kopfzelle spezifizieren. Wenn align nicht auf char gesetzt ist, wird dieses Attribut ignoriert.

charoff

Hat keine Funktion. Ursprünglich sollte es die Anzahl der Zeichen angeben, um die der Kopfzeileninhalt von dem durch das char-Attribut angegebenen Ausrichtungszeichen versetzt werden soll.

valign

Gibt die vertikale Ausrichtung jeder 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.

Nutzungshinweise

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

Beispiele

Sehen Sie sich <table> für ein vollständiges Tabellenbeispiel an, das gemeinsame Standards und bewährte Praktiken einführt.

Grundstruktur des Kopfs

Dieses Beispiel zeigt eine Tabelle, die in einen Kopfbereich mit Spaltenüberschriften und einen Hauptdatenbereich 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>) von Spaltenüberschriftenzellen (<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 einfaches CSS wird verwendet, um den Tabellenkopf zu stylen und hervorzuheben, sodass die Überschriften der Spalten sich vom Datenbereich der Tabelle 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

Mehrfache Kopfzeilen

Dieses Beispiel zeigt einen Tabellenkopfbereich mit zwei Zeilen.

HTML

Wir erweitern das Markup des Tisches aus dem Grundbeispiel in diesem Beispiel, indem wir zwei Tabellenzeilen (<tr>) innerhalb des <thead>-Elements hinzufügen und so einen Tabellenkopf mit mehreren Zeilen erstellen. Wir haben eine zusätzliche Spalte eingefügt und die Studentennamen in Vor- und Nachnamen aufgeteilt.

<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 colspan und rowspan Attribute auf den <th>-Elementen verwendet. Die in diesen Attributen gesetzten Werte geben an, wie viele Zellen jede Kopfzelle (<th>) umspannt. Aufgrund der Art und Weise, wie diese Attribute gesetzt sind, sind die beiden Kopfzellen der zweiten Zeile mit den Spalten ausgerichtet, die sie anführen. Diese überspannen jeweils eine Zeile und eine Spalte, da die Standardwerte für die colspan und rowspan Attribute beide 1 sind.

Die Spalten- und Zeilenspannung, die durch dieses Beispiel dargestellt wird, werden in der folgenden Abbildung veranschaulicht:

CSS

Das CSS bleibt unverändert vom 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>: Andere tabellenbezogene Elemente
• background-color: CSS-Eigenschaft, um die Hintergrundfarbe jeder Kopfzelle einzustellen
• border: CSS-Eigenschaft zur Steuerung der Ränder von Kopfzellen
• text-align: CSS-Eigenschaft zur horizontalen Ausrichtung des Inhalts jeder Kopfzelle
• vertical-align: CSS-Eigenschaft zur vertikalen Ausrichtung des Inhalts jeder Kopfzelle