<tbody>: Das Table Body-Element

Dieses Element enthält die globalen Attribute.

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

align Veraltet

Gibt die horizontale Ausrichtung jeder Tabellenzelle an. Die möglichen aufzählbaren Werte sind left, center, right, justify und char. Wenn unterstützt, richtet der char-Wert den Textinhalt an dem im char-Attribut definierten Zeichen und dem durch das charoff-Attribut definierten Offset 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 # präfixiert ist, oder ein Farbname. 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 Geldbeträge auszurichten. Wenn align nicht auf char gesetzt ist, wird dieses Attribut ignoriert.

charoff Veraltet

Gibt die Anzahl der Zeichen an, um welche der Inhalt der Tabellenzelle vom Ausrichtungszeichen, das im char-Attribut angegeben ist, versetzt sein soll.

valign Veraltet

Gibt die vertikale Ausrichtung jeder Tabellenzelle an. Die möglichen aufzählbaren 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> definiert werden (siehe "Tag-Aussparung" im technischen Überblick für eine Beschreibung, wann dies gültig ist), dann wird das vom Browser generierte Markup ein <tbody>-Element enthalten, das diese kapselt. Infolgedessen werden CSS-Selektoren wie table > tr diese Elemente nicht auswählen. Siehe auch das Beispiel ohne 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, von denen jeder bei Bedarf getrennt formatiert werden kann. Wenn sie nicht als aufeinanderfolgende Elemente markiert sind, korrigieren Browser diesen Autorenfehler, indem sie sicherstellen, dass <thead>- und <tfoot>-Elemente als erstes und letztes Element der Tabelle dargestellt werden.
• Zusammen mit den verwandten <thead>- und <tfoot>-Elementen liefert das <tbody>-Element nützliche semantische Informationen und kann sowohl bei der Darstellung für Bildschirm als auch für Druck verwendet werden. Die Spezifizierung solcher Tabellengruppen bietet auch wertvolle kontextuelle Informationen für unterstützende Technologien, einschließlich Bildschirmlesern und Suchmaschinen.
• Beim Drucken eines Dokuments, insbesondere bei einer mehrseitigen Tabelle, geben die <thead>- und <tfoot>-Elemente in der Regel Informationen an, die auf jeder Seite gleich bleiben oder sich zumindest sehr ähnlich sind, während der Inhalt des <tbody>-Elements sich von Seite zu Seite normalerweise unterscheidet.
• Wenn eine Tabelle in einem Bildschirmkontext (wie einem Fenster) dargestellt wird, der nicht groß genug ist, um die gesamte Tabelle anzuzeigen, kann der User-Agent dem Benutzer ermöglichen, den Inhalt der <thead>, <tbody>, <tfoot> und <caption> Blöcke getrennt voneinander für denselben übergeordneten <table> zu scrollen.

Siehe <table> für ein vollständiges Tabellenbeispiel mit Einführung in gängige Standards und bewährte Praktiken.

Dieses Beispiel zeigt, dass der Browser die <tr>-Elemente automatisch in einem <tbody>-Element 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 Tabellenzeilen (<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 die CSS im Beispiel, bei der eine background-color für das <tbody>-Element angegeben wird und das tbody als Teil eines zusätzlichen CSS-Selectors 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

Wir führen einen Tabellenkopf (<thead>-Element) ein und verwenden ein <tbody>-Element explizit, um die Tabelle in semantische Abschnitte zu strukturieren. Der Tabellenkopf enthält die Spaltenüberschriften (<th>-Elemente). Das <tbody>-Element repräsentiert den Hauptteil der Tabelle, der aus einer Reihe von Zeilen (<tr>-Elemente) mit den Hauptdaten der Tabelle besteht, d.h. den Daten für jeden Studenten.

Die Verwendung solcher Tabellengruppen und semantischen Markups ist nicht nur nützlich für die visuelle Präsentation (durch 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 fast unverändert gegenüber dem vorherigen Beispiel, mit Ausnahme einiger grundlegender Stile, um den Tabellenkopf hervorzuheben, sodass die Kopfzeilen der Spalten sich von den Daten 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, indem mehrere Körperabschnitte eingeführt werden.

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

HTML

Aufbauend auf der Tabelle im vorherigen grundlegenden Beispiel werden mehr Studenten hinzugefügt, und anstatt das Hauptfach jedes Studenten in jeder Zeile aufzulisten, 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 Hauptfachtitel 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 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. Es wird jedoch ein leicht 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 jeweilige 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: Grundlegende HTML-Tabellen
• <caption>, <col>, <colgroup>, <table>, <td>, <tfoot>, <th>, <thead>, <tr>: Andere tabellenbezogene Elemente
• background-color: CSS-Eigenschaft, um die Hintergrundfarbe jeder Tabellenzelle festzulegen
• border: CSS-Eigenschaft zur Steuerung der Ränder der Tabellenzellen
• text-align: CSS-Eigenschaft, um den Inhalt jeder Tabellenzelle horizontal auszurichten
• vertical-align: CSS-Eigenschaft, um den Inhalt jeder Tabellenzelle vertikal auszurichten