-= Curso HTML - Tabelas =-
Marco Antonio de Queiroz.


Estrutura de uma tabela.

Vamos ver ordenadamente (de fora para dentro) as etiquetas necessárias para
confeccionar as tabelas.
    A etiqueta geral, que engloba todas as demais é <TABLE> e </TABLE>:

<TABLE>
[resto das etiquetas]
</TABLE>

Com isso se apresentam os dados tabulados, porém falta a característica mais
atrativa das tabelas, ou seja, as bordas, que dão uma noção de
trimensionalidade com relação ao fundo de página. Para isto, temos que acrescentar o
atributo BORDER à etiqueta:

<TABLE BORDER>
[resto das etiquetas]
</TABLE>

a seguir, dentro da anterior, estão as etiquetas para formar cada linha
    (row) da tabela, que são <TR> e </TR>. Temos que repeti-las tantas vezes
    quanto é o número de linhas que queremos em nossa tabela. A seguir, para
    uma tabela de duas linhas:

<TR>
[etiquetas das distintas células da primeira linha]
</TR>

<TR>
[etiquetas das distintas células da segunda linha]
</TR>

    Em último nível (dentro das anteriores) estão as etiquetas de cada célula,
    que são <TD> e </TD>, que englobam o conteúdo de uma determinada célula
    (texto, imagens, etc.). Temos que repetir tantas vezes quantas forem as
    celulas que queremos nesta linha.


Vejamos um exemplo de uma tabela com duas linhas. Cada linha vai ter três
celulas. Dentro de cada célula vamos colocar um texto explicativo da posição de
cada célula:

<CENTER>
<TABLE BORDER>
<TR>
<TD>linha1-célula1</TD> <TD>linha1-célula2</TD> <TD>linha1-célula3</TD>
</TR>

<TR>
<TD>linha2-célula1</TD> <TD>linha2-célula2</TD> <TD>linha2-célula3</TD>
</TR>

</TABLE>
</CENTER>

Que resulta:

             linha1-célula1   linha1-célula2   linha1-célula3
             linha2-célula1   linha2-célula2   linha2-célula3    ..

As linhas podem possuir desigual número de células entre si.


Títulos na tabela.

Podemos acrescentar um título (caption) à tabela, bastando colocar um texto
acima da tabela que indica qual o seu conteúdo. Conseguimos com as etiquetas
<CAPTION> e </CAPTION>.

Se no exemplo anterior acrescentarmos, após <TABLE>, a seguinte linha:

<CAPTION> Exemplo de tabela com linhas iguais </CAPTION>, resulta:

Exemplo de tabela com linhas iguais
             linha1-célula1   linha1-célula2   linha1-célula3
             linha2-célula1   linha2-célula2   linha2-célula3       ..


Variando a espessura das bordas.

O atributo BORDER (visto mais acima) coloca por default uma borda com
espessura de uma unidade. Porém podemos aumentar ou diminuir a espessura da
borda da tabela, colocando:

<TABLE BORDER=número desejado>

Se no exemplo anterior colocarmos:
<TABLE BORDER=5>, aumentará para 5 o
número de pixels da borda da tabela.


Cabeçalho das colunas.

Podemos colocar cabeçalho (header) nas colunas, que se diferenciam das demais
por estar em negrito e centralizado.
Conseguimos com as etiquetas <TH> e </TH> (em vez da normal <TD> e </TD>).
(Perceba que o <th> está no lugar da célula e não da linha <tr>)

Vamos acrescentar, no exemplo anterior, uma linha, antes das que já existem,
com o título de cada coluna:

<TR>
<TH>Coluna 1</TH> <TH>Coluna 2</TH> <TH>Coluna 3</TH>
</TR>

Que resulta:


               Exemplo de tabela com linhas iguais.
              Coluna 1        Coluna 2         Coluna 3
             linha1-célula1   linha1-célula2   linha1-célula3
             linha2-célula1   linha2-célula2   linha2-célula3       ..



Conteúdo das células.

Até agora, em todos os exemplos, existe um texto dentro de cada célula.
Porém, podemos colocar qualquer elemento que vai dentro de um documento HTML, como
imagens, links, etc.

Exemplo com uma imagem:

<CENTER>
<TABLE BORDER=2>

<TR><TD><IMG SRC="sb.gif"></TD></TR>

</TABLE>
</CENTER>


Exemplo com um link:

<CENTER>
<TABLE BORDER=2>

<TR><TD><A HREF="index.html">Home Page</A></TD></TR>

</TABLE>
</CENTER>


Posicionamento do conteúdo dentro de cada célula.

Normalmente, o conteúdo de uma célula está alinhado à esquerda. Porém podemos
trocar este acrescentando dentro da etiqueta de cada célula os seguintes
atributos:

<CENTER>
<TABLE BORDER=3>
<TR><TD ALIGN=CENTER> Exemplo de alinhamento horizontal dentro da célula
</TD></TR>

<TH ALIGN=LEFT> Cabeçalho alinhado à esquerda </TH>

<TR><TD ALIGN=CENTER> Ao centro </TD></TR>

<TR><TD ALIGN=RIGHT> À direita </TD></TR>

</TABLE>
</CENTER>


O alinhamento por default no sentido vertical é ao centro.


Variando as dimensões da tabela.

Normalmente, o navegador se encarrega de dimensionar o tamanho total da tabela
de acordo com o número de linhas, de colunas, pelo conteúdo das células,
espessura das bordas, etc.

As vezes podemos "forçar" para que uma tabela tenha dimensões totais maiores,
tanto em altura como em largura. Conseguimos isto acrescentando-se dentro da
etiqueta da tabela os atributos WIDTH e HEIGHT igual a uma porcentagem da
dimensão do documento ou um número em pixels.

Por exemplo:
<TABLE WIDTH=70%>
A tabela ficará circunscrita a 70% da largura da tela.

<TABLE HEIGHT=200>
A tabela ficará circunscrita em 200 pixels na altura.

Cor de fundo nas tabelas.

Podemos conseguir que as tabelas tenham uma cor de fundo, seguindo um
procedimento totalmente análogo ao empregado para que uma página tenha uma cor
de fundo uniforme. Para isso devemos utilizar o atributo
BGCOLOR="#XXYYZZ"

Podemos conseguir:
  1. Que a totalidade da tabela tenha uma cor de fundo. Para isso, colocamos
    o atributo dentro da etiqueta TABLE. Por exemplo, vamos fazer com que a
    tabela tenha cor de fundo verde (#00FF00):

<CENTER>
<TABLE BORDER BGCOLOR="#00FF00">


Que somente uma determinada célula tenha uma cor de fundo. Para isso,
    colocamos o atributo dentro da etiqueta da célula correspondente. Por
exemplo, vamos fazer com que só a célula1 da linha1 tenha cor verde:

Que resulta:
<td bgcolor="#00ff00"> linha1-celula1</td>

Que todas as células tenham uma cor, porém algumas células com uma cor
    particular. O atributo da cor geral colocamos na etiqueta TABLE, e as
    cores particulares, nas células em questão (uma combinação dos casos
    anteriores). Por exemplo, vamos fazer com que a tabela tenha a cor de
    fundo vermelha (#FF0000), porém a célula1 da linha1 seja de cor azul
    (#0000FF):

<CENTER>
<TABLE BORDER BGCOLOR="#FF0000">
<TR>
<TD BGCOLOR="#0000FF">linha1-célula1</TD> <TD>linha1-célula2</TD>
</TR>
</TABLE>
</CENTER>


Imagens de fundo nas tabelas.

O Internet Explorer da Microsoft suporta a colocação de imagens de fundo no
interior das tabelas, de uma maneira análoga de uma página.
 Para isso, devemos utilizar o atributo BACKGROUND="imagem.gif" ou
BACKGROUND="imagem.jpg".

Se utilizada dentro da etiqueta <TABLE> a imagem em questão se multiplicará
atrás de todas as células.

Por exemplo, se colocarmos:

<CENTER>
<TABLE BORDER BACKGROUND="fundo.jpg">
<TR>
<TD>linha1-célula1</TD> <TD>linha1-célula2</TD>
</TR>

<TR>
<TD>linha2-célula1</TD> <TD>linha2-célula2</TD>
</TR>
</TABLE>
</CENTER>

Que resultará em uma tabela com 4 figuras fundo.jpg em duas linhas e
duas colunas.
Se só for colocada uma única célula em toda a tabela, logicamente, essa
ocupará o tammanho inteiro da tabela. É conveniente, nesse caso, que a
etiqueta de imagem de fundo.jpg esteja como etiqueta da célula.


Separação entre células de uma tabela.

Por default, a separação entre as diferentes células de uma tabela é de dois
pixels. Porém, podemos mudar isto com o atributo CELLSPACING, que se coloca
dentro da etiqueta TABLE.

Por exemplo, para obtermos uma separação de 20 pixels entre as células:

<CENTER>
<TABLE BORDER=5 CELLSPACING=20>
<TR>
<TD>linha1-célula1</TD> <TD>linha1-célula2</TD>
</TR>
</TABLE>
</CENTER>


Separação entre a borda e o conteúdo das células.

Por default, a separação entre a borda e o conteúdo da célula é de um pixel.
Podemos trocar isto com o atributo CELLPADDING, que se coloca dentro da
etiqueta TABLE.

Por exemplo, para obtermos uma separação de 20 pixels entre o conteúdo da
célula e as bordas:

<TABLE BORDER=5 CELLPADDING=20>

Podemos fazer a combinação também com o atributo CELLSPACING (visto
anteriormente).

Um exemplo prático a ser estudado e executado.

<HTML>
<HEAD>
<TITLE>Construindo uma Tabela.</TITLE>
</HEAD>
<BODY BACKGROUND="" BGCOLOR="#a0a0a0" TEXT="#000080">

<p>
<CENTER>
<table bgcolor="#c0c0c0"  cellspacing="1" cellpadding="6" width=700 >
<tr><td align="center">
<B><FONT SIZE=+2>
Construindo uma Tabela.
</FONT></B>
</td></tr></table></center>
<p>
</body>
</html>