Carregando...

Html tbody

Postado: 15 de junho de 2022 Tempo de Leitura: < 1 Minuto

Html tbody

Neste artigo HTML veremos como usar o elemento HTML chamado de tag <tbody>

A tag HTML <tbody> define um conjunto de linhas que compõem o corpo de uma tabela HTML. 

A tag <tbody> é usada para agrupar o conteúdo do corpo em uma tabela HTML.

O elemento <tbody> é usado em conjunto com os elementos <thead> e <tfoot> para especificar cada parte de uma tabela (corpo, cabeçalho e rodapé).

Veja o exemplo no código uma tabela HTML com um elemento <thead>, <tbody> e <tfoot>:

<table>
  <thead>
    <tr>
      <th>Mês</th>
      <th>Valor</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Janeiro</td>
      <td>R$ $150</td>
    </tr>
    <tr>
      <td>Fevereiro</td>
      <td>$60</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Março</td>
      <td>$90</td>
    </tr>
  </tfoot>
</table>

Observação

  • O elemento HTML <tbody> é encontrado em uma tabela HTML dentro da tag <body> .
  • A tag <tbody> deve aparecer após as tags <caption> , <colgroup> e <thead> em uma tabela, mas antes da tag <tfoot>.
  • A tag <tbody> pode conter zero ou mais tags <tr> .

Estilize a tabela <thead>, <tbody> e <tfoot> com CSS:

<html>
<head>
<style>
thead {color: red;}
tbody {color: blue;}
tfoot {color: orange;}

table, th, td {
  border: 1px solid #cccccc;
}
</style>
</head>
<body>

<table>
  <thead>
    <tr>
      <th>Mês</th>
      <th>Valor</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Janeiro</td>
      <td>R$ $150</td>
    </tr>
    <tr>
      <td>Fevereiro</td>
      <td>$60</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Março</td>
      <td>$90</td>
    </tr>
  </tfoot>
</table>

Configurações padrão de CSS

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

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

Neste artigo abordamos sobre a tag Html tbody.

Veja outros artigos sobre Tabela em Html

Publicado por: Loop Nerd

330 Visualizações

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

Artigos Relacionados