Tag HTML <tbody>

A tag <tbody> define o conteúdo do corpo (um conjunto de linhas) de uma tabela HTML, criando um bloco semântico separado dentro dela. É usada junto com as tags <thead> e <tfoot>, que especificam o cabeçalho e o rodapé da tabela, respectivamente. Juntos, esses três elementos dividem a tabela em cabeçalho, corpo e rodapé — tornando a marcação mais fácil de ler, de estilizar e acessível a tecnologias assistivas.

A tag <tbody> deve ser usada como filha do elemento <table>, após os elementos <caption> e <colgroup> (se existirem) e após o elemento <thead>. No HTML5, o elemento <tfoot> pode aparecer antes ou depois do elemento <tbody> — ambas as formas são válidas, e o <tfoot> é sempre renderizado na parte inferior, independentemente de sua posição no código-fonte.

Por que o `<tbody>` é importante

Mesmo que você nunca escreva uma tag <tbody>, o navegador cria uma para você. Quando você coloca linhas <tr> diretamente dentro de um <table>, o analisador automaticamente as envolve em um <tbody> implícito. Isso tem consequências práticas:

Seletores CSS. Por causa do <tbody> implícito, um seletor descendente como table > tbody > tr corresponde às linhas mesmo quando você não escreveu a tag, enquanto table > tr não corresponde a nada. Saber isso evita bugs confusos de "meu seletor não funciona".
Agrupamento de linhas. Uma tabela pode conter múltiplos elementos <tbody>, permitindo dividir uma tabela longa em seções lógicas (por exemplo, por ano ou categoria) que podem ser estilizadas e percorridas de forma independente.
Scripts no DOM. Cada <table> expõe uma coleção tBodies em JavaScript (table.tBodies[0]), dando acesso direto a cada grupo de corpo sem percorrer os nós filhos.
Impressão. Quando uma tabela longa se estende por várias páginas impressas, os navegadores repetem o <thead> e o <tfoot> em cada página, enquanto o conteúdo do <tbody> flui de página em página.

Dica

Os elementos <thead>, <tbody> e <tfoot> não afetam o layout da tabela por padrão. Use propriedades CSS para personalizar a aparência da tabela.

Ao imprimir um documento, os elementos <thead> e <tfoot> definirão as informações que podem ser iguais ou muito semelhantes em cada página de uma tabela de várias páginas, enquanto o conteúdo da tag <tbody> variará de página em página.

No caso de uso do <tbody>, não é possível ter elementos <tr> (linhas de tabela) que sejam filhos diretos do elemento <table> sem estarem incluídos no <tbody>. Se você usar linhas que não sejam de cabeçalho nem de rodapé, elas devem estar dentro do elemento <tbody>.

Mais de um elemento <tbody> pode ser usado em cada tabela, desde que sejam todos sucessivos. Isso separará as linhas de tabelas longas em seções, e você poderá formatar cada uma delas separadamente.

Sintaxe

A tag <tbody> vem em pares. O conteúdo é escrito entre as tags de abertura (<tbody>) e de fechamento (</tbody>).

Tag HTML <tbody>

<table>
  <thead> ... </thead>
  <tfoot> ... </tfoot>
  <tbody>
    <tr>
      <td> ... </td>
    </tr>
  </tbody>
</table>

Exemplo da tag HTML `<tbody>`:

Tag HTML <tbody>

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      th, td {
        padding: 10px;
        border: 1px solid #666;
      }
    </style>
  </head>
  <body>
    <table style="width:80%; margin:30px auto; border-collapse:collapse;">
      <thead style="background-color:#1c87c9; color:#fff;">
        <tr>
          <th>Month</th>
          <th>Savings</th>
        </tr>
      </thead>
      <tfoot style="background-color:grey;">
        <!-- <tfoot> is placed after <thead>, but is shown on the bottom of the table. -->
        <tr>
          <td>Total</td>
          <td>1500</td>
        </tr>
      </tfoot>
      <tbody style="background-color:lightgrey;">
        <tr>
          <td>January</td>
          <td>500</td>
        </tr>
        <tr>
          <td>February</td>
          <td>1000</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

Experimente Você Mesmo »

Resultado

Exemplo da tag HTML `<tbody>` com as tags `<thead>` e `<tfoot>`:

Tag HTML <tbody>

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      table {
        width: 60%;
        margin: 30px auto;
        border-collapse: collapse;
      }
      thead {
        background-color: #8ebf42;
        color: #fff;
      }
      tbody {
        background-color: #f3ebeb;
      }
      tfoot {
        background-color: #ccc7c7;
      }
      th,
      td {
        padding: 10px;
        border: 1px solid #666666;
      }
    </style>
  </head>
  <body>
    <table>
      <thead>
        <tr>
          <th>Month</th>
          <th>Savings</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>January</td>
          <td>1500</td>
        </tr>
        <tr>
          <td>February</td>
          <td>1000</td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <td>Total</td>
          <td>2500</td>
        </tr>
      </tfoot>
    </table>
  </body>
</html>

Experimente Você Mesmo »

Exemplo de múltiplos elementos `<tbody>`

Você pode usar vários elementos <tbody> em uma tabela para agrupar linhas em seções separadas. Aqui, cada trimestre é seu próprio grupo de corpo, e cada grupo recebe sua própria cor de fundo:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      table {
        width: 60%;
        margin: 30px auto;
        border-collapse: collapse;
      }
      th,
      td {
        padding: 10px;
        border: 1px solid #666666;
        text-align: left;
      }
      thead {
        background-color: #1c87c9;
        color: #fff;
      }
      tbody:nth-of-type(odd) {
        background-color: #f3ebeb;
      }
      tbody:nth-of-type(even) {
        background-color: #e3f0fb;
      }
    </style>
  </head>
  <body>
    <table>
      <thead>
        <tr>
          <th>Month</th>
          <th>Savings</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>January</td>
          <td>500</td>
        </tr>
        <tr>
          <td>February</td>
          <td>1000</td>
        </tr>
      </tbody>
      <tbody>
        <tr>
          <td>March</td>
          <td>750</td>
        </tr>
        <tr>
          <td>April</td>
          <td>1200</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

Acessibilidade

Os elementos <tbody>, <thead> e <tfoot> ajudam os leitores de tela a transmitir a estrutura de uma tabela. Para a tabela mais acessível possível, combine-os com células de cabeçalho que usem o atributo scope, para que a tecnologia assistiva possa anunciar a qual cabeçalho uma célula de dados pertence:

<table>
  <thead>
    <tr>
      <th scope="col">Month</th>
      <th scope="col">Savings</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">January</th>
      <td>500</td>
    </tr>
  </tbody>
</table>

Use scope="col" para cabeçalhos de coluna (normalmente dentro de <thead>) e scope="row" para cabeçalhos de linha dentro do corpo.

Atributos

Atributo	Valores	Descrição
align	right left center justify char	Especifica o alinhamento do conteúdo dentro do elemento `<tbody>`. Não suportado no HTML5.
bgcolor	bgcolor	Define a cor de fundo das linhas dentro do elemento `<tbody>`. Não suportado no HTML5.
char	character	Especifica o alinhamento do conteúdo dentro do elemento `<tbody>` em relação a um caractere. Usado apenas quando o atributo align="char". Não suportado no HTML5.
charoff	number	Especifica o número de caracteres que o conteúdo dentro do elemento `<tbody>` será alinhado a partir do caractere especificado pelo atributo char. Usado apenas quando o atributo align="char". Não suportado no HTML5.
valign	top bottom middle baseline	Especifica o alinhamento vertical do conteúdo dentro do elemento `<tbody>`. Não suportado no HTML5.

A tag <tbody> também suporta os Atributos Globais e os Atributos de Evento.

Substituições CSS para os atributos obsoletos

Os atributos de apresentação acima estão obsoletos no HTML5. Use CSS em vez deles:

Atributo antigo	Use este CSS em vez disso
`align="center"`	`text-align: center;`
`valign="top"`	`vertical-align: top;`
`bgcolor="#eee"`	`background-color: #eee;`

Como estilizar uma tag HTML `<tbody>`

Direcione o elemento <tbody> diretamente na sua folha de estilos para dar ao corpo da tabela seu próprio fundo, bordas e alinhamento de células:

tbody {
  background-color: #f3ebeb;
  border: 2px solid #1c87c9;
}

tbody td {
  text-align: center;
  vertical-align: top;
}

/* Zebra-stripe the body rows */
tbody tr:nth-of-type(even) {
  background-color: #e3f0fb;
}

Consulte estilização de tabelas com CSS para mais técnicas.

Prática

O que faz a tag HTML tbody?

Ela agrupa as linhas do corpo de uma tabela HTML em uma seção.Ela não pode ser estilizada com propriedades CSS.Ela deve ser sempre o primeiro filho do elemento table.Ela representa o conteúdo principal do documento inteiro.Ela é obrigatória em torno de cada linha individual, com uma linha por tbody.

Por que o <tbody> é importante

Sintaxe

Exemplo da tag HTML <tbody>:

Resultado

Exemplo da tag HTML <tbody> com as tags <thead> e <tfoot>:

Exemplo de múltiplos elementos <tbody>

Acessibilidade

Atributos

Substituições CSS para os atributos obsoletos

Como estilizar uma tag HTML <tbody>

Prática

Por que o `<tbody>` é importante

Exemplo da tag HTML `<tbody>`:

Exemplo da tag HTML `<tbody>` com as tags `<thead>` e `<tfoot>`:

Exemplo de múltiplos elementos `<tbody>`

Como estilizar uma tag HTML `<tbody>`