Mesclar Células em uma Tabela HTML

Em uma Tabela HTML, podemos mesclar (unir) células na horizontal e na vertical.


Mesclando Células na Horizontal

Para mesclar células na horizontal (em uma mesma linha), basta usarmos um parâmetro da Tag <td> chamado colspan. Veja um exemplo:
<html>
<head>
<title>Mesclando Células na Horizontal</title>
</head>
<body>

<table border="1">
<tr>
<td colspan="3">Tabela de Produtos</td>
</tr>
<tr>
<td>Categoria</td>
<td>Produto</td>
<td>Preço</td>
</tr>
<tr>
<td>Multimídia</td>
<td>Headphone</td>
<td>6</td>
</tr>
<tr>
<td>Multimídia</td>
<td>WebCam</td>
<td>13</td>
</tr>
<tr>
<td>Multimídia</td>
<td>Placa de Vídeo 512 MB</td>
<td>85</td>
</tr>
</table>
</body>
</html>
Aqui, criamos uma tabela contendo 5 linhas e 3 colunas. No entanto, perceba que a primeira linha (primeiro <tr>), contém apenas uma célula (um <td>). Repare também que nesse <td>, definimos o parâmetro colspan com o valor "3". Com isso, informamos que a célula deve ser mesclada com as próximas duas células da mesma linha (célula atual + duas próximas células = 3).

Vejamos o resultado:
Mesclar Células na horizontal com colspan

Mesclando Células na Vertical

Para mesclar células na vertical (em uma mesma coluna), basta usarmos um parâmetro da Tag <td> chamado rowspan. Veja um exemplo:
<html>
<head>
<title>Mesclando Células na Vertical</title>
</head>
<body>
<h1>Tabela de Produtos</h1>
<table border="1">
<tr>
<td>Categoria</td>
<td>Produto</td>
<td>Preço</td>
</tr>
<tr>
<td rowspan="3">Multimídia</td>
<td>Headphone</td>
<td>6</td>
</tr>
<tr>
<td>WebCam</td>
<td>13</td>
</tr>
<tr>
<td>Placa de Vídeo 512 MB</td>
<td>85</td>
</tr>
</table>
</body>
</html>

No código acima,criamos uma tabela com três colunas e quatro linhas. Perceba que na primeira célula da segunda linha (primeiro <td> do segundo <tr>), definimos o parâmetro rowspan com o valor "3". Com isso, informamos que essa célula será mesclada com a primeira célula das próximas duas linhas (Célula atual + Duas células = 3).

Repare também que temos apenas dois tds em cada uma das linha seguintes.

Vejamos o resultado:
Mesclar Células na vertical com rowspan


Leia mais:

24 comentários:

  1. obrigado amigo, me ajudou seu post.

    ResponderExcluir
  2. Valeu me ajudou muito.Obrigado

    ResponderExcluir
  3. Obrigado, estava procurando esse "colspan". Me ajudou muito!!!

    ResponderExcluir
  4. Cara muito obrigado, fiz questão de comentar aqui meu agradecimento :)

    me ajudou muito, continue assim com otimos posts ;D

    ResponderExcluir
  5. Rmarques:

    Amigão! Obrigado! Me ajudou muito seu post!

    Valeu!!!!

    ResponderExcluir
  6. Valeu!! Ajudou pra caramba!

    ResponderExcluir
  7. Sensacional! Me ajudou muito para fazer um trabalho da faculdade, ainda mais que não sou da área. Parabéns!

    ResponderExcluir
  8. Sensacional! Me ajudou muito, ainda mais que não sou da área. Parabéns!

    ResponderExcluir
  9. Muito obrigado pelo post amigão, me ajudou pra caramba!!! Economizei meio dia de trabalho!! Valeu!
    Parabéns!

    ResponderExcluir
  10. Boa tarde,
    Parabéns pelo artigo foi de grande ajuda estou cursando MYSQL na www.cursoadv.com.br e desconhecia essa forma.

    ResponderExcluir
  11. vlw kra ajudou mt, tava atras desse colspan e n lembrava como era

    ResponderExcluir
  12. uffaaa.... resolvi Obrigadoo!
    http://www.escolatecnicarj.com.br
    fuii

    ResponderExcluir
  13. Muito Bom, Esta me ajudando muito também a fazer meus exercícios.

    ResponderExcluir

O que você achou do post? Faça um comentário.

Aprenda a receber dados de Formulário com PHP

Existem três arrays associativos que podemos usar para receber dados de Formulários HTML em PHP. São eles: $_GET , $_POST e $_REQUEST . O...