Tag HTML th - Aprenda HTML

A tag <th> especifica uma célula de cabeçalho em uma tabela HTML. Ela deve ser usada como elemento filho de <tr>, que, por sua vez, é colocado dentro da tag <table>. Para definir uma célula de dados padrão, utiliza-se a tag <td>.

Esta página aborda o que <th> faz, como abranger células com colspan e rowspan, e — mais importante — como tornar os cabeçalhos de tabela acessíveis com o atributo scope e o padrão id/headers, para que os leitores de tela possam anunciar o cabeçalho correto para cada célula.

A tag <th> pode conter texto, imagens, formulários, links ou qualquer outro elemento HTML que possa ser usado no corpo de um documento HTML. O tamanho da tabela é automaticamente ajustado com base no tamanho do seu conteúdo.

Em tabelas HTML, os dados são organizados verticalmente em colunas. Se você quiser exibir a primeira linha da tabela como rótulos ou títulos, deve usar elementos <th> em vez de elementos <td> para aquela linha. Por padrão, o conteúdo da tag <th> é negrito e centralizado. Para alterar sua aparência, você pode usar estilos CSS. Os cabeçalhos de tabela também podem ser facilmente estilizados de forma independente do restante do conteúdo da tabela.

Note que todas as linhas de uma tabela devem ter o mesmo número de células. Se uma linha tiver menos células, o navegador renderiza as células ausentes implicitamente. Essas células implícitas herdam os estilos de borda da tabela. Se precisar indicar que outras células não contêm dados, crie células vazias onde necessário. Se células implícitas aparecerem consecutivamente, elas podem ser renderizadas como uma única célula mesclada.

Sintaxe

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

Tag HTML <th>

<table> 
  <tr> 
    <th>...</th> 
  </tr> 
</table>

Exemplo da tag HTML `<th>`:

Mês e Data — Exemplo da tag HTML <th> — W3Docs

<!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: #fff;
      }
      th,
      td {
        padding: 10px;
        border: 1px solid #666;
      }
    </style>
  </head>
  <body>
    <table>
      <thead>
        <tr>
          <th>Month</th>
          <th>Date</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>June</td>
          <td>18.07.2018</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

Experimente Você Mesmo »

Resultado

Neste exemplo, nossos cabeçalhos são "Month" e "Date", que definimos usando tags <th>. Colocamos ambas as tags dentro de um elemento <tr>.

O atributo colspan é geralmente usado com a tag <th> para permitir que o conteúdo se estenda por múltiplas colunas. Vejamos isso em ação.

Exemplo da tag HTML `<th>` com o atributo colspan:

Exemplo com atributo colspan — Tag HTML <th> — W3Docs

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      table {
        width: 80%;
        margin: 30px auto;
        border-collapse: collapse;
      }
      tr {
        background-color: #1c87c9;
        color: #ffffff;
      }
      th,
      td {
        padding: 10px;
        border: 1px solid #666;
      }
    </style>
  </head>
  <body>
    <table>
      <thead>
        <tr>
          <th colspan="2">Month and Date</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Jun</td>
          <td>18.07.2014</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

Experimente Você Mesmo »

Neste exemplo, o valor do atributo colspan é "2". Isso significa que a única célula de cabeçalho se estende por duas colunas.

Exemplo da tag HTML `<th>` com o atributo rowspan

O atributo rowspan é o equivalente vertical de colspan: faz uma célula de cabeçalho abranger múltiplas linhas. Isso é útil quando um cabeçalho se aplica a várias linhas de dados.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      table {
        border-collapse: collapse;
        margin: 30px auto;
      }
      th,
      td {
        padding: 10px;
        border: 1px solid #666;
      }
      thead {
        background-color: #1c87c9;
        color: #fff;
      }
    </style>
  </head>
  <body>
    <table>
      <thead>
        <tr>
          <th>Day</th>
          <th>Slot</th>
          <th>Activity</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th rowspan="2" scope="rowgroup">Monday</th>
          <td>Morning</td>
          <td>HTML basics</td>
        </tr>
        <tr>
          <td>Afternoon</td>
          <td>CSS basics</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

Aqui, a célula de cabeçalho "Monday" usa rowspan="2", portanto cobre tanto as linhas da manhã quanto da tarde.

O atributo scope

O recurso de acessibilidade mais importante de <th> é o atributo scope. Ele informa à tecnologia assistiva — leitores de tela em particular — quais células um cabeçalho descreve. Usuários com visão inferem isso pelo layout, mas um leitor de tela lê as células uma de cada vez e precisa de scope para anunciar o cabeçalho correto antes de cada célula de dados.

scope aceita quatro valores significativos:

Valor	O cabeçalho se aplica a…
`col`	cada célula na coluna abaixo dele
`row`	cada célula na linha à sua direita
`colgroup`	um grupo de colunas (usado com `<colgroup>`)
`rowgroup`	um grupo de linhas (ex.: todas as linhas dentro de um `<tbody>`)

Uma tabela pode ter cabeçalhos em ambas as direções. Cabeçalhos de coluna ficam no <thead> com scope="col"; o rótulo inicial de uma linha é um <th scope="row"> dentro do <tbody>.

Exemplo de uma tabela totalmente acessível usando scope

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      table {
        border-collapse: collapse;
        margin: 30px auto;
      }
      th,
      td {
        padding: 10px;
        border: 1px solid #666;
        text-align: left;
      }
      thead th,
      tbody th {
        background-color: #1c87c9;
        color: #fff;
      }
    </style>
  </head>
  <body>
    <table>
      <caption>Weekly study plan</caption>
      <thead>
        <tr>
          <th scope="col">Day</th>
          <th scope="col">Topic</th>
          <th scope="col">Hours</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th scope="row">Monday</th>
          <td>HTML</td>
          <td>2</td>
        </tr>
        <tr>
          <th scope="row">Tuesday</th>
          <td>CSS</td>
          <td>3</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

Quando um usuário de leitor de tela chega à célula contendo 3, ele pode anunciar "Tuesday, Hours, 3" porque o cabeçalho de coluna (scope="col") e o cabeçalho de linha (scope="row") são ambos inequívocos.

Acessibilidade

Por que scope importa

Uma tabela de dados é uma grade de relações: cada <td> pertence a um ou mais cabeçalhos. Usuários com visão leem essas relações visualmente; usuários de leitores de tela não. Marcar células de cabeçalho com <th> e fornecer um scope correto é o que permite à tecnologia assistiva pronunciar o cabeçalho correto em voz alta enquanto o usuário navega pela tabela. Sem isso, uma tabela complexa é apenas um fluxo de valores desconexos.

`<th>` vs. `<td role>`

Sempre use um elemento <th> real para cabeçalhos em vez de estilizar um <td> para parecer negrito. Um <th> carrega semântica de cabeçalho automaticamente; um <td> simples não, independentemente de como aparece. Recorrer a role="columnheader" ou role="rowheader" em um <td> deve ser um último recurso (por exemplo, quando não é possível alterar a marcação). O <th> nativo com scope é mais simples e tem melhor suporte.

O padrão `id` / `headers` para tabelas complexas

scope funciona bem para grades simples, mas não consegue expressar todas as relações em tabelas com abrangências irregulares ou múltiplos níveis de cabeçalho. Para essas situações, dê a cada cabeçalho um id e liste os ids de cabeçalho relevantes em cada célula de dados por meio do atributo headers (separados por espaço). Isso vincula explicitamente cada célula aos seus cabeçalhos.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      table { border-collapse: collapse; margin: 30px auto; }
      th, td { padding: 10px; border: 1px solid #666; }
    </style>
  </head>
  <body>
    <table>
      <thead>
        <tr>
          <th id="name">Name</th>
          <th id="q1">Q1</th>
          <th id="q2">Q2</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th id="alice" headers="name">Alice</th>
          <td headers="alice q1">120</td>
          <td headers="alice q2">150</td>
        </tr>
        <tr>
          <th id="bob" headers="name">Bob</th>
          <td headers="bob q1">90</td>
          <td headers="bob q2">110</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

Agora a célula com 150 está explicitamente associada tanto ao cabeçalho de linha Alice quanto ao cabeçalho de coluna Q2, de modo que um leitor de tela pode anunciar "Alice, Q2, 150" sem qualquer adivinhação.

O atributo `abbr`

Quando o texto completo de um cabeçalho é longo, o atributo abbr fornece uma versão curta. Alguns navegadores de voz leem essa forma abreviada (em vez de repetir o título longo) toda vez que anunciam uma célula naquela coluna, o que torna a navegação em tabelas largas muito menos tediosa.

<th scope="col" abbr="HDI">Human Development Index</th>

O texto visível permanece "Human Development Index", mas um leitor de tela pode anunciar cada célula daquela coluna apenas como "HDI".

Atributos

Apenas abbr, colspan, rowspan, headers e scope são válidos em HTML5. As linhas marcadas como Obsoleto abaixo são atributos de apresentação desatualizados — não os utilize; alcance o mesmo resultado com CSS.

Atributo	Valor	Descrição
abbr	text	Define uma versão abreviada do conteúdo em uma célula de cabeçalho. Alguns agentes de usuário, como leitores de fala, podem anunciar esta forma curta em vez do texto completo.
colspan	number	Define o número de colunas que uma célula deve abranger. O valor deve ser um inteiro positivo. O valor padrão é 1.
headers	header_id	Uma lista separada por espaços de ids de células de cabeçalho que descrevem esta célula. Cada valor deve corresponder ao `id` de uma célula de cabeçalho. Usado para tabelas complexas.
rowspan	number	O número de linhas que uma célula deve abranger. O valor deve ser um inteiro positivo. O padrão é 1. Valores acima de 65534 são limitados a 65534.
scope	col / colgroup / row / rowgroup	Declara a quais células o cabeçalho se refere. Essencial para a acessibilidade de tabelas.
align	left / right / center	Obsoleto. Alinhava o conteúdo. Use CSS `text-align`.
axis	category_name	Obsoleto. Categorizava células com conteúdo semelhante.
background	url	Obsoleto. Definia uma imagem de fundo. Use CSS `background`.
bgcolor	rgb(x,x,x) / #xxxxxx / colorname	Obsoleto. Definia a cor de fundo. Use CSS `background-color`.
bordercolor	color	Obsoleto. Definia a cor da borda. Use CSS `border`.
char	character	Obsoleto. Alinhava o conteúdo a um caractere (apenas com `align="char"`).
charoff	number	Obsoleto. Deslocamento do caractere de alinhamento.
height	% / pixels	Obsoleto. Definia a altura da célula. Use CSS `height`.
nowrap	nowrap	Obsoleto. Impedia a quebra de linha do conteúdo. Use CSS `white-space: nowrap`.
sorted	(various)	Obsoleto. Definia a direção de ordenação de uma coluna.
valign	top / middle / bottom / baseline	Obsoleto. Alinhamento vertical. Use CSS `vertical-align`.
width	% / pixels	Obsoleto. Definia a largura da célula. Use CSS `width`.

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

Como estilizar uma tag HTML `<th>`

th {
  background-color: #f2f2f2;
  color: #333;
  padding: 8px;
  border: 1px solid #ccc;
}

Tags relacionadas

<table> — o contêiner da tabela
<tr> — uma linha da tabela
<td> — uma célula de dados padrão
<thead> — agrupa a(s) linha(s) de cabeçalho
<tbody> — agrupa as linhas do corpo
<caption> — um título de tabela

Prática

Qual é o objetivo principal do elemento HTML th?

Define uma célula de cabeçalho, conferindo-lhe semântica de cabeçalho que a tecnologia assistiva pode associar às células de dados relacionadas.Representa uma célula de dados comum no corpo de uma tabela.Agrupa o conteúdo do rodapé em uma tabela longa.Sua única função é renderizar o texto em negrito.Cria uma nova linha de tabela.

Sintaxe

Exemplo da tag HTML <th>: