HTML moderno: estrutura, semântica e acessibilidade
Tabelas são adequadas para dados com relações entre linhas e colunas. Não use tabelas para montar o layout da página. Uma boa tabela possui título, cabeçalhos identificáveis e leitura coerente quando estilos não estão disponíveis.
Estrutura básica
<caption> dá um nome à tabela. <thead> e <tbody> agrupam linhas; <th> identifica cabeçalhos e scope explicita se eles se aplicam à coluna ou à linha.
<table>n <caption>Planos mensais</caption>n <thead>n <tr><th scope="col">Plano</th><th scope="col">Projetos</th></tr>n </thead>n <tbody>n <tr><th scope="row">Essencial</th><td>3</td></tr>n <tr><th scope="row">Pro</th><td>10</td></tr>n </tbody>n</table>Células mescladas
colspan e rowspan são válidos, mas aumentam a complexidade das associações. Em tabelas extensas ou com múltiplos níveis, teste com leitor de tela e considere dividir a informação em tabelas menores.
Responsividade
Uma solução simples é colocar a tabela em um contêiner com rolagem horizontal e um rótulo que indique essa possibilidade. Evite ocultar colunas essenciais. Em alguns casos, uma lista de cartões é uma visualização alternativa melhor para telas estreitas, desde que preserve as relações.
Checklist de qualidade
- A tabela representa dados, não layout.
- Existe caption e todos os cabeçalhos usam th.
- As relações continuam compreensíveis em zoom e tela estreita.
Pratique agora
Crie uma tabela de três produtos com preço e disponibilidade. Inclua caption, cabeçalhos de linha e coluna e teste com CSS desativado.
