Legenda da Tabela HTML: Um Guia Passo a Passo

Introdução

Em HTML, a tag <caption> é usada para adicionar uma legenda ou título a uma tabela. Este laboratório passo a passo irá guiá-lo através do processo de criação de uma tabela em HTML e da adição de uma legenda a ela.

Nota: Você pode praticar a codificação em index.html e aprender Como Escrever HTML no Visual Studio Code. Por favor, clique em 'Go Live' no canto inferior direito para executar o serviço web na porta 8080. Em seguida, você pode atualizar a aba Web 8080 para visualizar a página web.

Criar uma Tabela Básica

No primeiro passo, crie uma tabela básica com alguns dados usando a tag table. Aqui está um exemplo:

<table>
  <tr>
    <th>Name</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>John</td>
    <td>30</td>
  </tr>
  <tr>
    <td>Jane</td>
    <td>25</td>
  </tr>
</table>

Adicionar Legenda à Tabela

Para adicionar uma legenda à tabela, basta inserir a tag <caption> após a tag de abertura <table> e antes das linhas da tabela. Aqui está um exemplo:

<table>
  <caption>
    Employee Information
  </caption>
  <tr>
    <th>Name</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>John</td>
    <td>30</td>
  </tr>
  <tr>
    <td>Jane</td>
    <td>25</td>
  </tr>
</table>

Estilizar a Legenda

Para estilizar a legenda, use o atributo style dentro da tag <caption>. Aqui está um exemplo:

<table>
  <caption style="color: blue; font-size: 20px;">
    Employee Information
  </caption>
  <tr>
    <th>Name</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>John</td>
    <td>30</td>
  </tr>
  <tr>
    <td>Jane</td>
    <td>25</td>
  </tr>
</table>

Resumo

Em HTML, a tag <caption> é usada para adicionar uma legenda ou título a uma tabela. A tag <caption> é usada dentro da tag <table>, logo após a tag de abertura <table>. Uma legenda é uma breve descrição que fornece uma explicação concisa sobre a tabela. Ela ajuda a entender seu propósito. Para adicionar uma legenda à tabela, basta inserir a tag <caption> após a tag de abertura <table> e antes das linhas da tabela. Usando o atributo style dentro da tag <caption>, podemos estilizar a legenda.