012 - TABELAS
Atributos do Tag <TABLE>: WIDTH e HEIGHT

       


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

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

<CENTER>
<!-----------------------------------------------------Observação 1
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> WIDTH (Largura) e HEIGHT (Altura)
<!-----------------------------------------------------Observação 2
Se não se especificar os atributos WIDTH e HEIGHT as células
se amoldam automaticamente ao tamanho da célula de maior conteudo.
Se se especificar, as células tornam-se fixas e o conteudo se
amolda a este limites porém, às vezes, com quebras de linhas.
A largura e altura se referem a cada uma das células, medidas
em quantidade de pontos percentuais.
----------------------------------------------------------->

<P> Fazendo-se WIDTH=200 e HEIGHT=100:
<TABLE BORDER=1 WIDTH=200 HEIGHT=100>

   <TR>
     <TD>
     Célula Lin 1 Col 1
     </TD>
     <TD>
     Célula Lin 1 Col 2
     </TD>
   </TR>

   <TR>
     <TD>
     Célula Lin 2 Col 1
     </TD>
     <TD>
     Célula Lin 2 Col 2
     </TD>
  </TR>

</TABLE>
<!-----------------------------------------------------Observação 3
Neste exemplo, o conteudo se amolda aos limites fixados de
largura com quebra de linha e portanto modificando a altura fixada.
------------------------------------------------------------>

<P> Fazendo-se WIDTH=250 e HEIGHT=100:
<BR> <TABLE BORDER=1 WIDTH=250 HEIGHT=100>

   <TR>
     <TD>
     Célula Lin 1 Col 1
     </TD>
     <TD>
     Célula Lin 1 Col 2
     </TD>
  </TR>

   <TR>
     <TD>
     Célula Lin 2 Col 1
     </TD>
     <TD>
     Célula Lin 2 Col 2
     </TD>
   </TR>

</TABLE>
<!-----------------------------------------------------Observação 4
Neste exemplo, o conteudo encontra limites fixados suficientes
para evitar quebra de linha e portanto mantendo a altura fixada.
------------------------------------------------------------>

</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 atributo WIDTH é mais usado do que o HEIGHT porque permite acabar com quebras de linhas indesejáveis nas células da tabela. Eles também podem ser usados separadamente.

  2. De preferência só usar usar WIDTH e/ou HEIGHT quando necessário. Seus valores são obtidos por tentativas sucessivas até se alcançar o efeito desejado.

 

Atualização em Agosto/2000 por