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>
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).<head>
<title>Mesclando Células na Horizontal</title>
</head><body>
<table border="1">
</body>
</html><table border="1">
<tr>
<tr>
<tr>
<tr>
<tr>
</table><td colspan="3">Tabela de Produtos</td>
</tr> <tr>
<td>Categoria</td>
<td>Produto</td>
<td>Preço</td>
</tr><td>Produto</td>
<td>Preço</td>
<tr>
<td>Multimídia</td>
<td>Headphone</td>
<td>6</td>
</tr><td>Headphone</td>
<td>6</td>
<tr>
<td>Multimídia</td>
<td>WebCam</td>
<td>13</td>
</tr><td>WebCam</td>
<td>13</td>
<tr>
<td>Multimídia</td>
<td>Placa de Vídeo 512 MB</td>
<td>85</td>
</tr><td>Placa de Vídeo 512 MB</td>
<td>85</td>
Vejamos o resultado:
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>
</html><h1>Tabela de Produtos</h1>
<table border="1">
</body><table border="1">
<tr>
<tr>
<tr>
<tr>
</table><td>Categoria</td>
<td>Produto</td>
<td>Preço</td>
</tr><td>Produto</td>
<td>Preço</td>
<tr>
<td rowspan="3">Multimídia</td>
<td>Headphone</td>
<td>6</td>
</tr><td>Headphone</td>
<td>6</td>
<tr>
<td>WebCam</td>
<td>13</td>
</tr><td>13</td>
<tr>
<td>Placa de Vídeo 512 MB</td>
<td>85</td>
</tr><td>85</td>
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:
Leia mais:
- Não sabe criar uma tabela? Leia o post: Criação de Tabelas em HTML;
- Veja também como Criar Formulários HTML;
- Aprenda a Criar Listas Ordenadas e Listas Não Ordenadas com HTML;
- Veja como é fácil Inserir Links em Páginas HTML;
- Aprenda a Exibir Imagens em Páginas HTML;
- Adicione Links de Imagem em suas Páginas HTML;
- Use as Cores RGB e tenha mais de 16 milhões de opções;
- Leia Introdução ao PHP e comece a criar páginas dinâmicas;
obrigado amigo, me ajudou seu post.
ResponderExcluirValeu me ajudou muito.Obrigado
ResponderExcluirme ajudou muito.. Obrigado
ResponderExcluirObrigado!
ResponderExcluirObrigado, estava procurando esse "colspan". Me ajudou muito!!!
ResponderExcluirCara muito obrigado, fiz questão de comentar aqui meu agradecimento :)
ResponderExcluirme ajudou muito, continue assim com otimos posts ;D
esse site me ajudouuuu muitooo
ResponderExcluirmuito bom o post!
ResponderExcluirValeu cara !!!
ResponderExcluirTá ótimo cara! Valeu, foi muito útil!
ResponderExcluirobrigada ;)
ResponderExcluirLaiana
Rmarques:
ResponderExcluirAmigão! Obrigado! Me ajudou muito seu post!
Valeu!!!!
Valeu!! Ajudou pra caramba!
ResponderExcluirObrigado!
ResponderExcluirobg
ResponderExcluirSensacional! Me ajudou muito para fazer um trabalho da faculdade, ainda mais que não sou da área. Parabéns!
ResponderExcluirSensacional! Me ajudou muito, ainda mais que não sou da área. Parabéns!
ResponderExcluirMuito obrigado pelo post amigão, me ajudou pra caramba!!! Economizei meio dia de trabalho!! Valeu!
ResponderExcluirParabéns!
Boa tarde,
ResponderExcluirParabéns pelo artigo foi de grande ajuda estou cursando MYSQL na www.cursoadv.com.br e desconhecia essa forma.
Simples e útil, Valeuuu!!!
ResponderExcluirvlw kra ajudou mt, tava atras desse colspan e n lembrava como era
ResponderExcluiruffaaa.... resolvi Obrigadoo!
ResponderExcluirhttp://www.escolatecnicarj.com.br
fuii
Muito Bom, Esta me ajudando muito também a fazer meus exercícios.
ResponderExcluirMuito obrigada!
ResponderExcluir