<P> <BODY BACKGROUND="BGWite.jpg">
<CENTER>
<P> <B> ATRIBUTOS DO TAG TR </B>
(TR) VALIGN : Alinhamento VERTICAL do texto nas
(TR) BGCOLOR: Cor do fundo das células de uma mesma linha,
<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).
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).
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:
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.
É 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.
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.
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.
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.