<caption>

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

O elemento HTML caption especifica a legenda (ou título) de uma tabela.

Experimente

<table>
  <caption>
    He-Man and Skeletor facts
  </caption>
  <tr>
    <td></td>
    <th scope="col" class="heman">He-Man</th>
    <th scope="col" class="skeletor">Skeletor</th>
  </tr>
  <tr>
    <th scope="row">Role</th>
    <td>Hero</td>
    <td>Villain</td>
  </tr>
  <tr>
    <th scope="row">Weapon</th>
    <td>Power Sword</td>
    <td>Havoc Staff</td>
  </tr>
  <tr>
    <th scope="row">Dark secret</th>
    <td>Expert florist</td>
    <td>Cries at romcoms</td>
  </tr>
</table>

caption {
  caption-side: bottom;
  padding: 10px;
  font-weight: bold;
}

table {
  border-collapse: collapse;
  border: 2px solid rgb(140 140 140);
  font-family: sans-serif;
  font-size: 0.8rem;
  letter-spacing: 1px;
}

th,
td {
  border: 1px solid rgb(160 160 160);
  padding: 8px 10px;
}

th {
  background-color: rgb(230 230 230);
}

td {
  text-align: center;
}

tr:nth-child(even) td {
  background-color: rgb(250 250 250);
}

tr:nth-child(odd) td {
  background-color: rgb(240 240 240);
}

.heman {
  font: 1.4rem molot;
  text-shadow:
    1px 1px 1px #fff,
    2px 2px 1px #000;
}

.skeletor {
  font: 1.7rem rapscallion;
  letter-spacing: 3px;
  text-shadow:
    1px 1px 0 #fff,
    0 0 9px #000;
}
Categoria de conteúdo Nenhuma.
Conteúdo permitido Flow content.
Omissão de tag A tag final pode ser omitida se o elemento não for seguido imediatamente por um espaço em branco ASCII ou um comentário.
Elementos pais permitidos Um elemento <table>, como seu primeiro filho.
Função ARIA implícita Nenhuma função correspondente
Permitted ARIA roles No role permitted
DOM interface HTMLTableCaptionElement

Atributos

Este elemento inclui os atributos globais.

Atributos obsoletos

Os seguintes atributos são obsoletos e não devem ser usados. Estão documentados abaixo apenas como referência ao atualizar o código, e interesse histórico.

align

Esse atributo enumerado indica como a legenda deve ser alinhada em relação à tabela. Ele pode ter um dos seguintes valores:

left

A legenda é exibida à esquerda da tabela.

top

A legenda é exibida acima da tabela.

A legenda é exibida à direita da tabela.

bottom

A legenda é exibida abaixo da tabela.

Aviso: Não use este atributo já que ele foi depreciado: O elemento <caption> deve ser estilizado usando as propriedades CSS. Para dar um efeito similar ao atributo align, use as propriedades CSS caption-side e text-align.

Notas de uso

Se utilizado, o elemento <caption> deve ser o primeiro filho de seu elemento <table> pai.

Quando o elemento <table> que contém o <caption> é o único descendente de um elemento <figure>, você deve usar o <figcaption> elemento em vez de <caption>.

Um background-color na tabela não incluirá a legenda. Adicione um background-color ao elemento <caption> também se você deseja que a mesma cor de fundo esteja por trás de ambos.

Exemplo

Esse exemplo simples apresenta uma tabela que inclui uma legenda

html
<table>
  <caption>
    Exemplo de Legenda
  </caption>
  <tr>
    <th>Login</th>
    <th>Email</th>
  </tr>
  <tr>
    <td>usuario1</td>
    <td>usuario1@dominio.com</td>
  </tr>
  <tr>
    <td>usuario2</td>
    <td>usuario2@dominio.com</td>
  </tr>
</table>

Especificações

Specification
HTML
# the-caption-element

Compatibilidade com navegadores

BCD tables only load in the browser

Veja também