<thead>: Das Table Head Element

Dieses Element umfasst die globalen Attribute.

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

align Veraltet

Gibt die horizontale Ausrichtung jeder Kopfzelle an. Die möglichen aufzählbaren Werte sind left, center, right, justify, und char. Wenn unterstützt, richtet der char Wert den Textinhalt auf dem durch das Attribut char definierten Zeichen und dem durch das Attribut charoff definierten Offset 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 Hexadezimal-RGB-Code, mit einem #-Präfix, 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 Funktion. Es war ursprünglich vorgesehen, die Ausrichtung des Inhalts auf ein Zeichen jeder Kopfzelle anzugeben. Wenn align nicht auf char gesetzt ist, wird dieses Attribut ignoriert.

charoff Veraltet

Hat keine Funktion. Es war ursprünglich vorgesehen, die Anzahl der Zeichen anzugeben, um die der Kopfzellinhalt von dem durch das Attribut char festgelegten Ausrichtungssymbol versetzt wird.

valign Veraltet

Gibt die vertikale Ausrichtung jeder Kopfzelle an. 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> 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 sowohl für die Bildschirm- als auch für die Druckwiedergabe verwendet werden. Die Spezifizierung solcher Tabelleninhaltsgruppen liefert auch wertvolle kontextuelle Informationen für unterstützende Technologien, einschließlich Screenreader und Suchmaschinen.
• Beim Drucken eines Dokuments gibt der Tabellenkopf normalerweise Informationen an, die auf jeder Seite gleich bleiben, im Falle einer mehrseitigen Tabelle.

Sehen Sie <table> für ein vollständiges Tabellbeispiel, 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 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 wird verwendet, um den Tabellenkopf zu gestalten und hervorzuheben, damit 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 Kopfbereich der Tabelle mit zwei Zeilen.

HTML

In diesem Beispiel erweitern wir das Markup der Tabelle aus dem Grundbeispiel durch das Einfügen von zwei Tabellenzeilen (<tr>) innerhalb des <thead>-Elements, wodurch ein mehrzeiliger Tabellenkopf entsteht. Wir haben eine zusätzliche Spalte hinzugefügt, die die Vornamen und Nachnamen der Studierenden 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>

Zellenüberspannung

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 festgelegten Werte spezifizieren, wie viele Zellen jede Kopfzelle (<th>) überspannt. Aufgrund der Art und Weise, wie diese Attribute gesetzt sind, sind die beiden zweiten Zeilenüberschriftenzellen mit den Spalten, die sie leiten, ausgerichtet. Diese überspannen jeweils eine Zeile und eine Spalte, da die Standardwerte für die Attribute colspan und rowspan beide 1 sind.

Das Spalten- und Zeilenüberspannen, das durch dieses Beispiel demonstriert wird, wird in der folgenden Abbildung veranschaulicht:

CSS

Das CSS bleibt 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: HTML-Tables
• <caption>, <col>, <colgroup>, <table>, <tbody>, <td>, <tfoot>, <th>, <tr>: Andere tabellenbezogene Elemente
• background-color: CSS-Eigenschaft zum Setzen der Hintergrundfarbe für jede 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