<thead>: Das Tabellenkopfelement

Dieses Element enthält die globalen Attribute.

Die folgenden Attribute sind veraltet und sollten nicht verwendet werden. Sie sind hier dokumentiert für Referenzzwecke bei der Aktualisierung bestehender Codebasis und aus historischem Interesse.

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 Wert char den Textinhalt an dem Zeichen aus, das im char Attribut definiert ist, sowie am Versatz, der durch das charoff Attribut definiert ist. 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 # vorangestellt ist, oder ein Farbname. Andere CSS <color> Werte werden nicht unterstützt. Verwenden Sie stattdessen die background-color CSS-Eigenschaft, da dieses Attribut veraltet ist.

char Veraltet

Hat keine Funktion. Es war ursprünglich dafür gedacht, die Ausrichtung des Inhalts an einem Charakter für jede Kopfzelle zu spezifizieren. Wenn align nicht auf char gesetzt ist, wird dieses Attribut ignoriert.

charoff Veraltet

Hat keine Funktion. Es war ursprünglich dafür gedacht, die Anzahl der Zeichen anzugeben, um die der Kopfzelleninhalt von dem durch das char Attribut angegebenen Ausrichtungszeichen versetzt 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.

• Das <thead> wird nach allen <caption> und <colgroup> Elementen, aber vor allen <tbody>, <tfoot> und <tr> Elementen platziert.
• Zusammen mit den damit verbundenen <tbody> und <tfoot> Elementen bietet das <thead>-Element nützliche semantische Informationen und kann sowohl für die Bildschirm- als auch für die Druckwiedergabe verwendet werden. Die Angabe solcher Tischinhaltgruppen bietet auch wertvolle Kontextinformationen für Hilfstechnologien, einschließlich Screenreadern und Suchmaschinen.
• Beim Drucken eines Dokuments gibt der Tabellkopf in der Regel Informationen an, die bei einer mehrseitigen Tabelle auf jeder Seite gleich bleiben.

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

Dieses Beispiel zeigt eine Tabelle, die in einen Kopfbereich mit Spaltenüberschriften und einen Hauptteil mit den Hauptdaten der Tabelle 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

Einige grundlegende CSS-Stile werden verwendet, um den Tabellenkopf zu gestalten und hervorzuheben, sodass 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: #fff;
}

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

Dieses Beispiel zeigt einen Tabellenkopfabschnitt mit zwei Zeilen.

HTML

Wir erweitern das Markup der Tabelle aus dem Grundbeispiel in diesem Beispiel, indem wir zwei Tabellenzeilen (<tr>) innerhalb des <thead>-Elements einfügen und so einen mehrzeiligen Tabellenkopf erstellen. Wir haben eine zusätzliche Spalte eingefügt und die Namen der Studenten 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>

Zellüberspannung

Um die Überschriftenzellen korrekt mit den entsprechenden Spalten und Zeilen zuzuordnen 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 Überschriftenzelle (<th>) überspannt. Aufgrund der Art und Weise, wie diese Attribute gesetzt sind, sind die beiden Kopfzeilen der zweiten Zeile mit den Spalten, die sie anführen, ausgerichtet. 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 Zeilenüberspannung wird in der folgenden Abbildung veranschaulicht:

CSS

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

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

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

• Learn: HTML table basics
• <caption>, <col>, <colgroup>, <table>, <tbody>, <td>, <tfoot>, <th>, <tr>: Andere tabellenbezogene Elemente
• background-color: CSS-Eigenschaft, um die Hintergrundfarbe jeder Kopfzelle festzulegen
• border: CSS-Eigenschaft, um die Ränder der Kopfzellen zu steuern
• text-align: CSS-Eigenschaft, um den Inhalt jeder Kopfzelle horizontal auszurichten
• vertical-align: CSS-Eigenschaft, um den Inhalt jeder Kopfzelle vertikal auszurichten