Tabelas

Nesse tutorial você irá aprender a inserir tabelas na sua página.

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>
!!!!!!!!!!!!!!