HTML: Tabelas HTML
Última atualização: 2026-10-13
Tabelas (<table>) exibem dados estruturados em páginas web. Construídas a partir de linhas (<tr>) e células (<td> / <th>), são a escolha padrão para horários, tabelas de preços, relatórios de dados e conteúdos similares.
1. Estrutura Básica de Tabela
Uma tabela mínima requer pelo menos uma <table>, linhas (<tr>) e células de dados (<td>):
▶ Exemplo
▶ Experimente2. Atributos Comuns de Tabela
Você pode adicionar atributos básicos a <table> e <td> para controlar a aparência — no entanto, note que a maioria deles está obsoleta no HTML5, e o CSS é a alternativa recomendada. Mas entendê-los como iniciante ajuda a compreender como as tabelas são renderizadas:
▶ Exemplo
▶ Experimente| Atributo | Finalidade | Substituto CSS |
|---|---|---|
border |
Define a borda da tabela (ex.: border="1") |
CSS border |
width |
Largura da tabela ou célula | CSS width |
align |
Alinhamento horizontal (left / center / right) | CSS text-align |
valign |
Alinhamento vertical (top / middle / bottom) | CSS vertical-align |
⚠️ Nota Importante: Os atributos acima (
border, width, align, valign) estão obsoletos no HTML5. Embora border="1" ainda seja suportado pelos navegadores, isso é apenas para compatibilidade com código legado. Em projetos reais, use CSS para controlar o estilo das tabelas — por exemplo, propriedades como border, text-align e vertical-align. Nosso site já tem estilos de tabela pré-configurados no style.css, então você pode ver bordas organizadas sem precisar de border="1".
3. Mesclagem de Células
Use colspan para mesclar células horizontalmente e rowspan para mesclar células verticalmente:
▶ Exemplo
▶ Experimente4. Estrutura Semântica de Tabela
Além de <table> e <tr> básicos, o HTML oferece um conjunto de tags semânticas para organizar as várias partes de uma tabela:
▶ Exemplo
▶ Experimente<caption>Legenda da tabela, exibida acima da tabela por padrão<thead>Seção de cabeçalho da tabela, geralmente contendo as linhas de título das colunas<tbody>Corpo da tabela, contendo as linhas de dados<tfoot>Seção de rodapé da tabela, ideal para resumos ou estatísticas
❓ Perguntas Frequentes
P Posso usar tabelas para layout de página?
R Absolutamente não. Usar tabelas para layout é uma prática de 20 anos atrás — completamente obsoleta. Razões：1）Layouts com tabela são difíceis de manter — mudar um lugar pode afetar toda a página; 2）Tabelas não são ferramentas de layout semânticas — mecanismos de busca e leitores de tela interpretam mal a estrutura do conteúdo; 3）Layouts com tabela ficam horríveis em dispositivos móveis. Use tabelas apenas para exibir dados (como notas, listas de preços, cronogramas); use CSS Flexbox ou Grid para layout.
P O que são
colspan e rowspan? Como uso?R
colspan mescla células horizontalmente (através de colunas) e rowspan mescla verticalmente (através de linhas). Exemplo：<td colspan="2"> significa que esta célula abrange 2 colunas; <td rowspan="3"> significa que abrange 3 linhas. Cenários comuns：cabeçalho abrangendo múltiplas colunas (como "Total" cobrindo Português, Matemática, Ciências), títulos de grupo abrangendo múltiplas linhas. Importante：após mesclar, remova as células nas posições mescladas, ou a tabela ficará desalinhada.P
<thead>, <tbody> e <tfoot> são obrigatórios?R Não obrigatórios, mas fortemente recomendados. Eles semanticizam a estrutura da tabela：
<thead> envolve linhas de cabeçalho, <tbody> envolve linhas de dados, <tfoot> envolve linhas de resumo. Benefícios：1）Navegadores podem rolar cabeçalhos e dados independentemente; 2）Modo de impressão repete cabeçalhos em cada página; 3）Leitores de tela entendem melhor a estrutura da tabela; 4）Controle de estilização CSS mais fácil. Mesmo com apenas uma linha de dados, envolva em <tbody>.📖 Resumo
<table>define uma tabela;<tr>linhas;<th>cabeçalhos;<td>células de dados<caption>título da tabela;<thead>cabeçalho;<tbody>corpo;<tfoot>rodapécolspanmescla células horizontalmente;rowspanmescla células verticalmente- Nunca use tabelas para layout de página (isso é trabalho do CSS); tabelas servem apenas para exibir dados
📝 Exercícios
- Grade de horários: Use
<table>para criar uma grade de horários com cabeçalhos (Segunda a Sexta) e pelo menos 4 linhas de aulas. - Prática de mesclagem: Crie um boletim escolar com células mescladas — o cabeçalho tem "Nome do Aluno" e "Notas por Disciplina" (colspan cobrindo as colunas de Português, Matemática e Ciências).
