12:03
|
Às vezes podemos ter a necessidade de que uma célula de uma tabela ocupe mais de uma coluna ou linha da mesma, para isso utilizamos os atributos COLSPAN e ROWSPAN nas células da tabela. Veremos nesse artigo como utilizá-los através de alguns exemplos práticos.
Rowspan e colspan servem para expandir as células fazendo com que uma única célula ocupe mais de uma linha ou mais de uma coluna.
Exemplo utilizando COLSPAN.
Fundirá a célula em questão com sua vizinha direita.
<TR>
<TD COLSPAN="2">Célula 1</TD>
</TR>
<TR>
<TD>Célula 2</TD>
<TD>Célula 3</TD>
</TR>
<TABLE>
Exemplo utilizando ROWSNPAN.
Esta célula tem rowspan="2", por isso tem fundida a célula abaixo.
<TABLE CELLSPACING="0" CELLPADDING="2" BORDER="1">
<TR>
<TD ROWSPAN="2">Célula 1</TD>
<TD>Célula 2</TD>
</TR>
<TR>
<TD>Célula 3</TD>
</TR>
</TABLE>
<TR>
<TD ROWSPAN="2">Célula 1</TD>
<TD>Célula 2</TD>
</TR>
<TR>
<TD>Célula 3</TD>
</TR>
</TABLE>
Exemplo utilizando COLSPAN e ROWSNPAN.
<html>
<html>
<head>
<title>Tabela</title>
</head>
<body>
<TABLE CELLSPACING="0" CELLPADDING="2" BORDER="1">
<TR>
<TD COLSPAN="3" ROWSPAN="3">Célula com COLSPAN="3" ROWSPAN="3"</TD>
<TD>Célula 2</TD>
</TR>
<TR>
<TD>Célula 3</TD>
</TR>
<TR>
<TD>Célula 4</TD>
</TR>
<TR>
<TD>Célula 5</TD>
<TD>Célula 6</TD>
<TD>Célula 7</TD>
<TD>Célula 8</TD>
</TR>
</TABLE>
</body>
</html>
<html>
<head>
<title>Tabela</title>
</head>
<body>
<TABLE CELLSPACING="0" CELLPADDING="2" BORDER="1">
<TR>
<TD COLSPAN="3" ROWSPAN="3">Célula com COLSPAN="3" ROWSPAN="3"</TD>
<TD>Célula 2</TD>
</TR>
<TR>
<TD>Célula 3</TD>
</TR>
<TR>
<TD>Célula 4</TD>
</TR>
<TR>
<TD>Célula 5</TD>
<TD>Célula 6</TD>
<TD>Célula 7</TD>
<TD>Célula 8</TD>
</TR>
</TABLE>
</body>
</html>
- Introdução ao HTML
- Editar texto em html
- Formatar imagem em html
- Criar Links em html
- Criar Listas em html
- Criar Tabelas em html
- Mesclando as células de uma tabela com COLSPAN e ROWSPAN
0 comentários:
Postar um comentário