Tag thead
A tag thead define a parte superior (cabeçalho) de uma tabela.
É usada para agrupar linhas de tal
forma que seja possível aplicar
estilos CSS a um grupo de uma vez. Só pode haver
uma tag thead por tabela.
A tag thead é frequentemente usada em conjunto
com tbody
e tfoot
para definir a parte superior, a parte principal
e a parte inferior de uma tabela HTML.
Exemplo
Vamos adicionar a cor vermelha ao texto do grupo de linhas
agrupadas pela tag
thead, usando a propriedade
color:
<table>
<thead>
<tr>
<th>Nome</th>
<th>Sobrenome</th>
<th>Salário</th>
</tr>
</thead>
<tbody>
<tr>
<td>nome1</td>
<td>sobrenome1</td>
<td>200$</td>
</tr>
<tr>
<td>nome2</td>
<td>sobrenome2</td>
<td>1000$</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>total: 2</td>
<td>-</td>
<td>total: 1200$</td>
</tr>
</tfoot>
</table>
thead {
color: red;
}
table, td, th {
border: 1px solid black;
}
:
Exemplo
Aqui, o thead não está no topo e o tfoot
não está na base, mas mesmo assim o navegador irá posicioná-los
em seus devidos lugares:
<table>
<tfoot>
<tr>
<td>total: 2</td>
<td>-</td>
<td>total: 1200$</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>nome1</td>
<td>sobrenome1</td>
<td>200$</td>
</tr>
<tr>
<td>nome2</td>
<td>sobrenome2</td>
<td>1000$</td>
</tr>
</tbody>
<thead>
<tr>
<th>Nome</th>
<th>Sobrenome</th>
<th>Salário</th>
</tr>
</thead>
</table>
table, td, th {
border: 1px solid black;
}
:
