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>2
- célula simples
<TD>3
- célula simples
<TD>4
- célula simples
<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>6
- célula simples
<TD>7
- célula simples
<TD>8
- célula simples
</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>
!!!!!!!!!!!!!!