015 - TABELAS
Atributos do Tag <TD>: ALIGN, VALIGN e BGCOLOR

       


<HTML>
<HEAD>
<TITLE>
015 - TABELAS
</TITLE>
</HEAD>

<P> <BODY BACKGROUND="BGWite.jpg">

<CENTER>

<P> <B> ATRIBUTOS DO TAG TD </B>
<BR> ALIGN, VALIGN e BGCOLOR
<!-------------------------------------Descrição dos Atributos
(TD) ALIGN: Alinhamento HORIZONTAL do texto na célula.
ALIGN pode ser: Left (À esquerda), Right (À direita) e
Center (Ao Centro).

(TD) VALIGN : Alinhamento VERTICAL do texto na célula.
VALIGN pode ser: Top (Em cima), Middle (No meio) e
Bottom (Em baixo).

(TD) BGCOLOR: Cor do fundo da célula.
----------------------------------------------------------->

<P>
<!---------------------------- EXEMPLO DE ATRIBUTOS DE (TD) -->

<TABLE BORDER=1 WIDTH=200 HEIGHT=100 BGCOLOR=Lime>
<!-----------------------------------------------Cores de Fundos
Cores possíveis por meio do nome de cores em inglês:
White, Aqua, Fuchsia, Blue, Yellow, Lime, Red, Silver
Gray, Teal, Purple, Navy, Olive, Green, Maroon, Black
-------------------------------------------------------------->

   <TR>
     <TD ALIGN=Center VALIGN=Top BGCOLOR=Fuchsia>
<!--Célula com texto centrado, em cima e de fundo roxo.-->
         L1 C1
     </TD>
     <TD>
         L1 C2
     </TD>
     <TD>
         L1 C3
     </TD>
  </TR>

   <TR BGCOLOR=Aqua>
     <TD>
         L2 C1
     </TD>
     <TD ALIGN=Center VALIGN=Middle BGCOLOR=Fuchsia>
<!--Célula com texto centrado, verticalmente no meio e de fundo roxo.-->
         L2 C2
     </TD>
     <TD>
         L2 C3
     </TD>
  </TR>

   <TR ALIGN=Center VALIGN=Top BGCOLOR=Yellow>
     <TD>
         L3 C1
     </TD>
     <TD>
         L3 C2
     </TD>
     <TD ALIGN=Center VALIGN=Bottom BGCOLOR=Fuchsia>
<!--Célula com texto centrado, em baixo e de fundo roxo.-->
         L3 C3
     </TD>
  </TR>

</TABLE>

</CENTER>

</BODY>

</HTML>

 

Como testar a homepage acima:

[1] Copiar o texto de <HTML> até </HTML>, para um arquivo novo, no Bloco de Notas do Windows ou em um editor próprio de HTML.

[2] Salvar o arquivo com qualquer nome mas, com extensão .htm ou .html numa pasta (Nome sugerido: HtmlBasico, sem acento) do computador, aberta pelo usuário, e destinada a conter os arquivos de teste deste curso.

Sugestão para o nome do arquivo: AAULAxxx.htm onde xxx é o número acima desta tela. O "A" dobrado é para o arquivo ficar acima dos outros, facilitando sua visualização ao ter que abrí-lo.

[3] Abrir o arquivo por meio de um browser (navegador) para obter a seguinte home page, pressupondo-se que tenha sido feito o download do arquivo BGWite.jpg exigido na Aula 004:

Observe o seguinte:

  1. O tag <TD> também tem o atributo WIDTH (Largura, que se usa como em <TABLE>). É pouco usado porque altera também todas as células acima e abaixo na mesma coluna, porém é um recurso disponível para uso eventual. O valor de WIDTH de <TD> tem que ser menor e compatível com o WIDTH de <TABLE>, se este último atributo estiver declarado, a fim de não provocar quebras de linhas em outras células. Se WIDTH de <TABLE> não estiver declarado a tabela se amolda a qualquer valor do atributo WIDTH do tag <TD>. O mesmo se aplica ao atributo HEIGHT com relação às colunas.

  2. Todos os atributos do tag <TD> se aplicam, da mesma forma, ao tag <TH> (Table Header=Cabeçalho).

  3. Os códigos sobre tabelas, até aqui apresentados, são os básicos para montagem de tabelas. Há outros, que escapam ao escopo deste curso, cujo entendimento requer o domínio razoável e alguma prática no uso destes códigos básicos.

 

Atualização em Agosto/2000 por