<tbody>: Das Table Body-Element

Dieses Element beinhaltet die globalen Attribute.

Folgende Attribute sind veraltet und sollten nicht verwendet werden. Sie sind nachfolgend dokumentiert für Referenzzwecke beim Aktualisieren bestehender Codes und aus historischem Interesse.

align Veraltet

Spezifiziert die horizontale Ausrichtung jeder Tabellenzelle. Die möglichen aufzählbaren Werte sind left, center, right, justify und char. Wenn unterstützt, richtet der char-Wert den Textinhalt an dem Zeichen aus, das im char-Attribut definiert ist, und an der durch das charoff-Attribut bestimmten Versatzposition. Verwenden Sie die text-align CSS-Eigenschaft anstelle dieses Attributs, da es veraltet ist.

bgcolor Veraltet

Definiert die Hintergrundfarbe jeder Tabellenzelle. Der Wert ist eine HTML-Farbe; entweder ein 6-stelliger hexadezimaler RGB-Code, dem ein # vorangestellt ist, oder ein Farb-Keyword. Andere CSS-<color>-Werte werden nicht unterstützt. Verwenden Sie die background-color CSS-Eigenschaft anstelle dieses Attributs, da es veraltet ist.

char Veraltet

Bestimmt die Ausrichtung des Inhalts an einem Zeichen jeder Tabellenzelle. Typische Werte hierfür sind ein Punkt (.) beim Versuch, 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 Tabellenzellinhalt von dem durch das char-Attribut spezifizierten Ausrichtungszeichen versetzt werden soll.

valign Veraltet

Bestimmt die vertikale Ausrichtung jeder Tabellenzelle. Die möglichen aufzählbaren Werte sind baseline, bottom, middle und top. Verwenden Sie die vertical-align CSS-Eigenschaft anstelle dieses Attributs, da es veraltet ist.

• Das <tbody> wird nach allen <caption>, <colgroup> und <thead>-Elementen platziert.
• Wenn <tr>-Elemente als direkte Kinder des <table>-Elements spezifiziert sind (siehe "Tag-Auslassung" im technischen Überblick, für eine Beschreibung, wann dies erlaubt ist), dann erzeugt der Browser-Markup ein <tbody>-Element, das diese einschließt. Dadurch werden CSS-Selektoren wie table > tr diese Elemente nicht auswählen. Siehe auch das Beispiel Keine Angabe eines Körpers.
• Es ist erlaubt, 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, die jeweils separat formatiert werden können, sofern gewünscht. Wenn sie nicht als aufeinanderfolgende Elemente markiert sind, korrigieren Browser diesen Autorenfehler, indem sie sicherstellen, dass alle <thead>- und <tfoot>-Elemente als erstes bzw. letztes Element der Tabelle gerendert werden.
• Zusammen mit seinen verwandten <thead>- und <tfoot>-Elementen bietet das <tbody>-Element nützliche semantische Informationen und kann sowohl beim Rendern für Bildschirme als auch für den Druck verwendet werden. Die Angabe solcher Tabelleninhalt-Gruppen bietet auch wertvolle Kontextinformationen für unterstützende Technologien, einschließlich Screen Reader und Suchmaschinen.
• Beim Drucken eines Dokuments, im Fall einer mehrseitigen Tabelle, geben die <thead>- und <tfoot>-Elemente normalerweise Informationen an, die auf jeder Seite gleich bleiben - oder zumindest sehr ähnlich sind -, während der Inhalt des <tbody>-Elements von Seite zu Seite in der Regel unterschiedlich ist.
• Wenn eine Tabelle in einem Bildschirmkontext (wie einem Fenster) angezeigt wird, das nicht groß genug ist, um die gesamte Tabelle anzuzeigen, kann der User-Agent dem Benutzer erlauben, die Inhalte der <thead>, <tbody>, <tfoot> und <caption>-Blöcke separat voneinander zu scrollen, für dasselbe übergeordnete <table>.

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

Dieses Beispiel zeigt, dass der Browser automatisch <tr>-Elemente in einem <tbody>-Element einkapselt, wenn die Zeilen nicht innerhalb eines Tabellen-Gruppierungselements (<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 Tabellenzeilen (<tr>-Elementen) erstellt, die Daten (<td>-Elemente) über Schüler 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 angegeben ist und tbody als Teil eines zusätzlichen CSS-Selectors verwendet wird. Alternativ können Entwicklertools im Browser 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

Dieses Beispiel erweitert und verbessert die grundlegende 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 gliedern. Der Tabellenkopf enthält die Spaltenüberschriften (<th>-Elemente). Das <tbody>-Element stellt den Hauptteil der Tabelle dar, der eine Anzahl von Zeilen (<tr>-Elemente) mit den Hauptdaten der Tabelle enthält, also die Daten jedes Schülers.

Die Verwendung solcher Tabelleninhalts-Gruppen und semantischer Markups ist nicht nur nützlich für die visuelle Darstellung (via CSS-Styling) und kontextbezogene 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, mit Ausnahme einiger grundlegender Stiländerungen, um den Tabellenkopf hervorzuheben, sodass die Spaltenüberschriften sich von den Daten im Tabellenkörper abheben. Wie im obigen Beispiel wird der tbody-Typselektor verwendet, um die Tabellenzellen 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: #fff;
}

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 obigen Beispiel noch weiter durch die Einführung mehrerer Körperabschnitte.

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

HTML

Aufbauend auf der Tabelle im vorherigen grundlegenden Beispiel, werden mehr Schüler hinzugefügt und anstatt das Hauptfach jedes Schülers in jeder Zeile aufzuführen, werden die Schüler nach Hauptfach gruppiert. Bitte beachten Sie, dass jedes Hauptfach innerhalb seines eigenen <tbody>-Blocks eingeschlossen ist, wobei die erste Zeile (<tr>-Element) als Kopfzeile des Blocks dient und den Titelnamen mit einem <th>-Element anzeigt, das das colspan-Attribut verwendet, um die Überschrift über alle drei Spalten der Tabelle zu erstrecken. Jede verbleibende Zeile innerhalb jedes Hauptfachs <tbody> repräsentiert einen Schüler.

<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 größte Teil des CSS bleibt unverändert. Allerdings wird ein etwas subtilerer Stil für Kopfzellen hinzugefügt, die direkt innerhalb eines <tbody> (im Gegensatz zu denen, die sich im <thead> befinden) enthalten sind. Dies wird für die Kopfzeilen verwendet, die das entsprechende Hauptfach eines jeden Tabellenabschnitts anzeigen.

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: #fff;
}

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
• <caption>, <col>, <colgroup>, <table>, <td>, <tfoot>, <th>, <thead>, <tr>: Andere tabellenbezogene Elemente
• background-color: CSS-Eigenschaft, um die Hintergrundfarbe jeder Tabellenzelle einzustellen
• border: CSS-Eigenschaft, um die Rahmen der Tabellenzellen zu kontrollieren
• text-align: CSS-Eigenschaft, um den Inhalt jeder Tabellenzelle horizontal auszurichten
• vertical-align: CSS-Eigenschaft, um den Inhalt jeder Tabellenzelle vertikal auszurichten