<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 elementoHTMLcaption especifica a legenda (ou título) de uma tabela.

Experimente

<table>  <caption>    He-Man and Skeletor facts  </caption>  <tr>    <td></td>    <th scope="col">He-Man</th>    <th scope="col">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 osatributos 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 atributoenumerado 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 propriedadesCSS. Para dar um efeito similar ao atributoalign, use as propriedadesCSS caption-side etext-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>.

Umbackground-color na tabela não incluirá a legenda. Adicione umbackground-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>

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

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>:
- text-align,caption-side.

Help improve MDN

Learn how to contribute

This page was last modified on⁨1 de jan. de 1970⁩ byMDN contributors.

View this page on GitHub •Report a problem with this content

Movatterモバイル変換

<caption>

Help improve MDN