As tabelas em HTML são estruturas utilizadas para organizar e exibir dados de forma tabular, ou seja, em linhas e colunas. Elas são ideais para apresentar informações comparativas, dados numéricos, listas organizadas e relatórios.
Em HTML, as tabelas são criadas com a tag <table> e estruturadas com outras tags semânticas, como:
- <thead> - cabeçalho da tabela
- <tbody> - corpo da tabela
- <tfoot> - rodapé da tabela
- <tr> - linha da tabela
- <th> - célula de cabeçalho
- <td> - célula de dados
O uso correto dessas tags melhora a acessibilidade, a organização do código e o SEO, pois facilita a leitura por mecanismos de busca e leitores de tela.
Estrutura básica de uma tabela em HTML
<table>
<tr>
<th>Nome</th>
<th>Idade</th>
<th>Cidade</th>
</tr>
<tr>
<td>Ana</td>
<td>25</td>
<td>São Paulo</td>
</tr>
<tr>
<td>Carlos</td>
<td>30</td>
<td>Rio de Janeiro</td>
</tr>
</table>
Explicação:
- <th> define os títulos das colunas
- <td> contém os dados
- <tr> cria cada linha da tabela
Exemplo de tabela HTML com estrutura semântica (SEO e acessibilidade)
<table>
<thead>
<tr>
<th>Produto</th>
<th>Preço</th>
<th>Disponibilidade</th>
</tr>
</thead>
<tbody>
<tr>
<td>Notebook</td>
<td>R$ 3.500</td>
<td>Em estoque</td>
</tr>
<tr>
<td>Mouse</td>
<td>R$ 80</td>
<td>Esgotado</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3">Valores sujeitos a alteração</td>
</tr>
</tfoot>
</table>
Benefícios dessa estrutura:
- Melhor indexação pelos buscadores
- Código mais organizado
- Maior acessibilidade (WCAG)
Boas práticas de SEO ao usar tabelas em HTML
- Use tabelas apenas para dados tabulares, não para layout
- Utilize <th> corretamente para títulos
- Adicione textos explicativos antes da tabela
- Combine com CSS para estilização
- Sempre que possível, use <caption> para descrever a tabela
Exemplo com <caption>:
<table>
<caption>Lista de alunos matriculados em 2025</caption>
<tr>
<th>Aluno</th>
<th>Curso</th>
</tr>
<tr>
<td>João</td>
<td>Engenharia</td>
</tr>
</table>