quarta-feira, 8 de setembro de 2010

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:

18 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

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

Todos os direitos reservados.

Todos os direitos reservados.