tabelas

Podemos usar tabelas em nossos documentos HTML. As tabelas são muito úteis quando queremos organizar nossos textos em linhas e colunas, ou desejamos dar um toque diferente no visual da página. As tabelas podem abrigar textos, imagens ou outras tabelas. Eis as tags usadas na composição das tabelas:

<TABLE> para iniciar e </TABLE> para fechar a tabela;

<tr> para iniciar e </tr> para findar uma linha;

<th> para começar e </th> encerrar uma célula;

<td> para iniciar e </td> para fechar uma célula;

Notas:

1º. a diferença básica entre <th> e <td> é que o texto de <th> é apresentado em negrito e centralizado;

2º. As tags de fechamento </tr>, </th> e <td> não são de uso obrigatório, mas ajudam na compreensão da estrutura da tabela.

Podemos manipular bastante a aparência das tabelas, através de alguns atributos:

align - alinhamento da tabela: left, right ou center;

width - largura da tabela, em pixels ouu em porcentagem em relação ao tamanho da janela;

height - altura da tabela, em pixels ou em porcentagem em relação ao tamanho da janela;

border - espessura da borda da tabela;
bgcolor - cor do fundo da tabela;<

bordercolor - cor das bordas da tabela das bordas daas células;

bordercolorlight - cor das bordas esquerda e superior da tabela e das bordas inferiores das células;

bordercolordark - cor das bordas direita e inferior da ttabela e das bordas superiores das células;

rowspan - quantia de linhas que a célula pode ocupar;

colspan - quantia de colunas que a tabela pode oocupar;

Abaixo colocamos o código, facilmente assimilável, de uma tabela abordando o tema:

<TABLE align = center width=”90%” border=”15″ bordercolorlight = 3300ff bordercolordark = ff00CC bgcolor = ffffff>
<TR>
<TH rowspan=”2″>1 - duas linhas</TH>
<TH colspan=”2″>1 - duas colunas</TH>
<TH colspan=”2″>2 - duas colunas</TH>
<TR>
<TD>1 - célula simples</TD>
<TD>2 - célula simples</TD>
<TD>3 - célula simples</TD>
<TD>4 - célula simples</TD>
<TR>
<TH rowspan=”2″>2 - duas linhas</TH>
<TH colspan=”2″>3 - duas colunas</TH>
<TH colspan=”2″>4 - duas colunas</TH>
<TR>
<TD>5 - célula simples</TD>
<TD>6 - célula simples</TD>
<TD>7 - célula simples</TD>
<TD>8 - célula simples</TD>
</TABLE>

Perca alguns minutos comparando o código acima com o resultado produzido! Depois disso, apenas delete o atributo border do código proposto e veja o resultado: uma tabela sem quaisquer bordas!

O código deve ficar assim:

<TABLE align = center width=”90%” bordercolorlight = 3300ff bordercolordark = ff00CC bgcolor = ffffff>

Note que o interpretador simplesmente ignorará os atributos que especificam cores para as bordas da tabela!

Veja agora um modo de escrever ao lado de uma tabela:

<table align=”right” width=”80%” height=”50%” border=”3″ bgcolor=”#ffff00″>
<tr>
<th>Linha 1 Coluna 1</th>
<th>Linha 1 Coluna 2</th>
<tr>
<td>Linha 2 Coluna 1</td>
<td>Linha 2 Coluna 2</td>
</table>
Observe!!!<p>
escrevendo<br>
ao<br>
lado<br>
dessa<br>
tabela<br>
aí<br>
à<br>
direita!!!!!!!<br>
!!!!!!!!!!!!!!