<caption>
Baseline Widely available *
This feature is well established and works across many devices and browser versions. It’s been available across browsers since julho de 2015.
* Some parts of this feature may have varying levels of support.
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.
alignDeprecated-
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 atributoalign, use as propriedades CSScaption-sideetext-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
<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
Veja também
- Propriedades CSS que podem ser especialmente úteis para estilizar o elemento
<caption>: