Tag HTML <caption>
A tag HTML <caption> define um título para uma tabela. Deve ser o primeiro filho de <table>. Aprenda a sintaxe, estilização e acessibilidade.
A tag <caption> é utilizada para definir um título ou descrição para uma tabela. Ela não é um cabeçalho de coluna (use <th> para isso). A tag em si deve estar dentro do elemento <table> imediatamente após a tag de abertura, e deve ser o primeiro filho do elemento <table> pai. Apenas uma legenda é permitida por tabela.
Por padrão, a legenda de uma tabela é centralizada acima da tabela. Você pode usar as propriedades text-align e caption-side para alinhá-la e posicioná-la.
Quando usar <caption> vs <figcaption>
Existem duas formas de rotular uma tabela, e a correta depende do contêiner da tabela:
- Use
<caption>quando a tabela estiver sozinha. A legenda pertence ao interior do<table>e está programaticamente vinculada a ele. - Use
<figcaption>quando a tabela for o único conteúdo de um elemento<figure>. Nesse caso, o figure fornece a rotulação, portanto um<caption>separado não é utilizado.
<figure>
<table>
<thead>
<tr>
<th>Planet</th>
<th>Diameter (km)</th>
</tr>
</thead>
<tbody>
<tr>
<td>Earth</td>
<td>12,742</td>
</tr>
<tr>
<td>Mars</td>
<td>6,779</td>
</tr>
</tbody>
</table>
<figcaption>Diameters of the inner planets</figcaption>
</figure>Aqui a tabela é o único conteúdo do figure, portanto a legenda fica no <figcaption> (que, ao contrário do <caption>, também pode ser colocado após a tabela).
Sintaxe
A tag <caption> vem em pares. O conteúdo é escrito entre as tags de abertura (<caption>) e fechamento (</caption>).
Exemplo da tag HTML <caption>:
Tag HTML <caption>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
table { width: 400px; border-collapse: collapse; }
th, td { border: 1px solid #000; padding: 4px; }
</style>
</head>
<body>
<table>
<caption>Evaluation paper</caption>
<thead>
<tr>
<th>Student</th>
<th>1st exam</th>
<th>2nd exam</th>
</tr>
</thead>
<tbody>
<tr>
<td>John Johnson</td>
<td>75</td>
<td>65</td>
</tr>
<tr>
<td>Mary Nicolson</td>
<td>55</td>
<td>80</td>
</tr>
<tr>
<td>Max Thomson</td>
<td>60</td>
<td>47</td>
</tr>
</tbody>
</table>
</body>
</html>Resultado
A tabela renderizada mostra a legenda "Evaluation paper" centralizada acima dos dados:
Exemplo da tag HTML <caption> com a propriedade CSS caption-side:
Exemplo da tag HTML <caption> com a propriedade CSS caption-side
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
caption {
background: #1c87c9;
color: #fff;
caption-side: bottom;
}
table,
th,
td {
border: 1px solid #1c87c9;
padding: 3px;
}
td {
background-color: #cccccc;
color: #666666;
}
</style>
</head>
<body>
<h2>Caption-side property example</h2>
<p>Here the caption-side is set to "bottom":</p>
<table>
<caption>Some title here</caption>
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Some text</td>
<td>Some text</td>
</tr>
</tbody>
</table>
</body>
</html>Atributos
| Atributo | Valor | Descrição |
|---|---|---|
| align | left, right, center, top, bottom | Alinha a legenda horizontal ou verticalmente. Não utilizado no HTML5. Use a propriedade CSS caption-side em vez disso. |
A tag <caption> suporta os Atributos Globais e os Atributos de Evento.
Acessibilidade: por que <caption> é importante
Um <caption> é mais do que um título visível — é o nome acessível da tabela. Como o elemento é filho de <table>, os navegadores associam os dois automaticamente; você não precisa de aria-labelledby nem de nenhuma marcação extra. Quando um leitor de tela entra na tabela, ele anuncia a legenda primeiro, fornecendo contexto ao usuário ("Evaluation paper, tabela com 3 colunas") antes de ler qualquer célula. Sem uma legenda, o usuário ouve uma série de números sem saber o que descrevem.
Quando o título deve ser ocultado visualmente
Às vezes um título já está ao lado da tabela e uma legenda visível ficaria redundante. Não remova a legenda — isso elimina o contexto para usuários não visuais. Em vez disso, mantenha o <caption> e oculte-o visualmente com CSS, deixando-o na árvore de acessibilidade:
caption.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
}Um aria-label na <table> também pode fornecer um nome acessível, mas <caption> é preferível: funciona sem ARIA, faz parte do texto do documento (portanto é traduzido e pesquisável), e a técnica de ocultação visual mantém-o legível para desenvolvedores com visão. Recorra ao aria-label somente quando não for possível adicionar uma legenda na marcação.
<caption> substitui o atributo summary obsoleto
O HTML mais antigo possuía um atributo summary na <table> que continha uma descrição para usuários de leitores de tela. Ele nunca era visível e está obsoleto no HTML5 — não o use. O substituto moderno e acessível é um <caption> para o título curto, mais um parágrafo regular (opcionalmente vinculado com aria-describedby) quando uma explicação mais longa da estrutura da tabela for necessária.
Como estilizar a tag <caption>
A legenda é uma caixa em nível de bloco que pode ser estilizada como qualquer outro elemento. Os ajustes mais comuns são sua posição em relação à tabela, seu alinhamento e sua ênfase:
caption {
caption-side: bottom; /* move the caption below the table (default is top) */
text-align: left; /* override the default centering */
font-weight: bold;
padding: 6px;
color: #1c87c9;
}Consulte as propriedades caption-side e text-align para mais detalhes, e a tag <table> para a marcação completa de tabelas.