Tabelas HTML

Q: O que são colspan e rowspan ? Como uso?

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.

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.

Estrutura Básica de Tabela

Uma tabela mínima requer pelo menos uma <table>, linhas (<tr>) e células de dados (<td>):

Exemplo

HTML

<table border="1" width="100%">
<tr>
<th>Nome</th>
<th>Idade</th>
<th>Cidade</th>
</tr>
<tr>
<td>Alice</td>
<td>25</td>
<td>São Paulo</td>
</tr>
<tr>
<td>Bob</td>
<td>30</td>
<td>Rio de Janeiro</td>
</tr>
</table>

▶ Experimente

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

HTML

<table border="1" width="100%">
<tr>
<th align="left">Nome</th>
<th width="60%">Biografia</th>
</tr>
<tr>
<td valign="top">Alice</td>
<td>Desenvolvedora Frontend</td>
</tr>
</table>

▶ 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".

Mesclagem de Células

Use colspan para mesclar células horizontalmente e rowspan para mesclar células verticalmente:

Exemplo

HTML

<table border="1">
<tr>
<th>Nome</th>
<th colspan="2">Informações de Contato</th>
</tr>
<tr>
<td rowspan="2">Alice</td>
<td>E-mail</td>
<td>alice@exemplo.com</td>
</tr>
<tr>
<td>Telefone</td>
<td>555-0000-0000</td>
</tr>
</table>

▶ Experimente

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

HTML

<table border="1">
<caption>Relatório de Vendas 2026</caption>
<thead>
<tr>
<th>Trimestre</th>
<th>Receita</th>
<th>Lucro</th>
</tr>
</thead>
<tbody>
<tr><td>T1</td><td>R$ 100 mil</td><td>R$ 20 mil</td></tr>
<tr><td>T2</td><td>R$ 120 mil</td><td>R$ 25 mil</td></tr>
</tbody>
<tfoot>
<tr><td>Total</td><td>R$ 220 mil</td><td>R$ 45 mil</td></tr>
</tfoot>
</table>

▶ 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é
colspan mescla células horizontalmente; rowspan mescla células verticalmente
Nunca use tabelas para layout de página (isso é trabalho do CSS); tabelas servem apenas para exibir dados

📝 Atividades

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).