HOME PAGE JAVASCRIPT
Botões Cálculos Datas Essenciais Janelas Flutuantes Menus
HTML CSS FLASH PHP ASP GERADORES CORES MISCELANEA Contato  






HTML - Tabelas - Mesclar

Por default as tabelas apresentam um número constante de células em cada linha ou em cada coluna. Há duas maneiras para conseguir resultados diferentes para esta formatação padrão.

1ª - Através das propriedades ROWSPAN e COLSPAN podemos modificar esta formatação padrão, mesclando (agrupando) determinadas células em uma coluna ou em uma linha.

Com a propriedade COLSPAN mesclamos células em uma linha conforme abaixo exemplificado.
<TABLE border="1">
<TR><TD>conteúdo</TD><TD>conteúdo</TD><TD>conteúdo</TD></TR>
<TR><TD>conteúdo</TD><TD>conteúdo</TD><TD>conteúdo</TD></TR>
</TABLE>
Mesclando as células destacadas em vermelho resulta:

<TABLE border="1">
<TR><TD>conteúdo</TD><TD>conteúdo</TD><TD>conteúdo</TD></TR>
<TR><TD>conteúdo</TD><TD colspan="2">conteúdo</TD></TR>
</TABLE>

e a tabela será visualizada no Navegador da seguinte forma:

conteúdo

conteúdo

conteúdo

conteúdo

conteúdo

Com a propriedade  ROWSPAN mesclamos células em uma coluna conforme abaixo exemplificado.
<TABLE border="1">
<TR><TD>conteúdo</TD><TD>conteúdo</TD><TD>conteúdo</TD></TR>
<TR><TD>conteúdo</TD><TD>conteúdo</TD><TD>conteúdo</TD></TR>
</TABLE>
Mesclando as células destacadas em vermelho resulta:

<TABLE border="1">
<TR><TD>conteúdo</TD><TD rowspan="2">conteúdo</TD><TD>conteúdo</TD></TR>
<TR><TD>conteúdo</TD>                                                              <TD>conteúdo</TD></TR>
</TABLE>

e a tabela será visualizada no Navegador da seguinte forma:

con

con

con

con

con

 

2ª -  inserindo uma tabela dentro de outra tabela conforme mostrado a seguir:

Tabela A

Código

Aparência

<table width="100%" border="1">
<tr><td>célula 1</td><td>célula 2</td><td>célula 3</td></tr>
<tr><td>célula 4</td><td>célula 5</td><td>célula 6</td></tr>
</table>
célula 1 célula 2 célula 3
célula 4 célula 5 célula 6

Tabela B

Código:
<table width="430" border="1">
<tr><td width="50%">célula 1</td><td width="50%">célula 2</td></tr>
<tr><td height="24">célula 3</td><td>inserindo a tabela A aqui</td></tr>
</table>
Aparência
célula 1 célula 2
célula 3 inserindo a tabela A aqui

Resulta:

Código:
<table width="430" border="1">
<tr><td width="50%">célula 1</td><td width="50%">célula 2</td></tr>
<tr><td height="24">célula 3</td><td><table width="100%" border="1">
<tr><td>célula 1</td><td>célula 2</td><td>célula 3</td></tr>
<tr><td>célula 4</td><td>célula 5</td><td>célula 6</td></tr>
</table>
</td></tr></table>

Aparência

célula 1célula 2
célula 3
célula 1célula 2célula 3
célula 4célula 5célula 6

Exemplo complexo

Código:
<table bgColor="#0000FF" border="1">
<tr><td
rowspan="2"><table bgColor="#FF0000" border="2">
<tr><td>tab 2 Linha 1 Célula 1</td><td>tab 2 Linha 1 Célula 2</td></tr>
<tr><td>tab 2 Linha 2 Célula 3</td><td>tab 2 Linha 2 Célula 4</td></tr>
</table>
</td>
<td
rowspan="2">coluna mesclada</td>
<td>tab1 Linha 1 Célula 3</td></tr>
<tr><td>tab1 Linha 2 Célula 5</td></tr>
</table>

Aparência

tab 2 Linha 1 Célula 1 tab 2 Linha 1 Célula 2
tab 2 Linha 2 Célula 3 tab 2 Linha 2 Célula 4
coluna mesclada tab1 Linha 1 Célula 3
tab1 Linha 2 Célula 5