<thead>: Das Table Head 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 verwendet werden. Sie sind unten dokumentiert, um beim Aktualisieren vorhandener Codes und aus historischem Interesse als Referenz zu dienen.

align Veraltet

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 char Wert 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 Veraltet

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

char Veraltet

Tut nichts. Es war ursprünglich vorgesehen, die Ausrichtung des Inhalts an einem Zeichen jeder Kopfzelle zu spezifizieren. Wenn align nicht auf char gesetzt ist, wird dieses Attribut ignoriert.

charoff Veraltet

Tut nichts. Es war ursprünglich vorgesehen, die Anzahl der Zeichen anzugeben, die der Inhalt der Kopfzelle vom Ausrichtungszeichen abgezählt, das durch das char Attribut angegeben wird.

valign Veraltet

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.

Nutzungshinweise

• <thead> wird nach allen <caption> und <colgroup> Elementen, aber vor allen <tbody>, <tfoot> und <tr> Elementen platziert.
• Zusammen mit den verwandten <tbody> und <tfoot> Elementen bietet das <thead> Element nützliche semantische Informationen und kann beim Rendern für Bildschirm oder Druck verwendet werden. Die Spezifizierung solcher Tabellengruppen bietet auch wertvolle kontextuelle Informationen für unterstützende Technologien wie Bildschirmleser und Suchmaschinen.
• Beim Drucken eines Dokuments gibt der Tabellenkopf bei einer mehrseitigen Tabelle normalerweise Informationen an, die auf jeder Seite gleich bleiben.

Beispiele

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

Grundlegende Kopfstruktur

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

HTML

Die <thead> und <tbody> Elemente werden verwendet, um die Tabellenzeilen in semantische Abschnitte zu unterteilen. 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

Einige grundlegende CSS-Stile werden verwendet, um den Tabellenkopf zu gestalten und hervorzuheben, sodass sich die Überschriften der Spalten 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 die Markup-Tabelle aus dem Grundbeispiel in diesem Beispiel, indem wir zwei Tabellenzeilen (<tr>) innerhalb des <thead> Elements einfügen, wodurch ein mehrzeiliger Tabellenkopf entsteht. Wir haben eine zusätzliche Spalte hinzugefügt, die die Schülernamen in Vor- und Nachnamen aufteilt.

<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 Header-Zellen mit den richtigen Spalten und Zeilen zu verknüpfen und auszurichten, werden die Attribute colspan und rowspan auf den <th> Elementen verwendet. Die in diesen Attributen festgelegten Werte geben an, wie viele Zellen jede Header-Zelle (<th>) überspannt. Durch die Art und Weise, wie diese Attribute festgelegt sind, sind die beiden Kopfzellen der zweiten Zeile mit den Spalten ausgerichtet, die sie angeben. Diese umfassen jeweils eine Zeile und eine Spalte als Standardwerte für die colspan und rowspan Attribute, die beide 1 sind.

Die in diesem Beispiel demonstrierte Spalten- und Zeilenüberspannung ist in der folgenden Abbildung illustriert:

CSS

Das CSS ist 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: Grundlagen von HTML-Tabellen
• <caption>, <col>, <colgroup>, <table>, <tbody>, <td>, <tfoot>, <th>, <tr>: Andere tabellenbezogene Elemente
• background-color: CSS Eigenschaft um die Hintergrundfarbe jeder Kopfzelle zu setzen
• border: CSS Eigenschaft um die Ränder von Kopfzellen zu kontrollieren
• text-align: CSS Eigenschaft, um den Inhalt jeder Kopfzelle horizontal auszurichten
• vertical-align: CSS Eigenschaft, um den Inhalt jeder Kopfzelle vertikal auszurichten