Mesclagem de células em tabelas HTML

Como mesclar células na tabela HTML?

Para mesclar células em uma tabela HTML, utilize os atributos rowspan e colspan.

Mesclando células horizontalmente

Utilize o atributo colspan para mesclar células horizontalmente em uma tabela HTML. O valor de colspan define o número de colunas que a célula deve abranger.

<table style="border-collapse:collapse; width: 100%; border: 1px solid black;">
  <tr>
    <th>Nome</th>
    <th colspan="2">Contato</th>
    <th>Endereço</th>
  </tr>
  <tr>
    <td>Maria</td>
    <td>Telefone</td>
    <td>Email</td>
    <td>Rua A, 123</td>
  </tr>
  <tr>
    <td>João</td>
    <td>Telefone</td>
    <td>Email</td>
    <td>Rua B, 456</td>
  </tr>
  <tr>
    <td>Ana</td>
    <td colspan="2">Telefone e Email</td>
    <td>Rua C, 789</td>
  </tr>
</table>

Mesclando células verticalmente

Utilize o atributo rowspan para mesclar células verticalmente em uma tabela HTML. O valor de rowspan define o número de linhas que a célula deve abranger.

<table style="border-collapse:collapse; width: 100%; border: 1px solid black;">
  <tr>
    <th>Nome</th>
    <th>Contato</th>
    <th>Endereço</th>
  </tr>
  <tr>
    <td rowspan="2">Maria</td>
    <td>Telefone</td>
    <td>Rua A, 123</td>
  </tr>
  <tr>
    <td>Email</td>
    <td>Rua A, 123</td>
  </tr>
  <tr>
    <td>João</td>
    <td>Telefone</td>
    <td>Rua B, 456</td>
  </tr>
  <tr>
    <td>João</td>
    <td>Email</td>
    <td>Rua B, 456</td>
  </tr>
</table>

Utilize os atributos rowspan e colspan para mesclar células conforme necessário.