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