013 - TABELAS
Atributos do Tag <TABLE>: ALIGN e BGCOLOR

       


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

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

<CENTER>
<!----------------------------------------Conteudo Centrado da HP
Repare o tag <CENTER> abaixo de <BODY> e
o </CENTER> acima de </BODY> fazendo
todo o conteudo da home page ficar centrado.
------------------------------------------------------------->

<P> <B> ATRIBUTOS DO TAG TABLE </B>

<P> ALIGN (Alinhamento horizontal na tela)
<BR>BGCOLOR (BackGround Color)
<BR>Cor de Fundo da Tabela

<TABLE BORDER=1 ALIGN=Left BGCOLOR=Yellow>
<!-----------------------------------------------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>
     Lin 1 Col 1
     </TD>
     <TD>
     Lin 1 Col 2
     </TD>
  </TR>

   <TR>
     <TD>
     Lin 2 Col 1
     </TD>
     <TD>
     Lin 2 Col 2
     </TD>
  </TR>

</TABLE>
<!--------------------------------------Tabela Amarela à Esquerda
Com ALIGN=Left a tabela se posiciona a esquerda apesar de haver
o tag <CENTER> antes dela. Os valores para ALIGN são:
Left (Esquerda), Center (Centro) e Right (Direita) da tela.
Com BGCOLOR=Yellow a cor do fundo da tabela é exibida amarela.
----------------------------------------------------------->

<TABLE BORDER=1 ALIGN=Right BGCOLOR=Aqua>

   <TR>
     <TD>
     Lin 1 Col 1
     </TD>
     <TD>
     Lin 1 Col 2
     </TD>
  </TR>

   <TR>
     <TD>
     Lin 2 Col 1
     </TD>
     <TD>
     Lin 2 Col 2
     </TD>
  </TR>

</TABLE>
<!--------------------------------------Tabela Azul à Direita
Com ALIGN=Right a tabela se posiciona a direita apesar de haver
o tag <CENTER> antes dela.
Com BGCOLOR=Aqua a cor do fundo da tabela é exibida água marinha.
------------------------------------------------------------>

<TABLE BORDER=1 ALIGN=Center BGCOLOR=Red>

   <TR>
     <TD>
     Lin 1 Col 1
     </TD>
     <TD>
     Lin 1 Col 2
     </TD>
  </TR>

   <TR>
     <TD>
     Lin 2 Col 1
     </TD>
     <TD>
     Lin 2 Col 2
     </TD>
  </TR>

</TABLE>
<!--------------------------------------Tabela Vermelha ao Centro
Com ALIGN=Center a tabela se posiciona ao centro apenas confirmando
o tag <CENTER> antes dela.
ATENÇÃO: Para se obter o efeito da imagem abaixo, as tabelas
devem ter a seguinte disposição vertical: Tabela ALIGN=Left,
Tabela ALIGN=Right e por último Tabela ALIGN=Center, como acima.

O uso normal é ALIGN=Left e ALIGN=Right, para se por uma
tabela ao lado da outra. O ALIGN=Center se usa normalmente em
tabelas isoladas. A centralização da tabela na tela também pode
ser obtida sem ALIGN, mas com os tags <CENTER> e </CENTER>.
Com BGCOLOR=Red a cor do fundo da tabela é exibida vermelha.
------------------------------------------------------------->

</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 na mesma pasta do computador em que se encontram os arquivos 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. A cor que se declara com o atributo BGCOLOR do tag <TABLE> afeta toda a tabela exceto onde outros atributos BGCOLOR dos tags <TR> e <TD> (ou tag <TH>) explicitarem outra cor, como veremos adiante.

  2. Tabela com uma só célula são muito usadas utilizando-se BORDER=O e uma cor de fundo adequada, para se abrir pequenas (ou grandes) janelas na home page. Exemplo:

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

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

    <TABLE BORDER=0 WIDTH=250 BGCOLOR=Aqua>

       <TR>
         <TD>


         <CENTER><B>TABELA SEM BORDAS</B></CENTER>
         <P ALIGN=justify>
         Servidor é um computador que recebe
         e envia arquivos entre computadores
         em uma rede de computadores.
         <BR>Os provedores de conexões Internet
         possuem servidores que realizam
         esta função na Internet.


         </TD>
      </TR>

    </TABLE>

    </CENTER>

    </BODY>

    </HTML>

  3. Outra aplicação muito usada para as tabelas, com apenas uma célula, é a de se exibir molduras em torno imagens, principalmente, fotos. Exemplo:
    OBS: Para se testar o exemplo abaixo é necessário proceder a um download do arquivo Flor05.jpg (1,5 Kb) para a mesma pasta do computador em que se salvar a homepage de teste, clicando AQUI.

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

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

    <TABLE BORDER=6>

       <TR>
         <TD>


         <IMG SRC="Flor05.jpg">


         </TD>
      </TR>

    </TABLE>

    </CENTER>

    </BODY>

    </HTML>

  4. 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
1