HTML <tbody> Tag

Definition und Verwendung

<tbody> Tag werden verwendet, um den Textinhalt in HTML-Tabellen zu gruppieren.

<tbody> Elemente mit <thead> und <tfoot> Elemente in Kombination verwenden, um jeden Teil der Tabelle (Körper, Kopf, Fuss) zu spezifizieren.

Browser können diese Elemente verwenden, um bei der Scrolling des Tabellenkörpers die Kopf- und Fusszeile unabhängig anzuzeigen. Darüber hinaus können diese Elemente bei dem Druck großer Tabellen, die über mehrere Seiten gehen, sicherstellen, dass die Kopf- und Fusszeile auf dem oberen und unteren Rand jeder Seite gedruckt werden.

Hinweis:<tbody> Das Element muss intern ein oder mehrere <tr>-Tag.

<tbody> Kennung muss im folgenden Kontext verwendet werden: als <table> Kinder des Elements, in jeder <caption>、<colgroup> und <thead> nach dem Element.

Tipp:Standardmäßig beeinflussen die Elemente <thead>, <tbody> und <tfoot> die Tabellenlayout nicht. Sie können jedoch mit CSS die Stile dieser Elemente festlegen (siehe untenstehende Beispiele)!

Beispiel

Beispiel 1

HTML-Tabelle, die <thead>, <tbody> und <tfoot> enthält:

<table>
  <thead>
    <tr>
      <th>Month</th>
      <th>Savings</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>January</td>
      <td>￥3400</td>
    </tr>
    <tr>
      <td>February</td>
      <td>￥4500</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Summe</td>
      <td>￥7900</td>
    </tr>
  </tfoot>
</table>

Try It Yourself

Beispiel 2

Stellen Sie mit CSS die Stile von <thead>, <tbody> und <tfoot> ein:

<html>
<head>
<style>
thead {color: green;}
tbody {color: blue;}
tfoot {color: red;}
table, th, td {
  border: 1px solid black;
}
</style>
</head>
<body>
<table>
  <thead>
    <tr>
      <th>Month</th>
      <th>Savings</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>January</td>
      <td>￥3400</td>
    </tr>
    <tr>
      <td>February</td>
      <td>￥4500</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Summe</td>
      <td>￥7900</td>
    </tr>
  </tfoot>
</table>

Try It Yourself

Beispiel 3

Wie man ausrichtet <tbody> Inhalt (CSS verwendet):

<table style="width:100%">
  <thead>
    <tr>
      <th>Month</th>
      <th>Savings</th>
    </tr>
  </thead>
  <tbody style="text-align:right">
    <tr>
      <td>January</td>
      <td>￥3400</td>
    </tr>
    <tr>
      <td>February</td>
      <td>￥4500</td>
    </tr>
  </tbody>
</table>

Try It Yourself

Beispiel 4

Wie man vertikal ausrichtet <tbody> Inhalt (CSS verwendet):

<table style="width:50%;">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tbody style="vertical-align:bottom">
    <tr style="height:100px">
      <td>January</td>
      <td>￥3400</td>
    </tr>
    <tr style="height:100px">
      <td>February</td>
      <td>￥4500</td>
    </tr>
  </tbody>
</table>

Try It Yourself

Global Attributes

<tbody> The tag also supports Global Attributes in HTML.

Event Attributes

<tbody> The tag also supports Event Attributes in HTML.

Default CSS Settings

Most browsers will display the following default values <tbody> Element:

tbody {
  display: table-row-group;
  vertical-align: middle;
  border-color: inherit;
}

Browser Support

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Support Support Support Support Support