1|2|3|4|5|6|7|8|9|10|11|12|13


Trabalhando com tabelas

As tabelas são elementos essenciais para o posicionamento preciso dos objetos na página. São formadas de linhas, dentro da linhas são inseridas células com conteúdo. Veja abaixo os tags básicos:

Exemplo: Resultado:
<table border><TR>
<TD>Linha 1 - Coluna 1</TD>
<TD>Linha 1 - Coluna 2</TD>
</TR>
<TR>
<TD>Linha 2 - Coluna 1</TD>
<TD>Linha 2 - Coluna 2</TD>
</TR>
</TABLE>
Linha 1 - Coluna 1 Linha 1 - Coluna 2
Linha 2 - Coluna 1 Linha 2 - Coluna 2



 


WIDTH=value or percent
define a largura da tabela ou de uma célula.

Exemplo: Resultado:
<table border width=80%><TR>
<TD>Linha 1 - Coluna 1</TD>
<TD>Linha 1 - Coluna 2</TD>
</TR>
<TR>
<TD>Linha 2 - Coluna 1</TD>
<TD>Linha 2 - Coluna 2</TD>
</TR>
</TABLE>
Linha 1 - Coluna 1 Linha 1 - Coluna 2
Linha 2 - Coluna 1 Linha 2 - Coluna 2
<table border><TR>
<TD width=80%>Linha 1 - Coluna 1</TD>
<TD>Linha 1 - Coluna 2</TD>
</TR>
<TR>
<TD>Linha 2 - Coluna 1</TD>
<TD>Linha 2 - Coluna 2</TD>
</TR>
</TABLE>
Linha 1 - Coluna 1 Linha 1 - Coluna 2
Linha 2 - Coluna 1 Linha 2 - Coluna 2



 
NOWRAP:
Evita que haja uma quebra de linha dentro de uma célula.

COLSPAN:
Define quantas colunas uma célula poderá abranger.

Exemplo: Resultado:
<table border><tr>
<td colspan=3>3 colunas</td>
</tr>
<tr>
<td>coluna 1</td>
<td>coluna 2</td>
<td>coluna 3</td>
</tr>
</table>
3 colunas
coluna 1 coluna 2 coluna 3



 
ROWSPAN:
Define quantas linhas uma mesma célula pode abranger

Exemplo: Resultado:
<TABLE BORDER><TR>
<TD>linha 1</TD>
<TD ROWSPAN=3>3 linhas</TD>
</TR>
<TR>
<TD>linha 2</TD>
</TR>
<TR>
<TD>linha 3</TD>
</TR>
</TABLE>
linha 1 3 linhas
linha 2
linha 3

 


BORDER=value
define a largura da borda da tabela

Exemplo: Resultado:
<table border = 5 ><TR>
<TD>Linha 1 - Coluna 1</TD>
<TD>Linha 1 - Coluna 2</TD>
</TR>
<TR>
<TD>Linha 2 - Coluna 1</TD>
<TD>Linha 2 - Coluna 2</TD>
</TR>
</TABLE>
Linha 1 - Coluna 1 Linha 1 - Coluna 2
Linha 2 - Coluna 1 Linha 2 - Coluna 2

 



CELLSPACING=value
define espaçamento entre células

Exemplo: Resultado:
<table border CELLSPACING = 5 ><TR>
<TD>Linha 1 - Coluna 1</TD>
<TD>Linha 1 - Coluna 2</TD>
</TR>
<TR>
<TD>Linha 2 - Coluna 1</TD>
<TD>Linha 2 - Coluna 2</TD>
</TR>
</TABLE>
Linha 1 - Coluna 1 Linha 1 - Coluna 2
Linha 2 - Coluna 1 Linha 2 - Coluna 2

 


 
CELLPADDING=value
define distância entre o texto e a borda das células

Exemplo: Resultado:
<table border CELLPADDING = 20 ><TR>
<TD>Linha 1-Coluna 1</TD>
<TD>Linha 1-Coluna 2</TD>
</TR>
<TR>
<TD>Linha 2-Coluna 1</TD>
<TD>Linha 2-Coluna 2</TD>
</TR>
</TABLE>
Linha 1-Coluna 1 Linha 1-Coluna 2
Linha 2-Coluna 1 Linha 2-Coluna 2

 



ALIGN
alinha o texto à direita, esquerda e ao centro

Exemplo: Resultado:
<table border width=50%><tr>
<td align=center> center </td>
<td align=left> left </td>
<td align=right> right </td>
</tr>
</table>
center left right

 


 
VALIGN
alinha o texto acima , abaixo ou no centro

Exemplo: Resultado:
<table border CELLPADDING = 20><tr>
<td valign=top> TOP </td>
<td valign=middle>MIDDLE</td>
<td valign=botton>BOTTOM</td>
</tr>
</table>
TOP
MIDDLE
BOTTOM

página -04..