HTML <tbody> tag

Definitie en gebruik

<tbody> tag worden gebruikt om de tekst van de tabel in HTML-tabellen te groeperen.

<tbody> elementen samen met <thead> en <tfoot> elementen gecombineerd gebruiken om elke sectie van de tabel (tekst, kop, voet) te specificeren.

browsers kunnen deze elementen gebruiken om de kop en voet van de tabel onafhankelijk weer te geven bij het scannen van de tabeltekst. Bovendien kunnen deze elementen ervoor zorgen dat de kop en voet van de tabel aan de top en onderkant van elke pagina worden afgedrukt bij het afdrukken van grote tabellen die over meerdere pagina's verspreid zijn.

Opmerking:<tbody> het element moet een of meerdere <tr> tag.

<tbody> merk moet in de volgende context worden gebruikt: als <table> onderdelen van het element, in elke <caption>en<colgroup> en <thead> na het element.

Tip:Standaard heeft de <thead>, <tbody> en <tfoot>-elementen geen invloed op de lay-out van de tabel. Maar je kunt CSS gebruiken om de stijl van deze elementen in te stellen (zie de voorbeelden hieronder)!

Voorbeeld

Voorbeeld 1

HTML-tabel met <thead>, <tbody> en <tfoot>-elementen:

<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>Totaal</td>
      <td>￥7900</td>
    </tr>
  </tfoot>
</table>

Try it yourself

Voorbeeld 2

Gebruik CSS om de stijl van <thead>, <tbody> en <tfoot> in te stellen:

<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>Totaal</td>
      <td>￥7900</td>
    </tr>
  </tfoot>
</table>

Try it yourself

Voorbeeld 3

Hoe uitlijnen <tbody> inhoud (met CSS):

<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

Voorbeeld 4

Hoe verticaal uitlijnen <tbody> inhoud (met CSS):

<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