<tbody>: Das Table Body-Element

Dieses Element enthält die globalen Attribute.

Die folgenden Attribute sind veraltet und sollten nicht verwendet werden. Sie sind unten zur Referenz dokumentiert, um vorhandenen Code zu aktualisieren und aus historischem Interesse.

align Veraltet

Bestimmt die horizontale Ausrichtung jeder Tabellenzelle. Die möglichen aufgezählten Werte sind left, center, right, justify und char. Wenn unterstützt, richtet der char-Wert den Textinhalt auf das im char-Attribut definierte Zeichen und den 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 Tabellenzelle. Der Wert ist eine HTML-Farbe; entweder ein 6-stelliger hexadezimaler RGB-Code, der mit einem # versehen 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

Gibt die Ausrichtung des Inhalts an einem Zeichen jeder Tabellenzelle an. Typische Werte sind ein Punkt (.), wenn versucht wird, Zahlen oder Währungswerte auszurichten. Wenn align nicht auf char gesetzt ist, wird dieses Attribut ignoriert.

charoff Veraltet

Gibt die Anzahl der Zeichen an, um die der Tabellenzelleninhalt vom Ausrichtungszeichen verschoben wird, das durch das char-Attribut angegeben wird.

valign Veraltet

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

• Das <tbody> wird nach allen <caption>, <colgroup> und <thead> Elementen platziert.
• Wenn <tr> Elemente als direkte Kinder des <table> spezifiziert werden (siehe „Tag-Auslassung“ im Technischen Überblick für eine Beschreibung, wann dies gültig ist), wird der von dem Browser generierte Markup ein <tbody>-Element enthalten, das sie umschließt. Dadurch werden solche Elemente nicht von CSS-Selektoren wie table > tr ausgewählt. Siehe auch das Beispiel Kein Body spezifiziert.
• Es ist erlaubt, mehr als ein <tbody> pro Tabelle zu verwenden, solange sie alle aufeinander folgen. 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 nicht als aufeinanderfolgende Elemente markiert, wird der Autorfehler vom Browser korrigiert, der sicherstellt, dass alle <thead> und <tfoot> Elemente als erstes bzw. letztes Element der Tabelle gerendert werden.
• Zusammen mit den zugehörigen <thead> und <tfoot> Elementen bietet das <tbody> Element nützliche semantische Informationen und kann verwendet werden, wenn der Inhalt entweder für Bildschirm oder Druck rendert. Die Spezifizierung solcher Tabelleninhaltsgruppen bietet außerdem wertvolle kontextuelle Informationen für unterstützende Technologien, einschließlich Screenreadern und Suchmaschinen.
• Beim Drucken eines Dokuments, im Fall einer mehrseitigen Tabelle, spezifizieren die <thead> und <tfoot> Elemente normalerweise Informationen, die auf jeder Seite gleichbleiben (oder mindestens sehr ähnlich sind), während die Inhalte des <tbody>-Elements normalerweise von Seite zu Seite unterschiedlich sein werden.
• Wenn eine Tabelle in einem Bildschirmkontext (wie ein Fenster) präsentiert wird, das nicht groß genug ist, um die gesamte Tabelle anzuzeigen, kann der Benutzeragent dem Benutzer erlauben, die Inhalte der <thead>, <tbody>, <tfoot>, und <caption> Blöcke separat voneinander für das gleiche Elternteil-<table> zu scrollen lassen.

Siehe <table> für ein vollständiges Beispiel einer Tabelle, das gängige Standards und bewährte Praktiken vorstellt.

Dieses Beispiel demonstriert, dass der Browser <tr> Elemente innerhalb eines <tbody>-Elements automatisch kapselt, wenn die Zeilen nicht innerhalb eines Tabellengruppenelements (<tbody>, <tfoot> oder <thead>) verschachtelt sind und, wie in diesem Beispiel, die direkten Kinder des <table> Elements sind.

HTML

Hier wird eine sehr einfache Tabelle mit einigen Tabellenspalten (<tr> Elemente) 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, wo eine background-color für das <tbody>-Element spezifiziert ist und tbody als Teil eines zusätzlichen CSS-Selektors verwendet wird. Alternativ können Entwicklertools des Browsers verwendet werden, um das Vorhandensein 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

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

HTML

Ein Tabellenkopf (<thead> Element) wird eingeführt und ein <tbody>-Element explizit verwendet, 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 Anzahl von Zeilen (<tr> Elemente) mit den Hauptdaten der Tabelle enthält, das sind die Daten jedes Studenten.

Die Verwendung solcher Tabelleninhaltsgruppen und semantische Markup ist nicht nur nützlich für visuelle Präsentation (durch CSS-Styling) und kontextuelle Informationen für unterstützende Technologien; darüber hinaus 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 fast unverändert vom vorherigen Beispiel, abgesehen von einigen grundlegenden Stiländerungen, um den Tabellenkopf hervorzuheben, sodass die Überschriften der Spalten sich vom Dateninhalt im Tabellenkörper abheben. Wie im Beispiel oben wird der tbody Typ-Selektor verwendet, um die Körperzellen zu stylen.

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

Dieses Beispiel erweitert und verbessert die Tabelle aus dem oben genannten Beispiel noch weiter durch die Einführung mehrerer Körperabschnitte.

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

HTML

Ausgehend von der Tabelle im vorherigen grundlegenden Beispiel, werden weitere Studenten hinzugefügt, und anstatt das Hauptfach jedes Studenten in jeder Zeile aufzulisten, werden die Studenten nach Hauptfach gruppiert. Beachten Sie, dass jedes Hauptfach in seinem eigenen <tbody>-Block eingeschlossen ist, wobei die erste Zeile (<tr> Element) als Kopf des Blocks dient und den Titel des Hauptfachs innerhalb eines <th> Elements anzeigt, das das colspan Attribut verwendet, um die Kopfzeile über alle drei Spalten der Tabelle zu erstrecken. Jede verbleibende Zeile innerhalb jedes Hauptfach-<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 wurde jedoch ein etwas subtilerer Stil für Kopfzeilen hinzugefügt, die direkt innerhalb eines <tbody> (im Gegensatz zu jenen, die sich im <thead> befinden) enthalten sind. Dies wird verwendet, um die Kopfzeilen anzuzeigen, die dem entsprechenden Hauptfach jeder Tabellensektion zugeordnet sind.

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

• Lernen: HTML Tabellen Grundlagen
• <caption>, <col>, <colgroup>, <table>, <td>, <tfoot>, <th>, <thead>, <tr>: Andere tabellenbezogene Elemente
• background-color: CSS-Eigenschaft, um die Hintergrundfarbe jeder Tabellenzelle zu setzen
• border: CSS-Eigenschaft zur Steuerung der Begrenzungen von Tabellenzellen
• text-align: CSS-Eigenschaft zur horizontalen Ausrichtung des Inhalts jeder Tabellenzelle
• vertical-align: CSS-Eigenschaft zur vertikalen Ausrichtung des Inhalts jeder Tabellenzelle