Tabelas no HTML

Tempo de leitura: 4 minutos

As tabelas HTML são elementos essenciais para apresentar dados de forma organizada e estruturada em páginas web. Elas são particularmente úteis para exibir informações em linhas e colunas, facilitando a compreensão e a comparação de dados.

Neste artigo, vamos explorar a estrutura das tabelas HTML, seus elementos principais e a importância da semântica na criação de tabelas acessíveis e otimizadas para mecanismos de busca.

Estrutura Básica de uma Tabela HTML

A estrutura básica de uma tabela HTML é composta pelas seguintes tags:

• <table>: Define o início e o fim da tabela.
• <tr>: Define uma linha dentro da tabela.
• <th>: Define o cabeçalho de uma coluna.
• <td>: Define uma célula de dados.

Exemplo:

HTML

<table>
  <caption>Tabela de Frutas</caption>
  <tr>
    <th>Fruta</th>
    <th>Cor</th>
    <th>Sabor</th>
  </tr>
  <tr>
    <td>Maçã</td>
    <td>Vermelha</td>
    <td>Doce</td>
  </tr>
  <tr>
    <td>Banana</td>
    <td>Amarela</td>
    <td>Doce</td>
  </tr>
</table>

Tabela de Frutas

Fruta	Cor	Sabor
Maçã	Vermelha	Doce
Banana	Amarela	Doce

Elementos Adicionais

Além das tags básicas, existem outros elementos que podem ser utilizados para melhorar a estrutura e a apresentação das tabelas:

• <caption>: Define um título para a tabela.
• <colgroup>: Agrupa um conjunto de colunas.
• <col>: Define propriedades para uma coluna específica.
• <thead>: Define a seção de cabeçalho da tabela.
• <tbody>: Define o corpo da tabela.
• <tfoot>: Define o rodapé da tabela.

Criando uma Tabela HTML Completa e Semântica

Antes de apresentarmos o exemplo completo, vamos revisar rapidamente as principais tags utilizadas para criar tabelas em HTML:

• <table>: Define o início e o fim da tabela.
• <caption>: Define um título para a tabela.
• <thead>: Define a seção de cabeçalho da tabela.
• <tbody>: Define o corpo da tabela, onde ficam os dados.
• <tfoot>: Define o rodapé da tabela, onde podem aparecer totais ou outros resumos.
• <tr>: Define uma linha dentro da tabela.
• <th>: Define uma célula de cabeçalho.
• <td>: Define uma célula de dados.
• <colgroup>: Agrupa um conjunto de colunas.
• <col>: Define propriedades para uma coluna específica.

Exemplo Completo:

HTML

<table>
  <caption>Tabela de Vendas Mensais</caption>
  <colgroup>
    <col>
    <col span="2">
  </colgroup>
  <thead>
    <tr>
      <th scope="col">Mês</th>
      <th scope="col" colspan="2">Vendas</th>
    </tr>
    <tr>
      <th></th>
      <th>Produto A</th>
      <th>Produto B</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Janeiro</td>
      <td>100</td>
      <td>150</td>
    </tr>
    <tr>
      <td>Fevereiro</td>
      <td>120</td>
      <td>180</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th>Total</th>
      <td colspan="2">650</td>
    </tr>
  </tfoot>
</table>

Tabela de Vendas Mensais

Mês	Vendas
	Produto A	Produto B
Janeiro	100	150
Fevereiro	120	180
Total	650

Explicação:

• <caption>: Define o título da tabela, que é importante para a acessibilidade e para os mecanismos de busca.
• <colgroup>: Agrupa as duas primeiras colunas e aplica um estilo de fundo.
• <col>: Define que as duas primeiras colunas serão agrupadas.
• <thead>: Contém o cabeçalho da tabela, com as colunas “Mês”, “Produto A” e “Produto B”.
• <tbody>: Contém os dados da tabela, com as vendas de cada produto por mês.
• <tfoot>: Contém o rodapé da tabela, com o total de vendas.
• scope=”col”: Indica que os cabeçalhos se referem a colunas.
• colspan=”2″: Une duas células em uma única.

Boas Práticas de SEO:

• Título Descritivo: O título da tabela (<caption>) deve ser claro e conciso, descrevendo o conteúdo da tabela.
• Atributos Semânticos: O uso de <th>, <thead>, <tbody> e <tfoot> ajuda os mecanismos de busca a entender a estrutura da tabela.
• Atributos scope e colspan: Esses atributos ajudam os leitores de tela e os mecanismos de busca a entender as relações entre as células da tabela.
• CSS: Utilize CSS para formatar a tabela e torná-la visualmente mais atraente.

Quando Usar Tabelas

Tabelas são ideais para apresentar dados tabulares, como listas de produtos, resultados de pesquisas e informações comparativas. No entanto, não utilize tabelas para layout. Para criar layouts complexos, utilize CSS.

Conclusão

As tabelas são uma ferramenta poderosa para organizar e apresentar dados em páginas web. Ao utilizar as tags corretas e seguir as boas práticas de semântica, você pode criar tabelas acessíveis, otimizadas para mecanismos de busca e visualmente atraentes.

Dicas para utilizar tabelas:

• Teste suas tabelas com diferentes navegadores e dispositivos.
• Utilize tabelas apenas para dados tabulares.
• Utilize os elementos semânticos corretos.
• Forneça títulos descritivos para as tabelas e colunas.
• Utilize CSS para formatar a aparência das tabelas.

Toda jornada tem um início, e o início para se tornar um desenvolvedor web é dominar as seguintes tecnologias, que você encontra aqui mesmo:

E se você gosta do nosso conteúdo, não deixe de contribuir adquirindo os serviços e produtos dos nossos apoiadores e empresas que somos associados: