HTML - Cabeçalhos e Legendas

Definindo Cabeçalhos de Tabela

Em tabelas HTML, os cabeçalhos rotulam colunas ou linhas de dados. Para definir um cabeçalho de tabela, use a tag <th>. A tag <th> é colocada dentro da tag <tr> (linha da tabela), como células regulares da tabela (<td>). A principal diferença entre as tags <th> e <td> é que <th> é usada para células de cabeçalho, que geralmente têm peso de fonte em negrito e alinhamento de texto centralizado por padrão.

<table>
  <tr>
    <th>Cabeçalho 1</th>
    <th>Cabeçalho 2</th>
    <th>Cabeçalho 3</th>
  </tr>
  <tr>
    <td>Dado 1</td>
    <td>Dado 2</td>
    <td>Dado 3</td>
  </tr>
</table>

A primeira linha contém três tags <th>, definindo os cabeçalhos para cada coluna. A segunda linha contém tags <td> regulares com os dados reais.

Atributos de Cabeçalho de Tabela

Os cabeçalhos de tabela têm alguns atributos especiais que podem ser usados para melhorar a estrutura e a acessibilidade da tabela:

1. colspan: O atributo colspan permite que uma célula de cabeçalho se estenda por várias colunas. Por exemplo, <th colspan="2">Cabeçalho</th> criaria uma célula de cabeçalho que se estende por duas colunas.

2. rowspan: O atributo rowspan permite que uma célula de cabeçalho se estenda por várias linhas. Por exemplo, <th rowspan="3">Cabeçalho</th> criaria uma célula de cabeçalho que se estende por três linhas.

3. scope: O atributo scope é usado para associar uma célula de cabeçalho às células de dados que ela descreve. Isso é importante para a acessibilidade, pois ajuda os leitores de tela a entender a relação entre cabeçalhos e dados. O atributo scope pode ter os seguintes valores:

   • row: O cabeçalho se aplica à linha.
   • col: O cabeçalho se aplica à coluna.
   • rowgroup: O cabeçalho se aplica a um grupo de linhas.
   • colgroup: O cabeçalho se aplica a um grupo de colunas.

<table>
  <tr>
    <th colspan="2">Cabeçalho 1 e 2</th>
    <th>Cabeçalho 3</th>
  </tr>
  <tr>
    <th rowspan="2" scope="row">Cabeçalho 4</th>
    <td>Dado 1</td>
    <td>Dado 2</td>
  </tr>
  <tr>
    <td>Dado 3</td>
    <td>Dado 4</td>
  </tr>
</table>

A primeira célula de cabeçalho se estende por duas colunas usando colspan, a quarta célula de cabeçalho se estende por duas linhas usando rowspan, e o atributo scope é usado para indicar que o quarto cabeçalho se aplica à linha.

O uso de cabeçalhos de tabela com atributos apropriados ajuda a criar tabelas bem estruturadas e acessíveis em HTML.

Adicionando uma Legenda a uma Tabela

Uma legenda de tabela é uma breve descrição do conteúdo ou propósito da tabela. Para adicionar uma legenda a uma tabela HTML, use a tag <caption>. A tag <caption> deve ser colocada logo após a tag de abertura <table>, antes de quaisquer elementos <tr>, <th> ou <td>.

<table>
  <caption>Dados de Salário dos Funcionários</caption>
  <tr>
    <th>Nome</th>
    <th>Cargo</th>
    <th>Salário</th>
  </tr>
  <tr>
    <td>João Silva</td>
    <td>Gerente</td>
    <td>R$80.000</td>
  </tr>
  <tr>
    <td>Maria Santos</td>
    <td>Desenvolvedora</td>
    <td>R$75.000</td>
  </tr>
</table>

Estilizando Legendas de Tabelas

Por padrão, as legendas de tabelas são exibidas acima da tabela e centralizadas. No entanto, você pode usar CSS para estilizar e posicionar a legenda conforme necessário.

Para estilizar uma legenda de tabela, direcione o elemento <caption> em seu CSS:

table caption {
  font-size: 1.2em;
  font-weight: bold;
  color: #333;
  margin-bottom: 10px;
}

Para posicionar a legenda abaixo da tabela em vez de acima, use a propriedade CSS caption-side:

table caption {
  caption-side: bottom;
}

A propriedade caption-side aceita dois valores: top (padrão) e bottom.

Ao usar a tag <caption> e estilizá-la com CSS, você pode fornecer uma descrição clara e atraente para suas tabelas HTML.