TABELA

As tabelas ajudam na organização e melhor visualização de uma página HTML. Há páginas cuja diagramação é inteiramente baseada em tabelas, pois como ainda não existem formas mais sofisticadas de controlar o posicionamento de imagens e texto, o uso de tabelas tornou-se um recurso essencial para dispor os elementos da página de maneira mais criativa.

As tabelas são compostas de linhas, dentro das quais são colocadas células com o conteúdo. Dentro das células pode-se colocar o texto, imagens ou até mesmo outras tabelas. Uma linha pode conter várias células, tornando-se então uma tabela com várias colunas.

Os tags para construir uma tabela são:
  • <TABLE> ... </TABLE>: para indicar o início e o fim de uma tabela.
  • <TR> ... </TR>: para indicar o início e o fim de uma linha
  • <TH> ... </TH>: para indicar o início e o fim de uma célula-título.
  • <TD> ... </TD>: para indicar o início e o fim de uma célula.
A única diferença entre o tag <TH> e <TD> é que o primeiro marca o texto da célula com ênfase. Os navegadores interpretam essa ênfase como negrito, mas a ênfase também pode ser conseguida com tags como <B> e <I>.

Não é obrigatório colocar os tags de fechamento dos elementos da tabela (</TR>, </TH> e </TD>), mas estes tags são úteis para entender melhor a estrutura de linhas e células. Nos exemplos seguintes adicionamos uma borda à tabela. O atributo da borda é colocado dentro do tag <TABLE>.

<TABLE BORDER>
<TR>
<TD>Célula 1</TD><TD>Célula 2</TD>
</TR>
<TR>
<TD>Célula 3</TD><TD>Célula 4</TD>
</TR>
</TABLE>

Veja como ficou:
Célula 1Célula 2
Célula 3Célula 4


O exemplo acima mostra uma tabela com duas linhas e duas colunas. O número de colunas é definido pelo número de células presentes nas linhas. É possível expandir as células para que elas ocupem o espaço de mais de uma coluna ou linha.

<TABLE BORDER="2">
<TR>
<TD COLSPAN="2">Célula expandida</TD>
</TR>
<TR>
<TD>Célula 1</TD><TD>Célula 2</TD>
</TR>
<TR>
<TD>Célula 3</TD><TD>Célula 4</TD>
</TR>
</TABLE>

Veja como ficou:
Célula expandida
Célula 1Célula 2
Célula 3Célula 4

ou
<TABLE BORDER="3">
<TR>
<TD ROWSPAN="2">Célula expandida</TD>
<TD>Célula 1</TD><TD>Célula 2</TD>
</TR>
<TR>
<TD>Célula 3</TD><TD>Célula 4</TD>
</TR>
</TABLE>

Veja como ficou:
Célula expandida Célula 1Célula 2
Célula 3Célula 4


A solução necessária para fazer uma célula expandida é diferente em cada um dos exemplos anteriores. No caso da célula expandida na largura de duas colunas, ela ficou em uma linha diferente das células 1 e 2. No segundo exemplo, para deixar a célula expandida da altura de duas linhas foi preciso colocá-la na mesma linha das células 1 e 2.

DIMENSÕES DA TABELA:
Além de controlar a largura da borda (com o atributo BORDER), é possível definir as dimensões (em pixels) de toda a tabela, espaço entre células e as margens dentro das células. Todos esses controles são feitos através de atributos dentro do tag <TABLE>. Os atributos são:
  • WIDTH: para definir a largura da tabela
  • HEIGHT: para definir a altura da tabela
  • CELLPADDING: para definir a margem dentro das células
  • CELLSPACING: para definir o espaço entre as células
<TABLE BORDER="1" WIDTH="400" HEIGHT="200" CELLPADDING="20" CELLSPACING="20">
<TR>
<TD ROWSPAN="2">Célula expandida</TD>
<TD>Célula 1</TD><TD>Célula 2</TD>
</TR>
<TR>
<TD>Célula 3</TD><TD>Célula 4</TD>
</TR>
</TABLE>

Veja como ficou:
Célula expandida Célula 1Célula 2
Célula 3Célula 4


Os atributos WIDTH e HEIGHT também podem ser utilizados para definir o tamanho de células específicas. Neste caso, devem ser colocado dentro do tag <TD> ou <TH>.

ALINHAMENTO:
Os elementos dentro da tabela podem ser alinhados da mesma forma que um parágrafo comum. Se nenhum alinhamento for definido, o conteúdo das células é alinhado horizontalmente, esquerda e verticalmente ao centro. Os atributos ALIGN (alinhamento horizontal) e VALIGN (alinhamento vertical) devem ser usados dentro dos tags <TR> e <TD> (além de <TH>, se for o caso). Os alinhamentos possíveis são:

    Alinhamento horizontal:
  • ALIGN="LEFT": alinha o conteúdo à esquerda;
  • ALIGN="RIGHT": alinha o conteúdo à direita;
  • ALIGN="CENTER": alinha o conteúdo ao centro.
    Alinhamento vertical:
  • VALIGN="BASELINE": mantém as linhas de texto com o mesmo alinhamento (para ser usado dentro de <TR> ou no primeiro <TD> de uma linha);
  • VALIGN="TOP": alinha o conteúdo no topo;
  • VALIGN="MIDDLE": alinha o conteúdo ao centro;
  • VALIGN="BOTTOM": alinha o conteúdo na base da célula.
Vamos utilizar um texto mais longo na segunda célula da segunda coluna para demonstrar o alinhamento padrão.

<TABLE BORDER>
<TR>
<TH>Título 1</TH><TH>Título 2</TH>
</TR>
<TR>
<TD>Célula 1</TD>
<TD><B>Célula 2</B>
Quando existe um texto longo, a célula é expandida até à margem da janela do navegador. Para controlar a apresentação de texto dentro da tabela, pode-se modificar as dimensões da célula.</TD>
</TR>
</TABLE>

Veja como ficou:
Título 1Título 2
Célula 1 Célula 2
Quando existe um texto longo, a célula é expandida até à margem da janela do navegador. Para controlar a apresentação de texto dentro da tabela, pode-se modificar as dimensões da célula.


A largura da coluna da direita foi ampliada para que o texto da célula 2 aproveitasse até o final da margem do navegador. Se a largura da janela do navegador for diminuída, também diminui a largura da segunda coluna. Vamos melhorar a aparência da tabela ajustando a largura da célula 2 em 300 pixels. Assim, a largura de toda a segunda coluna será ajustada. Aproveitamos este exemplo para alinhar o texto da célula 1 no topo e mudar a largura da borda da tabela.

<TABLE BORDER="3">
<TR>
<TH>Título 1</TH><TH>Título 2</TH>
</TR>
<TR>
<TD valign="top"><b>Célula 1</b></TD>
<TD width="300"><B>Célula 2</B>
A largura de cada célula pode ser controlada individualmente utilizando-se o atributo WIDTH.</TD>
</TR>
</TABLE>

Veja como ficou:
Título 1Título 2
Célula 1 Célula 2 A largura de cada célula pode ser controlada individualmente utilizando-se o atributo WIDTH.


COR DE FUNDO DAS CÉLULAS:

<TABLE BORDER>
<TR>
<TH BGCOLOR="#000000"><FONT COLOR="#FFFFFF">Cantora</FONT></TH>
<TH BGCOLOR="#000000"><FONT COLOR="#FFFFFF">Música</FONT></TH>
</TR>
<TR>
<TD BGCOLOR="white">Marisa Monte</TD>
<TD BGCOLOR="white"><FONT COLOR="WHITE">Beija Eu</FONT></TD>
</TR>
</TABLE>

Veja como ficou:
Cantora Música
Marisa Monte Beija Eu


Voltar ao topo