Etiqueta <tbody> HTML

Definição e uso

<tbody> etiqueta é usada para agrupar conteúdo de texto na tabela HTML.

<tbody> elemento com <thead> e <tfoot> elementos combinados para especificar cada parte da tabela (corpo, cabeçalho, rodapé).

Os navegadores podem usar esses elementos para que, enquanto a parte principal da tabela é rolada, o cabeçalho e o rodapé possam ser exibidos separadamente. Além disso, ao imprimir tabelas grandes que se estendem por várias páginas, esses elementos permitem que o cabeçalho e o rodapé sejam impressos no topo e na parte inferior de cada página.

Anotação:<tbody> o elemento interno deve conter um ou mais etiqueta <tr>.

<tbody> marcação deve ser usada no contexto seguinte: como <table> elementos filhos, em qualquer <caption>e<colgroup> e <thead> depois do elemento.

Dica:Por padrão, os elementos <thead>, <tbody> e <tfoot> não afetam o layout da tabela. No entanto, você pode usar CSS para definir estilos para esses elementos (veja os exemplos a seguir)!

instância

exemplo 1

Tabela HTML contendo <thead>, <tbody> e <tfoot> elementos:

<table>
  <thead>
    <tr>
      <th> Mês</th>
      <th> Poupança</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td> Janeiro</td>
      <td>￥3400</td>
    </tr>
    <tr>
      <td> Fevereiro</td>
      <td>￥4500</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>total</td>
      <td>￥7900</td>
    </tr>
  </tfoot>
</table>

Experimente você mesmo

exemplo 2

Defina estilos para <thead>, <tbody> e <tfoot> usando 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> Mês</th>
      <th> Poupança</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td> Janeiro</td>
      <td>￥3400</td>
    </tr>
    <tr>
      <td> Fevereiro</td>
      <td>￥4500</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>total</td>
      <td>￥7900</td>
    </tr>
  </tfoot>
</table>

Experimente você mesmo

exemplo 3

como alinhar <tbody> do conteúdo (usando CSS):

<table style="width:100%">
  <thead>
    <tr>
      <th> Mês</th>
      <th> Poupança</th>
    </tr>
  </thead>
  <tbody style="text-align:right">
    <tr>
      <td> Janeiro</td>
      <td>￥3400</td>
    </tr>
    <tr>
      <td> Fevereiro</td>
      <td>￥4500</td>
    </tr>
  </tbody>
</table>

Experimente você mesmo

exemplo 4

como alinhar verticalmente <tbody> do conteúdo (usando CSS):

<table style="width:50%;">
  <tr>
    <th> Mês</th>
    <th> Poupança</th>
  </tr>
  <tbody style="vertical-align:bottom">
    <tr style="height:100px">
      <td> Janeiro</td>
      <td>￥3400</td>
    </tr>
    <tr style="height:100px">
      <td> Fevereiro</td>
      <td>￥4500</td>
    </tr>
  </tbody>
</table>

Experimente você mesmo

Atributos globais

<tbody> A etiqueta também suporta Atributos globais no HTML.

Atributos de evento

<tbody> A etiqueta também suporta Atributos de evento no HTML.

Configurações CSS padrão

A maioria dos navegadores exibirá os seguintes valores padrão <tbody> Elemento:

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

Suporte ao navegador

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Suporte Suporte Suporte Suporte Suporte