Tag HTML <thead>

A tag <thead> define o cabeçalho de uma tabela HTML. Essa tag é utilizada juntamente com as tags <tbody> e <tfoot>, que especificam o corpo e o rodapé da tabela, respectivamente.

A tag <thead> deve ser usada como elemento filho de <table>, após os elementos <caption> e <colgroup>, e antes dos elementos <tbody>, <tfoot> e <tr>. É permitido usar apenas um <thead> dentro de um <table>.

No HTML5, a tag <tfoot> pode ser colocada antes ou depois de <tbody> — o navegador renderiza o rodapé na parte inferior da tabela em ambos os casos. (Na especificação mais antiga do HTML 4.01, o <tfoot> devia vir antes do <tbody>; esse requisito foi removido no HTML5.)

Por que a tag `<thead>` é importante

Agrupar as linhas de cabeçalho em <thead> não é apenas uma questão de organização da marcação. Isso confere à tabela uma estrutura semântica real que navegadores e tecnologias assistivas podem utilizar:

Leitores de tela conseguem identificar e anunciar as células de cabeçalho, ajudando os utilizadores a compreender o significado de cada célula de dados ao navegar pela tabela.
Impressão e tabelas longas: quando uma tabela ocupa várias páginas impressas (ou rola dentro de um contêiner de altura fixa), os navegadores podem repetir as linhas do <thead> no topo de cada página ou seção, mantendo os rótulos das colunas sempre visíveis.
Estilização e scripts ficam mais simples: é possível selecionar thead no CSS ou ordenar apenas as linhas do corpo em JavaScript sem alterar o cabeçalho.

Para que a estrutura seja significativa, inclua células <th scope="col"> dentro do <thead> — consulte a seção Acessibilidade abaixo.

Perigo

O <thead> deve conter pelo menos um elemento <tr>.

Dica

Os elementos <thead>, <tbody> e <tfoot> não afetam o layout da tabela por padrão. Use propriedades CSS para personalizar a aparência da tabela.

Sintaxe

A tag <thead> vem em pares. O conteúdo é escrito entre as tags de abertura (<thead>) e fechamento (</thead>).

<table>
  <thead>
    <tr>
      <th scope="col"> ... </th>
    </tr>
  </thead>
  <tbody> ... </tbody>
  <tfoot> ... </tfoot>
</table>

Exemplo da tag HTML `<thead>`:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      table {
        width: 80%;
        margin: 30px auto;
        border-collapse: collapse;
      }
      thead {
        background-color: #1c87c9;
        color: #ffffff;
      }
      th,
      td {
        padding: 10px;
        border: 1px solid #666666;
      }
    </style>
  </head>
  <body>
    <table>
      <thead>
        <tr>
          <th scope="col">Month</th>
          <th scope="col">Savings</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>January</td>
          <td>500</td>
        </tr>
        <tr>
          <td>February</td>
          <td>1000</td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <td>Total</td>
          <td>1500</td>
        </tr>
      </tfoot>
    </table>
  </body>
</html>

Experimente Você Mesmo »

Acessibilidade

A tag <thead> obtém seu maior valor por meio da acessibilidade. Para obter o benefício completo, use <th> (em vez de <td>) dentro dela e adicione o atributo scope:

<thead>
  <tr>
    <th scope="col">Month</th>
    <th scope="col">Savings</th>
  </tr>
</thead>

scope="col" informa aos leitores de tela que a célula é o cabeçalho de toda a coluna. Conforme o utilizador se move pela coluna, a tecnologia assistiva pode anunciar o cabeçalho antes de cada célula de dados, de modo que a relação entre um valor (por exemplo, 500) e seu rótulo (Savings) nunca se perde. Para um cabeçalho que identifica uma linha em vez de uma coluna, use scope="row". Consulte a tag <th> para mais informações sobre células de cabeçalho e escopos.

Mantenha os títulos reais das colunas em <thead> e as linhas de resumo ou totais acumulados em <tfoot>; essa estrutura consistente é o que permite que leitores de tela, folhas de estilo para impressão e scripts tratem o cabeçalho corretamente.

Atributos

Todos os atributos abaixo estão obsoletos e não são suportados no HTML5. Eles estão listados aqui apenas para que você possa reconhecê-los em marcações legadas. Use CSS em vez deles — consulte Substituindo os atributos obsoletos por CSS.

Atributo	Valores	Descrição
align	`left`, `right`, `center`, `justify`, `char`	Alinhamento horizontal do conteúdo dentro de um `<thead>`. Não suportado no HTML5.
bgcolor	`color` (nome ou hexadecimal)	Cor de fundo das linhas dentro de um `<thead>`. Não suportado no HTML5.
char	`character`	Alinha o conteúdo a um caractere; usado apenas com `align="char"`. Não suportado no HTML5.
charoff	`number`	Deslocamento (em caracteres) a partir do caractere definido por `char`; usado apenas com `align="char"`. Não suportado no HTML5.
valign	`top`, `bottom`, `middle`, `baseline`	Alinhamento vertical do conteúdo dentro de um `<thead>`. Não suportado no HTML5.

A tag <thead> também suporta os Atributos Globais e os Atributos de Evento.

Substituindo os atributos obsoletos por CSS

Cada atributo de apresentação acima possui um equivalente CSS direto que você deve usar em seu lugar:

Atributo antigo	Substituto CSS
`align="center"`	`text-align: center;`
`valign="middle"`	`vertical-align: middle;`
`bgcolor="#f2f2f2"`	`background-color: #f2f2f2;`
`char` / `charoff`	Sem equivalente CSS; alinhe números com `text-align` ou padding.

Um cabeçalho estilizado típico se parece com isto:

thead {
  background-color: #f2f2f2;
  font-weight: bold;
}

thead th {
  text-align: center;
  vertical-align: middle;
  padding: 10px;
}

Para mais opções de estilização de tabelas, consulte CSS Tables.

Prática

Qual é a função da tag HTML thead? (Selecione todas as opções corretas)

É usada para agrupar o conteúdo do rodapé em uma tabela HTML.É usada para agrupar o conteúdo do cabeçalho em uma tabela HTML.É usada para definir uma única linha em uma tabela HTML.É usada para agrupar o conteúdo do corpo em uma tabela HTML.Auxilia na acessibilidade ao descrever a estrutura dos dados da tabela para tecnologias assistivas.

Por que a tag <thead> é importante