Mesclagem de Células de Tabela em HTML

8.1 Mesclagem de células horizontalmente

A mesclagem de células em uma tabela permite criar visualizações de dados mais flexíveis e informativas. Isso é especialmente útil quando você precisa combinar várias células para criar títulos ou dados consolidados. No HTML, para mesclar células, são usados os atributos colspan e rowspan.

Atributo colspan

O atributo colspan mescla células horizontalmente. Ele indica quantas colunas uma única célula deve abranger. Por exemplo, se você tiver uma célula com colspan="2", ela ocupará o lugar de duas células normais em uma linha.

Exemplo de uso:

Imagine que você tem uma tabela com três colunas e quer que a primeira célula em uma linha ocupe duas colunas. Você usa colspan="2" para mesclar essas duas células. Isso é útil para criar títulos que abrangem várias colunas ou para consolidar dados relacionados a várias categorias.

    
      <table border="1">
        <tr>
          <th>Nome</th>
          <th>Idade</th>
          <th>Cidade</th>
        </tr>
        <tr>
          <td>Alice</td>
          <td>25</td>
          <td>Londres</td>
        </tr>
        <tr>
          <td colspan="2">Total</td>
          <td>2 registros</td>
        </tr>
      </table>
    
  

8.2 Mesclagem de células verticalmente

O atributo rowspan mescla células verticalmente. Ele indica quantas linhas uma única célula deve abranger. Por exemplo, se você tiver uma célula com rowspan="2", ela ocupará o lugar de duas células normais em uma coluna.

Exemplo de uso:

Imagine que você tem uma tabela com três linhas e quer que a primeira célula em uma coluna ocupe duas linhas. Você usa rowspan="2" para mesclar essas duas células. Isso é útil para criar tabelas onde uma categoria de dados abrange várias linhas, como títulos mesclados ou dados totais.

    
      <table border="1">
        <tr>
          <th>Nome</th>
          <th>Projeto</th>
          <th>Cidade</th>
        </tr>
        <tr>
          <td rowspan="2">Alice</td>
          <td>Projeto A</td>
          <td>Londres</td>
        </tr>
        <tr>

          <td>Projeto B</td>
          <td>Batumi</td>
        </tr>
      </table>
    
  

8.3 Explicação do funcionamento

Como funcionam colspan e rowspan

Mesclagem horizontal (colspan): imagine que você está criando um cronograma onde um curso é realizado em várias salas. Você pode mesclar células com colspan para indicar que um curso abrange dois horários.

Mesclagem vertical (rowspan): imagine que você está criando uma tabela de resultados de competições onde um participante participa de várias etapas. Você pode mesclar células com rowspan para indicar que um participante abrange duas etapas.

Exemplos práticos

Criar títulos que abrangem várias colunas: se você tiver uma tabela com diferentes categorias de dados e quiser criar um título que abranja várias colunas, use colspan. Por exemplo, o título "Informações do funcionário" pode abranger as colunas "Nome", "Idade" e "Departamento".

Combinação de dados verticalmente: se você tiver dados que precisam ser combinados verticalmente, como vários registros para a mesma pessoa ou objeto, use rowspan. Por exemplo, se você tiver informações sobre um projeto e um projeto ocupar várias linhas (por exemplo, fases do projeto), combine as linhas com rowspan.

8.4 Exemplos

Imagine que você tem uma tabela mostrando funcionários e sua participação em diferentes projetos:

• Funcionários: Ivan, Maria, Pedro.
• Projetos: Projeto A, Projeto B.

Você quer mesclar células para mostrar que Ivan e Maria trabalham em dois projetos ao mesmo tempo:

    
<table border="1">
    <tr>
        <th>Nome</th>
        <th>Projeto A</th>
        <th>Projeto B</th>
        <th>Cidade</th>
    </tr>
    <tr>
        <td>Ivan</td>
        <td colspan="2">Sim</td>
        <td>Londres</td>
    </tr>
    <tr>
        <td>Maria</td>
        <td colspan="2">Sim</td>
        <td>Londres</td>
    </tr>
    <tr>
        <td>Pedro</td>
        <td>Sim</td>
        <th>Não</th>
        <td>Roma</td>
    </tr>
</table>
    
  

Ou, se quiser mostrar que Ivan está trabalhando em dois projetos:

    
      <table border="1">
        <tr>
          <th>Nome</th>
          <th>Projeto</th>
          <th>Cidade</th>
        </tr>
        <tr>
          <td rowspan="2">Ivan</td>
          <td>Projeto A</td>
          <td>Londres</td>
        </tr>
        <tr>
          <!-- vazio -->
          <td>Projeto B</td>
          <td>Londres</td>
        </tr>
        <tr>
          <td>Sergio</td>
          <td>Projeto C</td>
          <td>Roma</td>
        </tr>
      </table>
    
  

Eu coloquei um comentário especificamente no lugar da célula que foi "consumida" pela expansão da vizinha. Assim fica mais claro onde os outros serão exibidos.