Mesclando células: colspan e rowspan

Veja como unir células horizontalmente e verticalmente para criar layouts de tabela mais complexos.

Até agora, nossas tabelas têm uma estrutura de grade perfeita, onde cada célula ocupa exatamente uma linha e uma coluna. Mas e se você precisar que uma célula se estenda por várias colunas ou várias linhas — como um título que abrange duas colunas de dados, ou uma categoria que agrupa várias linhas de itens?

Para isso, o HTML oferece dois atributos poderosos: colspan e rowspan.

colspan: mesclando colunas

O atributo colspan (column span) permite que uma célula se estenda por múltiplas colunas.

Exemplo básico de colspan

Imagine uma tabela de vendas onde você quer um título "Vendas do Trimestre" que abranja as colunas de "Janeiro", "Fevereiro" e "Março":

<table>
  <thead>
    <tr>
      <th colspan="3">Vendas do Trimestre</th> <!-- Esta célula ocupa 3 colunas -->
      <th>Total Anual</th>
    </tr>
    <tr>
      <th>Janeiro</th>
      <th>Fevereiro</th>
      <th>Março</th>
      <th>Total</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>R$ 100</td>
      <td>R$ 120</td>
      <td>R$ 150</td>
      <td>R$ 370</td>
    </tr>
  </tbody>
</table>

Como funciona o colspan

  1. Defina o colspan: Na célula (<th> ou <td>) que você quer mesclar, adicione colspan="N", onde N é o número de colunas que ela deve ocupar.
  2. Ajuste as outras células: Na mesma linha (<tr>), você deve remover N-1 células para compensar. Se uma célula ocupa 3 colunas, você precisa de 2 células a menos naquela linha para manter o alinhamento.

No exemplo acima:

  • A primeira linha tem <th> com colspan="3". Isso significa que ela ocupa o espaço de 3 colunas.
  • Para compensar, essa linha só precisa de mais 1 <th> (o "Total Anual") para completar as 4 colunas totais da tabela.
  • A segunda linha tem 4 <th> normais, definindo as 4 colunas da tabela.

rowspan: mesclando linhas

O atributo rowspan (row span) permite que uma célula se estenda por múltiplas linhas.

Exemplo básico de rowspan

Imagine uma tabela de produtos onde você quer agrupar vários itens sob uma mesma categoria "Eletrônicos":

<table>
  <thead>
    <tr>
      <th>Categoria</th>
      <th>Produto</th>
      <th>Preço</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td rowspan="3">Eletrônicos</td> <!-- Esta célula ocupa 3 linhas -->
      <td>Smartphone</td>
      <td>R$ 2.500</td>
    </tr>
    <tr>
      <!-- A célula "Eletrônicos" já ocupa esta posição -->
      <td>Smartwatch</td>
      <td>R$ 800</td>
    </tr>
    <tr>
      <!-- A célula "Eletrônicos" já ocupa esta posição -->
      <td>Fone de ouvido</td>
      <td>R$ 300</td>
    </tr>
    <tr>
      <td>Livros</td>
      <td>HTML para Iniciantes</td>
      <td>R$ 70</td>
    </tr>
  </tbody>
</table>

Como funciona o rowspan

  1. Defina o rowspan: Na célula (<th> ou <td>) que você quer mesclar, adicione rowspan="N", onde N é o número de linhas que ela deve ocupar.
  2. Ajuste as outras linhas: Nas N-1 linhas seguintes, você deve remover a célula que estaria na posição ocupada pelo rowspan.

No exemplo acima:

  • A célula <td> "Eletrônicos" tem rowspan="3".
  • Isso significa que ela ocupa a primeira coluna da linha atual e também da segunda e terceira linhas seguintes.
  • Por isso, nas duas <tr> seguintes, a primeira <td> (que seria a coluna "Categoria") foi removida.

colspan e rowspan juntos

Você pode combinar colspan e rowspan para criar layouts de tabela mais complexos.

<table>
  <thead>
    <tr>
      <th rowspan="2">Região</th>
      <th colspan="2">Vendas (Milhões)</th>
      <th rowspan="2">Crescimento (%)</th>
    </tr>
    <tr>
      <th>2025</th>
      <th>2026</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>Norte</th>
      <td>12.5</td>
      <td>14.8</td>
      <td>18.4</td>
    </tr>
    <tr>
      <th>Sul</th>
      <td>20.1</td>
      <td>22.5</td>
      <td>11.9</td>
    </tr>
    <tr>
      <th>Leste</th>
      <td>15.0</td>
      <td>16.2</td>
      <td>8.0</td>
    </tr>
    <tr>
      <th>Oeste</th>
      <td>18.2</td>
      <td>19.5</td>
      <td>7.1</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th colspan="3">Total Geral</th>
      <td>45.4</td>
    </tr>
  </tfoot>
</table>

colspan e rowspan para acessibilidade

Mesclar células pode tornar tabelas mais difíceis de serem interpretadas por leitores de tela. É crucial usar scope (que você verá na próxima lição) para associar corretamente as células de dados aos seus cabeçalhos, especialmente em tabelas complexas com células mescladas.

Ao usar colspan e rowspan, certifique-se de que a estrutura lógica da tabela ainda faça sentido. Evite mesclar células apenas por razões visuais se isso prejudicar a compreensão dos dados.

colspan e rowspan para layout (NÃO FAÇA ISSO!)

No passado, antes do CSS ser amplamente adotado, colspan e rowspan eram frequentemente abusados para criar layouts de página inteiros.

<!-- ❌ ABUSO DE TABELAS PARA LAYOUT (NÃO FAÇA ISSO!) -->
<table>
  <tr>
    <td colspan="2">Cabeçalho do Site</td>
  </tr>
  <tr>
    <td>Menu Lateral</td>
    <td>Conteúdo Principal</td>
  </tr>
  <tr>
    <td colspan="2">Rodapé do Site</td>
  </tr>
</table>

Nunca use tabelas para layout! Tabelas são para dados tabulares. Para layout, use CSS com Flexbox, Grid ou outras técnicas de posicionamento. Usar tabelas para layout prejudica a acessibilidade, a responsividade e a manutenção do código.

Resumindo

  • colspan="N" → a célula ocupa N colunas. Remova N-1 células da mesma linha para compensar.
  • rowspan="N" → a célula ocupa N linhas. Remova a célula correspondente nas N-1 linhas seguintes.
  • Podem ser usados juntos para tabelas complexas.
  • Use com cautela para não prejudicar a acessibilidade.
  • NUNCA use colspan e rowspan para criar layouts de página — eles são para dados tabulares.