<caption>

Este elemento inclui os atributos globais.

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 Deprecated

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.

right

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.

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.

Esse exemplo simples apresenta uma tabela que inclui uma legenda

<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>

caption {
  caption-side: top;
}
table {
  border-collapse: collapse;
  border-spacing: 0px;
}
table,
th,
td {
  border: 1px solid black;
}

• Propriedades CSS que podem ser especialmente úteis para estilizar o elemento <caption>:

  • text-align, caption-side.