Vou colocar aqui algumas dicas interessantes que encontrei na Internet
Fonte: http://denecir.blogspot.com.br/2010/09/mesclar-celulas-tabela-html.html
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:
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:
Nenhum comentário:
Postar um comentário