HTML5 Mestre dos Mestres • Aula Suprema 22

Mesclagem de Células

Mesclar células é engenharia geométrica de dados. Com colspan e rowspan, você representa relatórios, agendas, agrupamentos, totais e categorias sem quebrar a tabela.

Ir para o Desafio Mestre Aula 21 Voltar ao Módulo
NARRAÇÃO MESTRE

Narrador Mestre

Ouça a aula, revise blocos e estude com foco.

Pronto para narrar. As vozes disponíveis dependem do navegador e do sistema.

Abertura de impacto

A tabela simples acaba onde os dados reais começam

Dados corporativos raramente cabem em uma grade perfeita de uma célula para cada coluna. Eles se agrupam, atravessam períodos, ocupam categorias e precisam de totais. A mesclagem permite representar essa complexidade com precisão.

Promessa da aula:

Você vai dominar a expansão horizontal com colspan, a expansão vertical com rowspan e a contabilidade geométrica necessária para evitar tabelas quebradas.

Eixo horizontal

colspan: expansão de colunas

O atributo colspan faz uma célula ocupar o espaço de duas ou mais colunas na mesma linha. Ele é ideal para cabeçalhos de grupo, separadores de categoria e linhas de total. 

<tr>
  <th colspan="4">Dados Consolidados 2026</th>
</tr>

<tr>
  <td colspan="3">Soma Total das Vendas</td>
  <td>R$ 20.000</td>
</tr>
Fórmula Mestre:

Em cada linha, a soma de células simples + valores de colspan deve bater com o número total de colunas planejadas.

Eixo vertical

rowspan: expansão de linhas

O atributo rowspan faz uma célula ocupar o espaço de múltiplas linhas. Ele é ideal para agendas, categorias repetidas e relatórios agrupados. 

<tr>
  <th rowspan="2">08:00 - 10:00</th>
  <td>Treinamento HTML Mestre</td>
</tr>
<tr>
  <td>Laboratório Prático</td>
</tr>
Regra Mestre:

Se uma célula usa rowspan="2", a linha seguinte precisa remover a célula que foi ocupada pela expansão vertical.

Mesclagem combinada

Quando combinar colspan e rowspan

A combinação permite que uma célula ocupe uma área retangular da tabela. Use apenas quando a hierarquia real dos dados exigir esse agrupamento.

Exemplo visual: Relatório HTML com Células Mescladas
Categoria Dados Operacionais Resultado
Item Responsável Status Valor
Front-End HTML5 Mateus Concluído 10/10
Tabelas Mateus Concluído 10/10
Relatório Resumo técnico com células mescladas Validado Portfólio
Total de blocos avaliados 3

Antes de codar uma tabela assim, desenhe a grade no papel. Cada mesclagem engole células vizinhas, e essas células não devem continuar no HTML.

Boas práticas

Mesclagem sem destruir acessibilidade

  • Desenhe a grade lógica antes de codar.
  • Use colspan para agrupamentos horizontais reais.
  • Use rowspan para agrupamentos verticais reais.
  • Remova as células que foram ocupadas pela mesclagem.
  • Use caption para contextualizar tabelas complexas.
  • Use th quando a célula for cabeçalho ou categoria.
  • Use scope="col" e scope="row".
  • Evite mesclagem para layout visual.
  • Divida tabelas muito complexas em tabelas menores.
Desafio Mestre

Relatório HTML com Células Mescladas

Missão: criar o arquivo relatorio-celulas-mescladas.html como evidência real de domínio em relatórios tabulares complexos.

Requisitos obrigatórios

  • Doctype HTML5.
  • html lang="pt-BR".
  • Head completo com charset, viewport, title e meta description.
  • Body com header, main e footer.
  • H1 com “Relatório HTML com Células Mescladas”.
  • Section introdutória explicando quando usar mesclagem.
  • Uma tabela com caption.
  • thead com agrupamento usando colspan.
  • tbody com pelo menos 6 linhas de dados.
  • Pelo menos uma célula usando colspan corretamente.
  • Pelo menos uma célula usando rowspan corretamente.
  • Pelo menos uma célula th scope="row".
  • Pelo menos 4 cabeçalhos com th scope="col".
  • tfoot com linha de resumo usando colspan.
  • Explicação clara da diferença entre colspan e rowspan.
  • Explicação de como calcular a quantidade de células após mesclagem.
  • Lista com pelo menos 5 boas práticas para tabelas mescladas.
  • Footer com nome do aluno, ano e link para voltar ao topo.
Erros que reprovam:
  • Usar tabela para layout.
  • Deixar células sobrando após colspan.
  • Esquecer de remover célula ocupada por rowspan.
  • Mesclar sem necessidade real de dados.
  • Não usar th, scope ou caption em tabela complexa.
  • Criar tabela tão confusa que deveria ser dividida.
Quiz com gabarito

15 perguntas para provar domínio

  1. O que o colspan faz? Une células horizontalmente.
  2. O que o rowspan faz? Une células verticalmente.
  3. Onde aplicar esses atributos? Em td ou th.
  4. Se usar colspan="3", quantas colunas ocupa? Três.
  5. Erro clássico com rowspan? Não remover a célula da linha seguinte.
  6. Função do caption? Descrever a tabela.
  7. Mesclagem ajuda acessibilidade? Ajuda se for lógica; prejudica se for confusa.
  8. Pode usar colspan e rowspan juntos? Sim.
  9. O que o valor de rowspan indica? Número de linhas ocupadas.
  10. O que acontece com contagem errada? A tabela desalinha ou vaza.
  11. Regra de ouro do colspan? A soma deve bater com as colunas planejadas.
  12. Por que usar th em categoria mesclada? Para dar contexto semântico.
  13. Mesclagem substitui CSS? Não.
  14. Quando usar mesclagem em relatórios? Para grupos, subtítulos e totais.
  15. Nota da aula? 10/10 Mestre dos Mestres.
GitHub

Registre seu relatório mesclado

git status
git add .
git commit -m "aula-22: cria relatorio com celulas mescladas"
git push
  • git status: verifica os arquivos alterados.
  • git add .: prepara a evidência para versionamento.
  • git commit: registra o domínio sobre mesclagem.
  • git push: publica no GitHub.
Resumo Mestre

Mesclar células é controlar a geometria da tabela

colspan expande no eixo horizontal. rowspan expande no eixo vertical. O segredo é calcular quais células foram engolidas e manter a tabela acessível com caption, th e scope.

Nota final: 10/10 Supremo.

Esta aula está no nível Mestre dos Mestres porque transforma “juntar quadradinhos” em engenharia geométrica de dados, preparando você para relatórios, agendas e dashboards profissionais.

Voltar ao Módulo HTML5 Voltar ao Topo