HTML caption: título da tabela e posição acima ou abaixo

O HTML <caption> fornece o título ou uma breve descrição de toda a tabela. Coloque-o como o primeiro elemento filho dentro de table e use o CSS caption-side para controlar se ele aparece acima ou abaixo da tabela.

Distinga os títulos da tabela dos cabeçalhos de coluna e linha

Um caption explica sobre o que é a tabela; th identifica uma coluna ou linha específica. Substituir a legenda por um td na primeira linha altera a relação entre o título da tabela e suas células de dados. Use um assunto e escopo específicos em vez de apenas “Tabela 1” para que os leitores possam identificar o propósito ao escanear ou navegar com tecnologia assistiva.

Use apenas um caption por table. Adicione interpretações detalhadas, avisos ou fontes de dados ao texto próximo em vez de dividir o título da tabela entre múltiplos elementos caption.

Exemplo completo: verifique a posição da legenda

Salve o código como table-caption.html e abra-o em um navegador. Os números são dados de prática usados para explicar a estrutura da tabela.

<!doctype html>
<html lang="pt">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Posicionar o título de uma tabela</title>
  <style>
    body { max-width: 36rem; margin: 1rem auto; padding: 0 1rem; }
    .jb-table-scroll { overflow-x: auto; }
    table { width: 100%; border-collapse: collapse; }
    th, td { padding: 0.6rem; border: 1px solid #8c9399; text-align: left; }
    caption { caption-side: top; text-align: left; padding: 0.6rem 0; font-weight: bold; }
  </style>
</head>
<body>
  <h1>Dados de prática</h1>
  <div class="jb-table-scroll">
    <table class="jb-table-01">
      <caption>Número de documentos de exemplo por categoria em uma biblioteca de prática</caption>
      <thead>
        <tr><th scope="col">Categoria</th><th scope="col">Documentos</th></tr>
      </thead>
      <tbody>
        <tr><th scope="row">HTML</th><td>3</td></tr>
        <tr><th scope="row">CSS</th><td>2</td></tr>
      </tbody>
    </table>
  </div>
</body>
</html>

A legenda Número de documentos de exemplo por categoria em uma biblioteca de prática aparece acima da tabela, seguida pelas colunas Categoria e Documentos e duas linhas de dados. O caption explica o propósito da tabela, enquanto elementos th com scope identificam seus cabeçalhos de coluna e linha.

Altere o CSS caption-side: top para caption-side: bottom e recarregue a página. O título se move para baixo da tabela, mantendo-se como seu primeiro elemento filho no HTML. Altere de volta para top para restaurar a posição original. Use text-align para alinhamento horizontal em vez do obsoleto atributo align.

Escreva legendas de tabela úteis

Um caption é um título visível e ajuda a fornecer um nome acessível para a tabela. O comportamento real com leitores de tela depende do navegador, da tecnologia assistiva e de outros atributos de acessibilidade. Adicionar apenas uma legenda não resolve todos os problemas de acessibilidade em uma tabela complexa: verifique também as relações entre cabeçalhos e células de dados e a ordem de leitura.

A cor de fundo de um elemento table não se aplica automaticamente ao elemento caption; defina seu fundo separadamente quando necessário. Se uma tabela for o único conteúdo de um elemento figure, use figcaption para identificar figure em vez de repetir o mesmo título em caption e figcaption. A referência de caption na MDN apresenta regras e exemplos.