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:

html<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>

cssthead {
  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:

html<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>

csstable, td, th {
  border: 1px solid black;
}

Результат:

Veja também