<tbody>: Das Tabellenkörper-Element

Probieren Sie es aus

<table>
  <caption>
    Council budget (in £) 2018
  </caption>
  <thead>
    <tr>
      <th scope="col">Items</th>
      <th scope="col">Expenditure</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Donuts</th>
      <td>3,000</td>
    </tr>
    <tr>
      <th scope="row">Stationery</th>
      <td>18,000</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th scope="row">Totals</th>
      <td>21,000</td>
    </tr>
  </tfoot>
</table>

thead,
tfoot {
  background-color: #2c5e77;
  color: white;
}

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

caption {
  caption-side: bottom;
  padding: 10px;
}

th,
td {
  border: 1px solid rgb(160 160 160);
  padding: 8px 10px;
}

td {
  text-align: center;
}

Attribute

Dieses Element enthält die globalen Attribute.

Veraltete Attribute

Die folgenden Attribute sind veraltet und sollten nicht verwendet werden. Sie werden hier nur zur Referenz bei der Aktualisierung vorhandenen Codes und aus historischem Interesse dokumentiert.

align Veraltet

Gibt die horizontale Ausrichtung jeder Körperzelle an. Die möglichen enumerierten Werte sind left, center, right, justify und char. Wenn unterstützt, richtet der char-Wert den Textinhalt an dem im char-Attribut definierten Zeichen aus und versetzt ihn um den im charoff-Attribut definierten Offset. Verwenden Sie stattdessen die text-align CSS-Eigenschaft, da dieses Attribut veraltet ist.

bgcolor Veraltet

Definiert die Hintergrundfarbe jeder Körperzelle. Der Wert ist eine HTML-Farbe; entweder ein 6-stelliger hexadezimaler RGB-Code, mit einem # vorangestellt, oder ein Farbbegriff. Andere CSS <color>-Werte werden nicht unterstützt. Verwenden Sie stattdessen die background-color CSS-Eigenschaft, da dieses Attribut veraltet ist.

char Veraltet

Gibt die Ausrichtung des Inhalts an einem Zeichen jeder Körperzelle an. Typische Werte hierfür sind ein Punkt (.), wenn versucht wird, Zahlen oder Geldwerte auszurichten. Wenn align nicht auf char gesetzt ist, wird dieses Attribut ignoriert.

charoff Veraltet

Gibt die Anzahl der Zeichen an, um die der Inhalt der Körperzelle vom im char-Attribut spezifizierten Ausrichtungszeichen versetzt wird.

valign Veraltet

Gibt die vertikale Ausrichtung jeder Körperzelle 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.

Verwendungshinweise

• Das <tbody> wird nach allen <caption>, <colgroup> und <thead>-Elementen platziert.
• Wenn <tr>-Elemente als direkte Kinder des <table>-Elements angegeben werden (siehe "Tag-Omission" im technischen Überblick für eine Beschreibung, wann dies gültig ist), dann wird das vom Browser generierte Markup ein <tbody>-Element enthalten, das sie umschließt. Infolgedessen wählen CSS-Selektoren wie table > tr diese Elemente nicht aus. Siehe auch das Beispiel Nicht Spezifizieren eines Körpers.
• Es ist gestattet, mehr als ein <tbody> pro Tabelle zu verwenden, solange sie alle aufeinanderfolgend sind. Dies ermöglicht es, die Zeilen (<tr>-Elemente) in großen Tabellen in Abschnitte zu unterteilen, von denen jeder separat formatiert werden kann, wenn gewünscht. Wenn sie nicht als aufeinanderfolgende Elemente ausgezeichnet sind, korrigieren Browser diesen Autorfehler, indem sie sicherstellen, dass alle <thead>- und <tfoot>-Elemente als erste bzw. letzte Elemente der Tabelle gerendert werden.
• Zusammen mit seinen verwandten <thead>- und <tfoot>-Elementen liefert das <tbody>-Element nützliche semantische Informationen und kann beim Rendern sowohl für Bildschirm- als auch für Druckansichten verwendet werden. Die Angabe solcher Tabelleninhaltsgruppen bietet auch wertvolle kontextuelle Informationen für unterstützende Technologien, einschließlich Bildschirmlesegeräte und Suchmaschinen.
• Beim Drucken eines Dokuments, fall es sich um eine mehrseitige Tabelle handelt, geben die <thead>- und <tfoot>-Elemente in der Regel Informationen an, die auf jeder Seite gleich bleiben — oder zumindest sehr ähnlich sind —, während der Inhalt des <tbody>-Elements normalerweise von Seite zu Seite unterschiedlich ist.
• Wenn eine Tabelle in einem Bildschirmkontext (wie einem Fenster) angezeigt wird, der nicht groß genug ist, um die gesamte Tabelle darzustellen, kann der Benutzeragent es dem Benutzer ermöglichen, die Inhalte der <thead>, <tbody>, <tfoot> und <caption>-Blocke separat voneinander für das gleiche übergeordnete <table>-Element zu scrollen.

Beispiele

Siehe <table> für ein vollständiges Tabellenbeispiel, das die üblichen Standards und Best Practices einführt.

Nicht Spezifizieren eines Körpers

Dieses Beispiel zeigt, dass der Browser <tr>-Elemente automatisch in ein <tbody>-Element kapselt, wenn die Zeilen nicht in einem Tabellengruppierungselement (<tbody>, <tfoot> oder <thead>) verschachtelt sind und, wie in diesem Beispiel, direkte Kinder des <table>-Elements sind.

HTML

Hier wird eine sehr einfache Tabelle mit einigen Tabellenzeilen (<tr>-Elementen) erstellt, die Daten (<td>-Elemente) über Studenten enthalten.

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

CSS

Beachten Sie das CSS im Beispiel, in dem eine background-color für das <tbody>-Element angegeben wird und das tbody als Teil eines zusätzlichen CSS-Selektors verwendet wird. Alternativ können Entwicklertools des Browsers verwendet werden, um die Anwesenheit des <tbody>-Elements im DOM zu überprüfen.

tbody {
  background-color: #e4f0f5;
}

tbody > tr > td:last-of-type {
  width: 60px;
  text-align: center;
}

table {
  border-collapse: collapse;
  border: 2px solid rgb(140 140 140);
  font-family: sans-serif;
  font-size: 0.8rem;
  letter-spacing: 1px;
}

td {
  border: 1px solid rgb(160 160 160);
  padding: 8px 10px;
}

Ergebnis

Grundlegende Körperstruktur

Dieses Beispiel erweitert und verbessert die einfache Tabelle aus dem vorherigen Beispiel.

HTML

Wir führen einen Tabellenkopf (<thead>-Element) ein und verwenden explizit ein <tbody>-Element, um die Tabelle in semantische Abschnitte zu strukturieren. Der Tabellenkopf enthält die Spaltenüberschriften (<th>-Elemente). Das <tbody>-Element repräsentiert den Körperabschnitt der Tabelle, der eine Reihe von Zeilen (<tr>-Elemente) mit den Hauptdaten der Tabelle, den Daten jedes Schülers, enthält.

Die Verwendung solcher Tabellengruppen und semantischer Markup ist nicht nur nützlich für die visuelle Präsentation (über CSS-Styling) und kontextuelle Informationen für unterstützende Technologien; zudem hilft die explizite Verwendung des <tbody>-Elements dem Browser, die beabsichtigte Tabellenstruktur zu erstellen und unerwünschte Ergebnisse zu vermeiden.

<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

Das CSS ist nahezu unverändert gegenüber dem vorherigen Beispiel, außer für einige grundlegende Stile, um den Tabellenkopf hervorzuheben, sodass die Überschriften der Spalten sich von den Daten im Tabellenkörper abheben. Wie im obigen Beispiel wird der tbody Typselektor verwendet, um die Körperzellen zu gestalten.

tbody {
  background-color: #e4f0f5;
}

tbody > tr > td:last-of-type {
  text-align: center;
}

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

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

Ergebnis

Mehrfache Körper

Dieses Beispiel erweitert und verbessert die Tabelle aus dem obigen Beispiel noch weiter, indem es mehrere Körperabschnitte einführt.

Die Verwendung mehrerer <tbody>-Elemente ermöglicht die Erstellung von Zeilengruppierungen innerhalb einer Tabelle. Jeder Tabellenkörper kann potenziell seine eigene Kopfzeile oder -zeilen haben; es darf jedoch nur ein <thead>-Element pro Tabelle geben! Aus diesem Grund können <tr> mit <th>-Elementen verwendet werden, um Kopfzeilen innerhalb jedes <tbody> zu erstellen.

HTML

Ausgehend von der Tabelle im vorherigen einfachen Beispiel werden weitere Studenten hinzugefügt und anstatt jedes Fach eines jeden Schülers in jeder Zeile aufzulisten, werden die Studenten nach ihrem Fach gruppiert. Beachten Sie, dass jedes Fach in seinem eigenen <tbody>-Block eingefasst ist, wobei die erste Zeile (<tr>-Element) als Kopf des Blocks dient und den Fach-Titel in einem <th>-Element anzeigt, das das colspan-Attribut verwendet, um die Kopfzeile über alle drei Spalten der Tabelle zu erstrecken. Jede verbleibende Zeile innerhalb jedes Fach-<tbody> repräsentiert einen Studenten.

<table>
  <thead>
    <tr>
      <th>Student ID</th>
      <th>Name</th>
      <th>Credits</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th colspan="3">Computer Science</th>
    </tr>
    <tr>
      <td>3741255</td>
      <td>Jones, Martha</td>
      <td>240</td>
    </tr>
    <tr>
      <td>4077830</td>
      <td>Pierce, Benjamin</td>
      <td>200</td>
    </tr>
    <tr>
      <td>5151701</td>
      <td>Kirk, James</td>
      <td>230</td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <th colspan="3">Russian Literature</th>
    </tr>
    <tr>
      <td>3971244</td>
      <td>Nim, Victor</td>
      <td>220</td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <th colspan="3">Astrophysics</th>
    </tr>
    <tr>
      <td>4100332</td>
      <td>Petrov, Alexandra</td>
      <td>260</td>
    </tr>
    <tr>
      <td>8892377</td>
      <td>Toyota, Hiroko</td>
      <td>240</td>
    </tr>
  </tbody>
</table>

CSS

Der Großteil des CSS bleibt unverändert. Es wird jedoch ein etwas subtilerer Stil für Kopfzellen hinzugefügt, die direkt in einem <tbody> enthalten sind (im Gegensatz zu denen, die sich im <thead> befinden). Dies wird für die Kopfzeilen verwendet, die das entsprechende Fach jedes Tabellenabschnitts kennzeichnen.

tbody > tr > th {
  border-top: 2px solid rgb(160 160 160);
  border-bottom: 1px solid rgb(140 140 140);
  background-color: #e4f0f5;
  font-weight: normal;
}

tbody {
  background-color: whitesmoke;
}

thead {
  background-color: #2c5e77;
  color: white;
}

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: 6px 8px;
  text-align: left;
}

tbody > tr > td:last-of-type {
  text-align: center;
}

Ergebnis

Technischer Überblick

Spezifikationen

Browser-Kompatibilität

Siehe auch

• Lernen: HTML-Tabellen-Grundlagen
• <caption>, <col>, <colgroup>, <table>, <td>, <tfoot>, <th>, <thead>, <tr>: Andere tabellenbezogene Elemente
• background-color: CSS-Eigenschaft, um die Hintergrundfarbe jeder Körperzelle festzulegen
• border: CSS-Eigenschaft, um die Ränder von Körperzellen zu kontrollieren
• text-align: CSS-Eigenschaft, um den Inhalt jeder Körperzelle horizontal auszurichten
• vertical-align: CSS-Eigenschaft, um den Inhalt jeder Körperzelle vertikal auszurichten