Tag HTML <caption>

Este artigo discute a tag de legenda html . Esperando que satisfaça os requisitos para o aprendizado.

A tag <caption> em HTML é usada para adicionar uma legenda ou título a uma tabela HTML. A tag <caption> é um elemento filho do elemento <table> e deve vir imediatamente após a tag <table> de abertura .

Aqui está uma tabela com uma legenda:

Example

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html>
<body>
<table>
<caption>Wedding budget</caption>
<tr>
<th>car</th>
<th>Food</th>
</tr>
<tr>
<td>dresses</td>
<td>$8000</td>
</tr>
</table>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Use CSS para posicionar as legendas das tabelas:

Example

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!DOCTYPE html>
<html>
<body>
<table>
<caption style="text-align:center">Wedding Budget</caption><tr>
<th>Wedding</th><th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$8000</td>
</tr>
</table>
<table>
<caption style="caption-side:bottom">My budget</caption>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$8000</td>
</tr>
</table>
</body></html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Índice-

Tag HTML <caption>:

Usos e Definição

A tag Html Caption <caption> é usada para especificar a legenda da tabela.

Para exibir uma legenda, insira a tag <caption> imediatamente após a tag <table> .

Aviso: A legenda de uma tabela será alinhada ao centro acima de uma tabela por padrão quando colocada acima dela. As propriedades CSS text-align e caption-side podem ser usadas para alinhar e colocar legendas.

Atributos Globais

Os atributos globais do HTML funcionam com a tag de legenda <caption> .

Atributos do Evento

Os atributos do evento HTML também são acessíveis pela tag <caption> .

Configurações de CSS por padrão

Na maioria dos navegadores, a tag <caption> renderiza os seguintes valores padrão:

Example

1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html>
<body>
<p>
caption {
display: table-caption;
text-align: center;
}
</p>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Compatibilidade do navegador

Elemento
<legenda>	Sim	Sim	Sim	Sim	Sim

Benefícios das tags de legenda HTML

A tag <caption> em HTML tem vários benefícios:

A tag <caption> fornece uma maneira de adicionar um título ou descrição a uma tabela HTML. Isso pode ajudar os usuários a entender o conteúdo da tabela e sua finalidade.
Adicionar uma tag <caption> a uma tabela pode melhorar a acessibilidade para usuários que dependem de leitores de tela ou outras tecnologias assistivas para acessar o conteúdo da web. A tag <caption> fornece uma maneira de descrever o conteúdo da tabela de maneira mais acessível.
Incluir uma tag <caption> em sua tabela HTML também pode ajudar na otimização do mecanismo de pesquisa (SEO). Os mecanismos de pesquisa usam o conteúdo da tag <caption> para entender o conteúdo da tabela e indexá-la adequadamente.
Você pode usar CSS para estilizar a tag <caption> e destacá-la visualmente do resto da tabela. Isso permite que você personalize a aparência da legenda para combinar com o design do seu site.

Se você achou este artigo informativo, compartilhe essas informações valiosas com seus amigos clicando nos links abaixo.

Nós valorizamos o seu feedback.

Tag HTML <caption>

Example

Example

Usos e Definição

Atributos Globais

Atributos do Evento

Configurações de CSS por padrão

Example

Compatibilidade do navegador

Benefícios das tags de legenda HTML

Sentindo entediado?