<thead>: Das Table Head-Element

Dieses Element enthält die globalen Attribute.

Die folgenden Attribute sind veraltet und sollten nicht mehr verwendet werden. Sie sind hier nur aus Referenzzwecken dokumentiert, um bestehenden Code zu aktualisieren und aus historischem Interesse.

align Veraltet

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 am in dem 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, vorangestellt durch ein #, oder ein Farbkeyword. Andere CSS <color>-Werte werden nicht unterstützt. Verwenden Sie 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 bestimmen. 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 anzugeben, um die der Inhalt der Kopfzelle vom durch das char-Attribut angegebenen Ausrichtungszeichen versetzt sein soll.

valign Veraltet

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

• Das <thead> wird nach allen <caption>- und <colgroup>-Elementen platziert, aber vor allen <tbody>, <tfoot> und <tr>-Elementen.
• Zusammen mit seinen verwandten <tbody> und <tfoot>-Elementen, bietet das <thead>-Element nützliche semantische Informationen und kann beim Rendering für Bildschirm oder Druck verwendet werden. Die Spezifizierung solcher Inhaltsgruppen der Tabelle bietet auch wertvolle Kontextinformationen für unterstützende Technologien, einschließlich Bildschirmlesegeräten und Suchmaschinen.
• Beim Drucken eines Dokuments gibt der Tabellenkopf üblicherweise Informationen an, die auf jeder Seite gleich bleiben, falls es sich um eine mehrseitige Tabelle handelt.

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

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

HTML

Die <thead>- und <tbody>-Elemente werden verwendet, um die Tabellenzeilen in semantische Abschnitte zu gliedern. Das <thead>-Element stellt den Kopfbereich der Tabelle dar, der eine Zeile (<tr>) mit Spaltenüberschriften (<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-Styles 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 Tabellenkopfbereich mit zwei Zeilen.

HTML

Wir erweitern das Markup der Tabelle aus dem grundlegenden Beispiel in diesem Beispiel, indem wir zwei Tabellenzeilen (<tr>) innerhalb des <thead>-Elements einfügen und so einen Kopfbereich mit mehreren Zeilen erstellen. Wir haben eine zusätzliche Spalte eingefügt, um die Namen der Schüler in Vor- und Nachnamen zu unterteilen.

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

Zellspannweite

Um die Kopfzellen 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 gesetzten Werte geben an, wie viele Zellen jede Kopfzelle (<th>) überspannt. Aufgrund der Art und Weise, wie diese Attribute gesetzt sind, sind die beiden Kopfzellen der zweiten Zeile mit den Spalten, die sie anführen, ausgerichtet. Jede von ihnen überspannt eine Zeile und eine Spalte, da die Standardwerte für die Attribute colspan und rowspan beide 1 betragen.

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

CSS

Das CSS ist unverändert vom 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: 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 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