<tbody>: Das Table-Body-Element

Dieses Element beinhaltet die globalen Attribute.

Die folgenden Attribute sind veraltet und sollten nicht mehr verwendet werden. Sie werden hier zu Referenzzwecken bei der Aktualisierung von bestehendem Code und aus historischem Interesse dokumentiert.

align Veraltet

Gibt die horizontale Ausrichtung jeder Tabellenzelle an. Die möglichen numerierten Werte sind left, center, right, justify und char. Wenn unterstützt, richtet der Wert char den Textinhalt am Zeichen aus, das im char-Attribut definiert ist, und am durch das charoff-Attribut definierten Offset. Verwenden Sie 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 # vorausgeht, oder ein Farbname. Andere CSS <color> Werte werden nicht unterstützt. Verwenden Sie die background-color CSS-Eigenschaft, da dieses Attribut veraltet ist.

char Veraltet

Gibt die Ausrichtung des Inhalts an einem Zeichen in jeder Tabellenzelle 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 wie viele der Tabellenzelleninhalt vom Ausrichtungszeichen, das durch das char-Attribut angegeben ist, versetzt wird.

valign Veraltet

Gibt die vertikale Ausrichtung jeder Tabellenzelle an. Die möglichen numerierten 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>-Elements angegeben sind (siehe "Tag-Auslassung" in der technischen Zusammenfassung für eine Beschreibung, wann dies zulässig ist), wird das von dem Browser generierte Markup ein <tbody>-Element enthalten, das sie einkapselt. Infolgedessen werden CSS-Selektoren wie table > tr diese Elemente nicht auswählen. Siehe auch das Beispiel Kein Körper angegeben.
• 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, falls gewünscht. Wenn sie nicht als aufeinanderfolgende Elemente markiert sind, werden Browser diesen Autorenfehler korrigieren, indem sie sicherstellen, dass alle <thead>- und <tfoot>-Elemente als erste bzw. letzte Elemente der Tabelle gerendert werden.
• Zusammen mit den verwandten <thead>- und <tfoot>-Elementen bietet das <tbody>-Element nützliche semantische Informationen und kann sowohl bei der Darstellung auf dem Bildschirm als auch beim Drucken verwendet werden. Das Angeben solcher Tabellengruppen bietet auch wertvolle kontextuelle Informationen für unterstützende Technologien, einschließlich Bildschirmlesern und Suchmaschinen.
• Beim Drucken eines Dokuments geben die <thead>- und <tfoot>-Elemente im Fall einer mehrseitigen Tabelle üblicherweise 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 (z.B. ein Fenster), der nicht groß genug ist, um die gesamte Tabelle anzuzeigen, präsentiert wird, kann es ein User-Agent ermöglichen, dass der Benutzer die Inhalte der <thead>, <tbody>, <tfoot>, und <caption>-Blöcke unabhängig voneinander scrollen kann, wenn sie sich im selben übergeordneten <table> befinden.

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

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

HTML

Hier wird eine sehr grundlegende Tabelle erstellt, die einige Tabellenzeilen (<tr>-Elemente) enthält, 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 festgelegt ist und tbody als Teil eines zusätzlichen CSS-Selektors verwendet wird. Alternativ können Entwicklertools für den Browser 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

Wir fügen den Tabellenkopf (<thead>-Element) hinzu 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 Hauptbereich der Tabelle, der aus mehreren Zeilen (<tr>-Elemente) mit den Hauptdaten der Tabelle besteht, die die Daten jedes Studenten sind.

Die Verwendung solcher Tabellengruppen und semantisches Markup ist nicht nur nützlich für die visuelle Darstellung (über CSS-Styling) und kontextuelle Informationen für unterstützende Technologien; zudem hilft die explizite Verwendung des <tbody>-Elements dem Browser, die gewünschte 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 gegenüber dem vorherigen Beispiel, außer dass grundlegendes Styling hinzugefügt wird, um den Tabellenkopf hervorzuheben, damit die Überschriften der Spalten sich vom Dateninhalt im Tabellenkörper abheben. Wie im obigen Beispiel 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: #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.

Das Verwenden mehrerer <tbody>-Elemente ermöglicht es, Zeilengruppen innerhalb einer Tabelle zu erstellen. Jeder Tabellenkörper kann potenziell seine eigene Kopfzeile oder mehrere Kopfzeilen haben; jedoch darf es nur ein <thead>-Element pro Tabelle geben! Aufgrund dessen können <tr>-Elemente mit <th>-Elementen verwendet werden, um Überschriften innerhalb jedes <tbody> zu erstellen.

HTML

Anknüpfend an die Tabelle im vorherigen Basisebeispiel, werden weitere Studenten hinzugefügt und anstatt das Fach jedes Studenten in jeder Zeile aufzuführen, werden die Studenten nach Fach gruppiert. Beachten Sie, dass jedes Fach innerhalb eines eigenen <tbody>-Blocks eingeschlossen ist, wobei die erste Zeile (<tr>-Element) als Kopf des Blocks dient und den Fach-Titel innerhalb eines <th>-Elements anzeigt, das das colspan-Attribut verwendet, um die Überschrift über alle drei Spalten der Tabelle zu erstrecken. Jede verbleibende Zeile innerhalb jedes <tbody>-Blocks eines Fachs 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

Die meisten CSS-Regeln bleiben unverändert. Allerdings wird ein etwas subtilerer Stil für Kopfzellen hinzugefügt, die sich direkt in einem <tbody> befinden (im Gegensatz zu denen im <thead>). Dies wird für die Überschriften verwendet, die jeweils die großen Bereiche der Tabelle 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-Grundlagen
• <caption>, <col>, <colgroup>, <table>, <td>, <tfoot>, <th>, <thead>, <tr>: Weitere tabellenbezogene Elemente
• background-color: CSS-Eigenschaft, um die Hintergrundfarbe jeder Zelle festzulegen
• border: CSS-Eigenschaft, um die Rahmen von Zellen zu steuern
• text-align: CSS-Eigenschaft zur horizontalen Ausrichtung des Inhalts jeder Tabellenzelle
• vertical-align: CSS-Eigenschaft zur vertikalen Ausrichtung des Inhalts jeder Tabellenzelle