Exemplo
Uma tabela HTML com um <thead>, <tfoot> , e <tbody> elemento:
<table>
<thead>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
</thead>
<tfoot>
<tr>
<td>Sum</td>
<td>$180</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</tbody>
</table>
Tente você mesmo " Definição e Uso
O <thead> tag é usada para o conteúdo de cabeçalho de grupo em uma tabela HTML.
O <thead> elemento é utilizado em conjunto com os <tbody> e <tfoot> elementos para especificar cada parte de uma tabela (cabeçalho, corpo, rodapé).
Os navegadores podem usar esses elementos para permitir o deslocamento do corpo da tabela independentemente do cabeçalho e rodapé. Além disso, ao imprimir uma grande mesa que se estende por várias páginas, estes elementos podem permitir que o cabeçalho da tabela e rodapé a ser impresso na parte superior e inferior de cada página.
O <thead> tag deve ser utilizado no seguinte contexto: Como uma criança de um <table> elemento, após quaisquer <caption> e <colgroup> elementos, e antes de qualquer <tbody>, <tfoot> e <tr> elementos.
Suporte a navegadores
| Elemento | |||||
|---|---|---|---|---|---|
| <thead> | sim | sim | sim | sim | sim |
Dicas e Notas
Nota: O <thead> elemento deve ter um ou mais <tr> tag dentro.
Dica: O <thead>, <tbody> e <tfoot> elementos não afetará o layout da tabela por padrão.No entanto, você pode usar CSS para estilizar estes elementos.
Diferenças entre HTML 4.01 e HTML5
Nenhum dos atributos HTML 4.01 são suportados no HTML5.
Atributos
| Atributo | Valor | Descrição |
|---|---|---|
| align | right left center justify char | Não suportado em HTML5. Alinha o conteúdo dentro do <thead> elemento |
| char | character | Não suportado em HTML5. Alinha o conteúdo dentro do <thead> elemento para um personagem |
| charoff | number | Não suportado em HTML5. Define o número de caracteres do conteúdo dentro do <thead> elemento será alinhado do caractere especificado pelo char atributo |
| valign | top middle bottom baseline | Não suportado em HTML5. Vertical alinha o conteúdo dentro do <thead> elemento |
Atributos globais
O <thead> tag também suporta o Global de Atributos em HTML .
Atributos de eventos
O <thead> tag também suporta o evento Atributos em HTML .
Configurações CSS padrão
A maioria dos navegadores irá exibir o <thead> elemento com os seguintes valores padrão:
thead {
display: table-header-group;
vertical-align: middle;
border-color: inherit;
}