<thead>: Das Tabellenkopf-Element

Dieses Element enthält die globalen Attribute.

Die folgenden Attribute sind veraltet und sollten nicht mehr verwendet werden. Sie sind hier dokumentiert, um bei der Aktualisierung bestehenden Codes als Referenz zu dienen und aus historischen Gründen.

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 Wert char den Textinhalt an dem Zeichen aus, das im char Attribut definiert ist, sowie dem Versatz, der im 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, dem ein # vorangestellt ist, oder ein Farb-Schlüsselwort. 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 Wirkung. Es war ursprünglich vorgesehen, um die Ausrichtung des Inhalts an einem Zeichen jeder Kopfzelle zu spezifizieren. Wenn align nicht auf char gesetzt ist, wird dieses Attribut ignoriert.

charoff Veraltet

Hat keine Wirkung. Es war ursprünglich vorgesehen, um die Anzahl der Zeichen zu spezifizieren, die der Inhalt der Kopfzelle vom Ausrichtungszeichen, das durch das char Attribut spezifiziert ist, versetzt werden sollte.

valign Veraltet

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.

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

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

Dieses Beispiel zeigt eine Tabelle, die in einen Kopfbereich mit Spaltenüberschriften und einen Hauptdatenbereich 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-Eigenschaften 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: #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

Im Vergleich zum Grundbeispiel erweitern wir die Markup-Tabelle in diesem Beispiel, indem wir zwei Tabellenzeilen (<tr>) innerhalb des <thead> Elements einschließen und so einen mehrzeiligen Tabellenkopf erstellen. Wir haben eine zusätzliche Spalte hinzugefügt, die die Namen der Studenten in Vor- und Nachnamen unterteilt.

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

Zellenverbindung

Um die Kopfzellen mit den richtigen Spalten und Zeilen zu verbinden 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 Kopfzelle (<th>) überspannt. Aufgrund der Art und Weise, wie diese Attribute gesetzt sind, stimmen die beiden Kopfzellen der zweiten Zeile mit den Spalten überein, die sie übertreffen. Diese umfassen jeweils eine Zeile und eine Spalte als Standardwerte für die colspan und rowspan Attribute, die beide 1 sind.

Das durch dieses Beispiel demonstrierte Spalten- und Zeilenübergreifen wird im folgenden Diagramm illustriert:

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