🔗 Mesclagem de Células em Tabelas

Introdução

A mesclagem de células permite unir duas ou mais células de uma tabela para criar estruturas mais organizadas e profissionais.

Esse recurso é muito utilizado em cronogramas, relatórios, tabelas financeiras e documentos empresariais.

📌 Em HTML utilizamos os atributos colspan e rowspan para mesclar células.

O que é Mesclagem de Células?

Mesclar significa unir células que normalmente seriam separadas, formando uma única célula maior.

Exemplo visual:
Curso Técnico
HTML CSS JavaScript

Atributo colspan

O atributo colspan permite unir células na horizontal, ocupando várias colunas. 

<table>

<tr>
  <th colspan="3">
    Curso Técnico
  </th>
</tr>

</table>
colspan = quantidade de colunas que serão unidas.

Exemplo com colspan

Cronograma de Aulas
Dia Disciplina Horário Sala
Segunda HTML 19h 01

Atributo rowspan

O atributo rowspan permite unir células na vertical, ocupando várias linhas. 

<td rowspan="2">
  HTML
</td>
rowspan = quantidade de linhas que serão unidas.

Exemplo com rowspan

Curso Aula
Desenvolvimento Web HTML
CSS

Combinando colspan e rowspan

É possível utilizar os dois atributos na mesma tabela.

<table>

<tr>

<th colspan="2">
Título
</th>

</tr>


<tr>

<td rowspan="2">
Categoria
</td>

<td>
Item
</td>

</tr>

</table>

Aplicações Práticas

Exemplo de Cronograma

Semana 01
Dia Conteúdo Carga Horária
Segunda HTML Básico 4 horas
Terça CSS 4 horas

Boas Práticas

Erros Comuns

Erro Problema
Colspan incorreto Colunas desalinhadas.
Rowspan sem ajuste Linhas quebradas.
Muitas mesclagens Tabela difícil de manter.
⚠️ Sempre confira a quantidade de linhas e colunas após utilizar colspan ou rowspan.

Resumo

Atributo Função
colspan Mescla colunas.
rowspan Mescla linhas.
📌 A mesclagem de células permite criar tabelas profissionais e melhor organizadas.
🎓 Aula concluída! Agora você sabe utilizar colspan e rowspan para criar tabelas avançadas em HTML.