Tag HTML <tbody>

Definizione e uso

<tbody> etichetta viene utilizzata per raggruppare il contenuto del corpo della tabella HTML.

<tbody> l'elemento con <thead> e <tfoot> elementi combinati per specificare ogni parte della tabella (corpo, intestazione, piede di pagina).

I browser possono utilizzare questi elementi per far sì che l'intestazione e il piede di pagina siano visualizzati separatamente mentre si scorre il corpo della tabella. Inoltre, quando si stampa una tabella grande su più pagine, questi elementi possono far sì che l'intestazione e il piede di pagina siano stampati in alto e in basso su ogni pagina.

Attenzione:<tbody> all'interno dell'elemento devono esserci uno o più etichetta <tr>..

<tbody> il tag deve essere utilizzato nei seguenti contesti: come <table> figli dell'elemento, in qualsiasi <caption>e<colgroup> e <thead> dopo l'elemento.

Suggerimento:Di default, gli elementi <thead>, <tbody> e <tfoot> non influenzano la layout della tabella. Ma puoi impostare lo stile di questi elementi utilizzando CSS (vedi gli esempi sotto)!

esempio

esempio 1

Tabella HTML che contiene <thead>, <tbody> e <tfoot> elementi:

<table>
  <thead>
    <tr>
      <th>Mese</th>
      <th>Saldo</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Gennaio</td>
      <td>￥3400</td>
    </tr>
    <tr>
      <td>Febbraio</td>
      <td>￥4500</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>totale</td>
      <td>￥7900</td>
    </tr>
  </tfoot>
</table>

Prova tu stesso

esempio 2

Impostare lo stile di <thead>, <tbody> e <tfoot> utilizzando CSS:

<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>Mese</th>
      <th>Saldo</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Gennaio</td>
      <td>￥3400</td>
    </tr>
    <tr>
      <td>Febbraio</td>
      <td>￥4500</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>totale</td>
      <td>￥7900</td>
    </tr>
  </tfoot>
</table>

Prova tu stesso

esempio 3

come allineare <tbody> il contenuto (utilizzando CSS):

<table style="width:100%">
  <thead>
    <tr>
      <th>Mese</th>
      <th>Saldo</th>
    </tr>
  </thead>
  <tbody style="text-align:right">
    <tr>
      <td>Gennaio</td>
      <td>￥3400</td>
    </tr>
    <tr>
      <td>Febbraio</td>
      <td>￥4500</td>
    </tr>
  </tbody>
</table>

Prova tu stesso

esempio 4

come allineare verticalmente <tbody> il contenuto (utilizzando CSS):

<table style="width:50%;">
  <tr>
    <th>Mese</th>
    <th>Saldo</th>
  </tr>
  <tbody style="vertical-align:bottom">
    <tr style="height:100px">
      <td>Gennaio</td>
      <td>￥3400</td>
    </tr>
    <tr style="height:100px">
      <td>Febbraio</td>
      <td>￥4500</td>
    </tr>
  </tbody>
</table>

Prova tu stesso

Proprietà globali

<tbody> Il tag supporta anche Proprietà globali in HTML.

Proprietà degli eventi

<tbody> Il tag supporta anche Proprietà degli eventi in HTML.

Impostazioni CSS predefinite

La maggior parte dei browser utilizzerà i seguenti valori predefiniti per visualizzare <tbody> Elemento:

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

Supporto dei browser

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Supporto Supporto Supporto Supporto Supporto