<thead>: Das Tabellenkopf-Element

Dieses Element umfasst die globalen Attribute.

Die folgenden Attribute sind veraltet und sollten nicht mehr verwendet werden. Sie sind hier dokumentiert, um eine Referenz beim Aktualisieren von bestehendem Code zu bieten und aus historischem Interesse.

align Veraltet

Bestimmt die horizontale Ausrichtung jeder Kopfzelle. Die möglichen aufzählbaren Werte sind left, center, right, justify und char. Wenn unterstützt, richtet der Wert char den Textinhalt am 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, mit einem # vorangestellt oder ein Farbbezeichner. 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 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 Veraltet

Tut nichts. Es war ursprünglich dazu gedacht, die Anzahl der Zeichen zu spezifizieren, um die der Inhalt der Kopfzelle vom im char-Attribut spezifizierten Ausrichtungszeichen verschoben werden soll.

valign Veraltet

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

• Das <thead>-Element wird nach jedem <caption>- und <colgroup>-Element platziert, jedoch vor jedem <tbody>, <tfoot> und <tr>-Element.
• Zusammen mit den verwandten <tbody>- und <tfoot>-Elementen bietet das <thead>-Element nützliche semantische Informationen und kann beim Rendering sowohl für den Bildschirm als auch beim Drucken verwendet werden. Die Spezifizierung solcher Tabellengruppen bietet auch wertvolle Kontextinformationen für unterstützende Technologien, einschließlich Bildschirmleser und Suchmaschinen.
• Beim Drucken eines Dokuments gibt in einem mehrseitigen Dokument der Tabellenkopf normalerweise Informationen an, die auf jeder Seite gleich bleiben.

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

Dieses Beispiel zeigt eine Tabelle, die in einen Kopfbereich mit Spaltenüberschriften und einen Körperbereich mit den Hauptdaten der Tabelle unterteilt ist.

HTML

Die <thead>- und <tbody>-Elemente werden verwendet, um die Tabellenzeilen in semantische Bereiche zu strukturieren. Das <thead>-Element stellt den Kopfbereich der Tabelle dar, 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 wird 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 Tabellenkopfbereich 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 hinzufügen, um einen mehrzeiligen Tabellenkopf zu erstellen. Wir haben eine zusätzliche Spalte hinzugefügt, die die Vornamen und Nachnamen der Studenten 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>

Cell-Spanning

Um die Überschriftenzellen korrekt mit den Spalten und Zeilen zu verknüpfen und auszurichten, werden die colspan- und rowspan-Attribute auf den <th>-Elementen verwendet. Die in diesen Attributen festgelegten Werte geben an, wie viele Zellen jede Überschriftenzelle (<th>) überspannt. Aufgrund der Art und Weise, wie diese Attribute gesetzt sind, sind die beiden Kopfzellen in der zweiten Reihe mit den Spalten ausgerichtet, die sie überschreiben. Sie überspannen jeweils eine Zeile und eine Spalte, da die Standardwerte für die colspan- und rowspan-Attribute beide 1 sind.

Das in diesem Beispiel demonstrierte Spalten- und Zeilen-Spanning 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

• Lernen: HTML-Tabellen-Grundlagen
• <caption>, <col>, <colgroup>, <table>, <tbody>, <td>, <tfoot>, <th>, <tr>: Andere tabellenbezogene Elemente
• background-color: CSS-Eigenschaft zum Festlegen der Hintergrundfarbe jeder Kopfzelle
• 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