<tbody>: Das Table Body-Element

Dieses Element enthält die globalen Attribute.

Die folgenden Attribute sind veraltet und sollten nicht mehr benutzt werden. Sie sind hier nur der Vollständigkeit halber dokumentiert, für die Aktualisierung bestehenden Codes 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 auf den durch das charoff-Attribut definierten Versatz aus. Verwenden Sie stattdessen die text-align CSS-Eigenschaft, da dieses Attribut veraltet ist.

bgcolor Veraltet

Definiert die Hintergrundfarbe jeder Zelle des Körpers. Der Wert ist eine HTML-Farbe; entweder ein 6-stelliger, hexadezimaler RGB-Farbcode, der mit einem # versehen ist, oder ein Farbkeyword. 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 auf ein Zeichen in jeder Zelle des Körperbereichs an. Typische Werte hierfür sind Punkt (.), um beispielsweise Zahlen oder Geldbeträge auszurichten. Wenn align nicht auf char gesetzt ist, wird dieses Attribut ignoriert.

charoff Veraltet

Gibt die Anzahl der Zeichen an, um die der Zellinhalt vom durch das char-Attribut festgelegten Ausrichtungszeichen versetzt wird.

valign Veraltet

Gibt die vertikale Ausrichtung jeder Zelle des Körpers an. Die möglichen aufgezählten Werte sind baseline, bottom, middle und top. Verwenden Sie stattdessen 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 sind (siehe "Tag-Auslassung" in der technischen Zusammenfassung für eine Beschreibung, wann dies zulässig ist), wird das vom Browser generierte Markup ein <tbody>-Element enthalten, das sie umschließt. Infolgedessen werden CSS-Selektoren wie table > tr diese Elemente nicht auswählen. Siehe auch das Beispiel Ohne Spezifikation eines Körpers.
• 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, die jeweils bei Bedarf separat formatiert werden können. Falls nicht so markiert, dass sie aufeinander folgende Elemente sind, werden Browser diesen Autorenfehler korrigieren, indem sichergestellt wird, dass die <thead>- und <tfoot>-Elemente als erste und 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 beim Rendern für Bildschirm als auch für Druck verwendet werden. Das Spezifizieren solcher Tabellengruppen bietet auch wertvolle kontextuelle Informationen für unterstützende Technologien, einschließlich Bildschirmlesegeräten und Suchmaschinen.
• Beim Drucken eines Dokuments spezifizieren die <thead>- und <tfoot>-Elemente in der Regel Informationen, die auf jeder Seite gleich bleiben oder zumindest sehr ähnlich sind, während sich der Inhalt des <tbody>-Elements von Seite zu Seite unterscheidet.
• Wenn eine Tabelle in einem Bildschirmkontext (z.B. ein Fenster), das nicht groß genug ist, um die gesamte Tabelle anzuzeigen, dargestellt wird, kann der User Agent es ermöglichen, den Inhalt der <thead>, <tbody>, <tfoot> und <caption>-Blöcke unabhängig voneinander zu scrollen, jeweils für das gleiche übergeordnete <table>-Element.

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

Dieses Beispiel zeigt, dass der Browser automatisch <tr>-Elemente in ein <tbody>-Element einfügt, wenn die Zeilen nicht innerhalb eines Tabellengruppierungselements (<tbody>, <tfoot> oder <thead>) verschachtelt sind und als direkte Kinder des <table>-Elements, wie in diesem Beispiel, erscheinen.

HTML

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

<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 ein background-color für das <tbody>-Element angegeben wird und tbody als Teil eines zusätzlichen CSS-Selektors verwendet wird. Alternativ können Browser-Entwicklertools verwendet werden, um die Anwesenheit des <tbody>-Elements im DOM zu prü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 unterteilen. Der Tabellenkopf enthält die Spaltenüberschriften (<th>-Elemente). Das <tbody>-Element repräsentiert den Hauptkorpus der Tabelle, der eine Anzahl von Zeilen (<tr>-Elemente) mit den Hauptdaten der Tabelle enthält, nämlich die Daten jedes Studenten.

Der Einsatz solcher Tabellengruppierungen und semantischen Markups ist nicht nur nützlich für die visuelle Präsentation (über CSS-Styling) und für kontextuelle Informationen für unterstützende Technologien; außerdem hilft der explizite Einsatz 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 gegenüber dem vorherigen Beispiel, abgesehen von einigen grundlegenden Stilelementen, um den Tabellenkopf hervorzuheben, damit sich die Kopfzeilen der Spalten von den Daten im Tabellenkörper abheben. Wie im obigen Beispiel wird der Type-Selector tbody 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, indem mehrere Körperabschnitte eingeführt werden.

Die Verwendung mehrerer <tbody>-Elemente ermöglicht die Erstellung von Zeilengruppierungen innerhalb einer Tabelle. Jeder Tabellenkörper kann potenziell seine eigenen Kopfzeilen 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 Überschriften innerhalb jedes <tbody> zu erstellen.

HTML

Ausgehend von der Tabelle im vorherigen Basisbeispiel werden weitere Studenten hinzugefügt und anstatt das Hauptfach jedes Studenten auf jeder Zeile aufzuführen, werden die Studenten nach Hauptfach gruppiert. Beachten Sie, dass jedes Hauptfach innerhalb seines eigenen <tbody>-Blocks eingeschlossen ist, wobei die erste Zeile (<tr>-Element) als Kopf des Blocks dient und den Titel des Hauptfachs in einem <th>-Element anzeigt, das das colspan-Attribut verwendet, um die Überschrift über alle drei Spalten der Tabelle zu spannen. Jede verbleibende Zeile innerhalb jedes Hauptfachs <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 größte Teil des CSS bleibt unverändert. Jedoch wird ein etwas subtilerer Stil für Kopfzellen direkt innerhalb eines <tbody> hinzugefügt (im Gegensatz zu denen, die sich im <thead> befinden). Dies wird für die Überschriften verwendet, die das entsprechende Hauptfach jedes Tabellenabschnitts angeben.

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: Grundlegendes zu HTML-Tabellen
• <caption>, <col>, <colgroup>, <table>, <td>, <tfoot>, <th>, <thead>, <tr>: Andere tabellenbezogene Elemente
• background-color: CSS-Eigenschaft zum Festlegen der Hintergrundfarbe jeder Körperzelle
• border: CSS-Eigenschaft zum Steuern der Ränder von Körperzellen
• text-align: CSS-Eigenschaft zur horizontalen Ausrichtung des Inhalts jeder Körperzelle
• vertical-align: CSS-Eigenschaft zur vertikalen Ausrichtung des Inhalts jeder Körperzelle