014 - TABELAS
Atributos do Tag <TR>: ALIGN, VALIGN e BGCOLOR

       



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

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

<CENTER>

<P> <B> ATRIBUTOS DO TAG TR </B>
<BR> ALIGN, VALIGN e BGCOLOR
<!-------------------------------------Descrição dos Atributos
(TR) ALIGN: Alinhamento HORIZONTAL do texto nas
células de uma mesma linha, onde não houver (TD) ALIGN
diferente. (TD) ALIGN só afeta a célula que o contém.
ALIGN pode ser: Left (À esquerda), Right (À direita) e
Center (Ao Centro).

(TR) VALIGN : Alinhamento VERTICAL do texto nas
células de uma mesma linha, onde não houver (TD) VALIGN
diferente. (TD) VALIGN só afeta a célula que o contém.
VALIGN pode ser: Top (Em cima), Middle (No meio) e
Bottom (Em baixo).

(TR) BGCOLOR: Cor do fundo das células de uma mesma linha,
onde não houver (TD) BGCOLOR diferente. (TD) BGCOLOR só
afeta a célula que o contém.
------------------------------------------------------------>

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

<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> <!-- TR sem atributos: esta linha assume a cor da tabela que é Lime=Verde -->
     <TD>
         L1 C1
     </TD>
     <TD>
         L1 C2
     </TD>
     <TD>
         L1 C3
     </TD>
  </TR>

   <TR BGCOLOR=Aqua> <!--Esta linha assume a cor declarada que é Aqua=Azul -->
     <TD>
         L2 C1
     </TD>
     <TD>
         L2 C2
     </TD>
     <TD>
         L2 C3
     </TD>
  </TR>

   <TR ALIGN=Center VALIGN=Top BGCOLOR=Yellow> <!--Linha com texto centrado e em cima com fundo amarelo -->
     <TD>
         L3 C1
     </TD>
     <TD>
         L3 C2
     </TD>
     <TD>
         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 fechamento dos tags com </nome do tag> é essencial em tabelas, principalmente nas grandes tabelas. Em pequenas tabelas a ausência dos tags </TR> e </TD> pode até fazer a tabela ser exibida (aparentemente) correta num certo browser, mas poderá ser exibida deformada em outros browsers.

  2. É comum uma tabela começar pequena e, aos poucos, ela ir crescendo com a necessidade, assim tornando-se mais complexa. Daí a importância de se manter todos os tags fechados com </nome do tag> e manter organizada a folha de programação de modo que ela possa corresponder facilmente ao aspecto que se espera dela ao ser exibida num browser.

  3. Um dos tags mais comumente esquecidos de se fechar é o próprio tag <TABLE>, quando as tabelas de uma home page ficam muito grandes, porque o tag </TABLE> fica muito em baixo na folha de programação. Neste caso o que é exibido é uma confusão de textos sem nenhuma semelhança com uma tabela.

  4. Para se obter disciplina na elaboração da folha de programação é importante, desde o início do aprendizado, adquirir-se o hábito de manter indentações horizontais, espaçamentos verticais, comentários curtos e comentários delimitadores de áreas (Ex: <!--AQUI COMEÇA A TABELA "Tal" -->) em caixa alta e bem a direita, para não se misturar com os textos, tags e seus atributos, sendo assim mais facilmente encontrados.

  5. Os atributos de cor do atributo BGCOLOR podem ser também explícitos em códigos hexadecimais, consultando-se tabelas existentes em livros sobre HTML ou aplicando-se diretamente nos tags com editores próprios para código HTML.

 

Atualização em Agosto/2000 por