| HTML PARA INICIANTES |
Tabelas são freqüentemente utilizadas para permitirem dispor textos e imagens em determinados espaços da página, enriquecendo o aspecto visual da mesma e facilitando a navegação, isto é, quando bem empregadas.
Uma vez que tabelas contém linhas e colunas, pode-se estipular quantas linhas e colunas se deseja colocar na página, estipular a altura e largura de cada linha e coluna, estipular porteriormente quantas divisões (células) cada linha e coluna deve ter, e posteriormente decidir o que colocar, ou não colocar (deixar vazia), em cada uma dessas células. Como os navegadores exibem mais comumente uma tela de 800 por 600 pixels, darei exemplos com base nesse tamanho de tela.
Os elementos das tabelas tem a seguinte codificação html:
| <TABLE> | ||
| <TR> | ||
| <TD> | ||
| </TD> | ||
| </TR> | ||
| </TABLE> |
Você notou que os elementos vem com tags aos pares, Table e /Table, Tr e /Tr, Td e /Td, a você notou que propositalmente foi alinhado da mesma forma cada tag de abertura e de fechamento, isto porque com a inserção de mais informações como a inclusão de textos, imagens, áudio e scripts, você acabará perdendo a noção de conjunto e poderá esquecer de abrir ou fechar algum par de tag, prejudicando o resultado da tabela. Por isso, acostume-se a alinhar a tag de abertura com a tag de fechamento, facilitando a checagem posterior da digitação html da página.
Este alinhamento de tags é muito fácil de ser conseguido, basta você acionar a tecla Tab do seu teclado.
Neste exemplo de tabela ela tem 3 linhas e 2 colunas. Você deve observar que foi digitado o elemento TH, que nada mais é do que um elemento TD com uma característica especial de alinhamento centralizado e efeito negrito. O elemento TH deve ser usado para a célula contendo título. Caso você queira, dispense o uso de TH e use somente TD.
<TABLE>
<TR> (1a. linha contendo títulos das colunas)
<TH> Italiano
</TH>
<TH> English
</TH>
</TR>
<TR> (2a. linha)
<TD> attenzione:
</TD>
<TD> warning:
</TD>
</TR>
<TR> (3a. linha)
<TD> Questo sito è rigorosamente vietato ai minori di 18 anni
in quanto contiene esplicitamente testi e scene di sesso gay
riservate ad un pubblico adulto. Se hai un'età inferiore a 18 anni
o ritieni che materiale del genere possa turbarti e offendere la
tua persona esci adesso da questo sito. Entrando, invece, dichiari
di essere maggiorenne e di accettare il materiale pornografico
contenuto all'interno del sito e che è tua intenzione visionare
tale materiale, esonerando gli autori di queste pagine da ogni
responsabilità al riguardo.
</TD>
<TD> This website contains material that is inappropriate
for users under the age of 18 and may be controversial and/or
offensive to some adults. Do not enter if you are under 18,
or the laws of your state or local province prohibit the
viewing/use of material of this nature. By entering below, you
are certifying that you are of legal age and wish to view the
material contained herein.
</TD>
</TR>
</TABLE>
|
O resultado deste html para tabela você vê agora:
| Italiano | English |
|---|---|
| attenzione: | warning: |
| Questo sito è rigorosamente vietato ai minori di 18 anni in quanto contiene esplicitamente testi e scene di sesso gay riservate ad un pubblico adulto. Se hai un'età inferiore a 18 anni o ritieni che materiale del genere possa turbarti e offendere la tua persona esci adesso da questo sito. Entrando, invece, dichiari di essere maggiorenne e di accettare il materiale pornografico contenuto all'interno del sito e che è tua intenzione visionare tale materiale, esonerando gli autori di queste pagine da ogni responsabilità al riguardo. | This gay website contains material that is inappropriate for users under the age of 18 and may be controversial and/or offensive to some adults. Do not enter if you are under 18, or the laws of your state or local province prohibit the viewing/use of material of this nature. By entering below, you are certifying that you are of legal age and wish to view the material contained herein. |
Não ficou muito agradável a visualização da tabela acima, por certo devido a ausência de definir atributos para os elementos, você vai aprender a colocá-los daqui a pouco. Veja o resumo abaixo dos elementos de uma tabela. Note a diferença da apresentação, foram usados atributos para os elementos, como bordas, alinhamento, tamanho das células, ficando muito agradável a leitura.
| Elementos das Tabelas | |
|---|---|
| Elemento | Descrição |
| <TABLE> ... </TABLE> | define o início de uma tabela. Se o atributo BORDER for mencionado dentro desta tag, o navegador apresentará a tabela como uma borda, como é o caso dessa tabela. |
| <TR> ... </TR> | especifica o início de uma linha dentro da tabela. O 'default' (padrão) dos navegadores é aceitar TR com atributo ALIGN igual a left, isto é, o conteúdo da linha está alinhado à esquerda. |
| <TH> ... </TH> | define uma célula dentro da linha. Pode-se repetir TH quantas vezes quiser, criando várias célula na mesma linha. TH é uma célula designada para conter título, alinhado no centro e com efeito de negrito. Pode-se não usar TH na tabela, recorrendo-se ao uso de apenas TD. |
| <TD> ... </TD> | define uma célula dentro da linha. Por 'default' o texto dentro da célula vem alinhado à esquerda e centralizado verticalmente. TD pode conter textos, imagens, links e mesmo outra tabela (tabela dentro de tabela). |
Os atributos de uma tabela especificam comportamentos para os elementos e são como embelezadores de uma tabela. Você vai usá-los sempre que quiser criar uma tabela bem estruturada.
| Atributos das tabelas | |
|---|---|
| Atributo | Descrição |
| WIDTH | largura da tabela, use preferencialmente dimensão em pixels, exemplo: WIDTH="760px" ou em porcentagem, exemplo WIDTH="95%". |
| HEIGHT | altura da tabela, exemplo: HEIGHT="600px" ou HEIGHT="100%" |
| BACKGROUND | um endereço de uma imagem de fundo, exemplo: BACKGROUND="estrelas.gif" ou BACKGROUND="http://www.meusite.hpg.ig.com.br/gifs/estrelas.gif". |
| BGCOLOR | uma cor, exemplo: BGCOLOR="#FFFF00" (amarelo) |
| BORDER | a dimensão da borda é um número 1,2,3,4,5,6,... usando-se valores menores para bordas mais esbeltas. Para uma tabela sem bordas basta omitir este atributo. |
| BORDERCOLOR | uma cor, exemplo: BGCOLOR="#FF0000" (vermelho) |
| CELLPADDING | para espaçar o conteúdo da célula em relação ao limite externo desta célula. Aa dimensão é um número 1,2,3..., quanto maior o número, mais distante das bordas da célula o objeto contido na célula ficará. |
| CELLSPACING | para espaçar uma célula de outra célula. |
| ALIGN | alinhamento horizontal do conteúdo da célula. As opções são: ALIGN="left" - ALIGN="center" - ALIGN="right". |
| VALIGN | alinhamento vertical do conteúdo da célula. As opções são: VALIGN="top" - VALIGN="middle" - VALIGN="bottom". |
| COLSPAN= | usado para mesclar 2 ou mais células de uma coluna, tornando-as numa única célula naquela coluna. |
| ROWSPAN= | usado para mesclar 2 ou mais células de uma linha, tornando-as numa única célula naquela linha. |
| NOWRAP | para impedir que o texto em uma linha seja colocado na linha subseqüente, forçando o texto a seguir horizontalmente naquela linha, e se for um texto que seja maior do que a largura da tela, será necessário o internauta usar a barra de movimentação horizontal ('scrolling bar') para poder visualisá-lo. |
Os atributos usados nos elementos TH e TD prevalecem sobre os usados em TR, por exemplo, se você colocar cor vermelha para BGCOLOR em uma célula TD, e colocar cor amarela para BGCOLOR em uma linha TR, a cor vermelha da célula ficará aparecendo e a cor amarela da linha não ficará aparecendo nesta célula.
Você pode colocar quantas linhas TR quiser, quantas células TD quiser. Contudo, procure criar, se possível, uma tabela que esteja contida na área de visualização, comumente uma área de 800 por 600 pixels. Isto para que não se perca o aspecto de conjunto das informações contidas na tabela.
Lembra-se da tabela anteriormente apresentada com texto em inglês e italiano? vamos melhorá-la agora aplicando os atributos das tabelas.
O elemento <TABLE> vai receber vários atributos, separados por um espaço, você pode digitar tudo em minúsculo e pode ainda omitir o uso de aspas, como sou tradicionalista, usarei maiúsculas e aspas.
Dentro da tag <TABLE> atribui certos valores arbitrariamente, ao meu gosto de webdesigner, poderiam ser outros valores, que gerariam outros aspectos para a tabela.
WIDTH="600px": largura 600px, poderia colocar em porcentagem 75% (que equivale a 600px admitindo uma tela padronizada em 800px de largura).
HEIGHT="100%": altura 100%, escolhi dimensão em porcentagem pois não projetei quais seriam as alturas das várias linhas da tabela. Se usasse uma dimensão em pixels, teria que calcular as várias alturas das várias linhas, somar tudo e este total daria o valor exato de HEIGHT.
BGCOLOR="#ffe4b5": a tabela tem fundo na cor mocassim.
BORDER="1": a tabela tem bordas de espessura mínima. A borda é do tipo sólida, a única possível, infelizmente não há opção de borda em pontos, traços, linha dupla, etc.
BORDERCOLOR="#0000ff": a tabela tem bordas de cor azul.
CELLPADDING="10": a distância adotada entre o texto e o contorno da célula. Evita-se assim que o texto fique colado na borda.
Portanto, veja abaixo o html para <TABLE> e seu resultado.
| <TABLE WIDTH="600px" HEIGHT="100%" BGCOLOR="#ffe4b5" BORDER="1" BORDERCOLOR="#0000ff" CELLPADDING="10"> |
| Italiano | English |
|---|---|
| attenzione: | warning: |
| Questo sito è rigorosamente vietato ai minori di 18 anni in quanto contiene esplicitamente testi e scene di sesso gay riservate ad un pubblico adulto. Se hai un'età inferiore a 18 anni o ritieni che materiale del genere possa turbarti e offendere la tua persona esci adesso da questo sito. Entrando, invece, dichiari di essere maggiorenne e di accettare il materiale pornografico contenuto all'interno del sito e che è tua intenzione visionare tale materiale, esonerando gli autori di queste pagine da ogni responsabilità al riguardo. | This gay website contains material that is inappropriate for users under the age of 18 and may be controversial and/or offensive to some adults. Do not enter if you are under 18, or the laws of your state or local province prohibit the viewing/use of material of this nature. By entering below, you are certifying that you are of legal age and wish to view the material contained herein. |
Outros atributos possíveis para <TABLE>, como por exemplo, BACKGROUND, não houve interesse em seu uso nesta tabela. Agora, continuando a melhor o aspecto visual da tabela, passaremos a admitir valores ao elemento TR:
ALIGN="center": a linha tem alinhamento horizontal centralizado, isto é, colocado um texto ou imagem dentro da célula, ficará centralizada horizontalmente.
VALIGN="middle": a linha tem alinhamento vertical centralizado, isto é, colocado um texto ou imagem dentro da célula, ficará centralizada verticalmente.
Este é o html para todos os <TR>, evidentemente poderia admitir valores diferentes em alguma linha, mas neste caso adoto todas as linhas centralizadas tanto vertical como horizontalmente.
| <TR ALIGN="center" VALIGN="middle"> |
Como este é o 'default' dos navegadores, poderia ser omitido estas informações de atributos, contudo deve-se atribuir valores evitando-se que o visual desejado para a tabela sofra alteração em algum computador de internauta que tenha mudado por contra própria o 'default' de seu computador.
Em <TR> poderia ter sido digitados os atributos WIDTH e HEIGHT, mas uma vez que o WIDTH e HEIGHT do elemento <TD> prevalecem sobre os digitados em <TR>, não admito valores nenhum destes atributos em <TR>, ficarão valendo os que for adotados em <TD>. Também ao não admitir valor algum para BGCOLOR em <TR>, será exibida linha na cor BGCOLOR admitida para <TABLE>, contudo possivelmente seria bom alterar a cor de <TD> relativa aos títulos (Italiano - English), para a cor ouro, BGCOLOR="#ffd700", ficando para esta linha o html mostrado abaixo e que resulta na tabela mostrada a seguir.
| <TR ALIGN="center" VALIGN="middle" BGCOLOR="#ffd700"> |
| Italiano | English |
|---|---|
| attenzione: | warning: |
| Questo sito è rigorosamente vietato ai minori di 18 anni in quanto contiene esplicitamente testi e scene di sesso gay riservate ad un pubblico adulto. Se hai un'età inferiore a 18 anni o ritieni che materiale del genere possa turbarti e offendere la tua persona esci adesso da questo sito. Entrando, invece, dichiari di essere maggiorenne e di accettare il materiale pornografico contenuto all'interno del sito e che è tua intenzione visionare tale materiale, esonerando gli autori di queste pagine da ogni responsabilità al riguardo. | This gay website contains material that is inappropriate for users under the age of 18 and may be controversial and/or offensive to some adults. Do not enter if you are under 18, or the laws of your state or local province prohibit the viewing/use of material of this nature. By entering below, you are certifying that you are of legal age and wish to view the material contained herein. |
Vamos diminuir a altura das células dos títulos, portanto, vamos admitir valores de HEIGHT para os <TD> que fazem parte da primeira linha. No chute, admitamos que a altura da primeira linha que causa aspecto mais agradável seja de 50 pixels, HEIGHT="50px", se não for, digitamos 55px, 80px, etc. até encontrarmos uma altura que fique OK.
| <TR ALIGN="center" VALIGN="middle" BGCOLOR="#ffd700" HEIGHT="50px"> |
| Italiano | English |
|---|---|
| attenzione: | warning: |
| Questo sito è rigorosamente vietato ai minori di 18 anni in quanto contiene esplicitamente testi e scene di sesso gay riservate ad un pubblico adulto. Se hai un'età inferiore a 18 anni o ritieni che materiale del genere possa turbarti e offendere la tua persona esci adesso da questo sito. Entrando, invece, dichiari di essere maggiorenne e di accettare il materiale pornografico contenuto all'interno del sito e che è tua intenzione visionare tale materiale, esonerando gli autori di queste pagine da ogni responsabilità al riguardo. | This gay website contains material that is inappropriate for users under the age of 18 and may be controversial and/or offensive to some adults. Do not enter if you are under 18, or the laws of your state or local province prohibit the viewing/use of material of this nature. By entering below, you are certifying that you are of legal age and wish to view the material contained herein. |
A primeira linha tem agora uma altura de 40 pixels. O atributo cellpadding de <TABLE> influencia esta altura, pois está impondo uma distância de 10 pixels à esquerda, direita, acima e abaixo do texto. Bom lembrar ainda que se você admitir um HEIGHT insuficiente para caber o texto e o cellpadding, o navegador fará automaticamente o ajuste para uma altura tal que caiba o texto e a distância determinada em cellpadding.
A segunda linha contendo texto attenzione e warning pode ter o atributo BGCOLOR de <TR> assumido como BGCOLOR="#000000", fundo de cor preta. E o texto pode receber a tag <MARQUEE> </MARQUEE>, causando um efeito dinâmico ao texto, a presença de movimento enriquece a página, mas deve ser evitado excessos, para não causar incômodo visual (alguns internauta simplesmente odeiam texto em movimento!). Basta digitar <MARQUEE>Attenzione</MARQUEE> e mudar a fonte para cor branca, espaço entre uma palavra e outra consegue-se repetindo e mudou=se para HEIGHT="45px", veja a codificação a seguir, relativos à segunda linha.
| <TR ALIGN="center" VALIGN="middle" BGCOLOR="#ffd700" HEIGHT="45px"> |
| Italiano | English |
|---|---|
| Questo sito è rigorosamente vietato ai minori di 18 anni in quanto contiene esplicitamente testi e scene di sesso gay riservate ad un pubblico adulto. Se hai un'età inferiore a 18 anni o ritieni che materiale del genere possa turbarti e offendere la tua persona esci adesso da questo sito. Entrando, invece, dichiari di essere maggiorenne e di accettare il materiale pornografico contenuto all'interno del sito e che è tua intenzione visionare tale materiale, esonerando gli autori di queste pagine da ogni responsabilità al riguardo. | This gay website contains material that is inappropriate for users under the age of 18 and may be controversial and/or offensive to some adults. Do not enter if you are under 18, or the laws of your state or local province prohibit the viewing/use of material of this nature. By entering below, you are certifying that you are of legal age and wish to view the material contained herein. |
Por fim, a terceira linha, esta <TR> ainda está com a cor de fundo referente a <TABLE>, está bom assim, mas a altura pode ser diminuída, pode-se mudar a altura em <TR>, mas só para exemplificar o que acontece, vamos admitir uma altura para as <TD> desta última <TR>. Tem que ser por chute, vamos chutar
| <TD HEIGHT="250px"> |
e não se esqueça que a última <TR> tem 2 <TD>, você deve digitar este html nos dois. Em verdade, se você admitir uma dada altura para uma célula em uma linha, e esquecer de alterar a altura nas outras células, a linha ficará com a maior altura dentre as alturas das várias células.
Veja como fica a tabela:
| Italiano | English |
|---|---|
| Questo sito è rigorosamente vietato ai minori di 18 anni in quanto contiene esplicitamente testi e scene di sesso gay riservate ad un pubblico adulto. Se hai un'età inferiore a 18 anni o ritieni che materiale del genere possa turbarti e offendere la tua persona esci adesso da questo sito. Entrando, invece, dichiari di essere maggiorenne e di accettare il materiale pornografico contenuto all'interno del sito e che è tua intenzione visionare tale materiale, esonerando gli autori di queste pagine da ogni responsabilità al riguardo. | This gay website contains material that is inappropriate for users under the age of 18 and may be controversial and/or offensive to some adults. Do not enter if you are under 18, or the laws of your state or local province prohibit the viewing/use of material of this nature. By entering below, you are certifying that you are of legal age and wish to view the material contained herein. |
Não houve alteração, devemos acertar HEIGHT em <TABLE>, inicialmente admitido como HEIGHT="100%", poré agora sabemos que o valor verdadeiro é a soma dos HEIGHT contidos nas TR e TD da tabela. Logo, primeira linha tem HEIGHT=45px, segunda linha tem HEIGHT=30px e as últimas células tem HEIGHT=250px. Portanto, somando as alturas, 45 + 30 + 250 = 325px, logo <TABLE> deve ser corrigido de HEIGHT="100%" para HEIGHT="250px", e a tabela fica assim:
| Italiano | English |
|---|---|
| Questo sito è rigorosamente vietato ai minori di 18 anni in quanto contiene esplicitamente testi e scene di sesso gay riservate ad un pubblico adulto. Se hai un'età inferiore a 18 anni o ritieni che materiale del genere possa turbarti e offendere la tua persona esci adesso da questo sito. Entrando, invece, dichiari di essere maggiorenne e di accettare il materiale pornografico contenuto all'interno del sito e che è tua intenzione visionare tale materiale, esonerando gli autori di queste pagine da ogni responsabilità al riguardo. | This gay website contains material that is inappropriate for users under the age of 18 and may be controversial and/or offensive to some adults. Do not enter if you are under 18, or the laws of your state or local province prohibit the viewing/use of material of this nature. By entering below, you are certifying that you are of legal age and wish to view the material contained herein. |
Aqui está o html desta tabela.
<TABLE WIDTH="660px" HEIGHT="325px" BGCOLOR="#ffe4b5" BORDER="1" BORDERCOLOR="#0000ff" CELLPADDING="10">
<TR BGCOLOR="#ffd700" HEIGHT="45px">
<TH> <FONT FACE="verdana" SIZE="3" color="#ff6347"> Italiano </FONT>
</TH>
<TH> <FONT FACE="verdana" SIZE="3" color="#ff6347"> English </FONT>
</TH>
</TR>
<TR BGCOLOR="#000000" HEIGHT="30px">
<TD> <MARQUEE> <FONT COLOR="#ffffff" SIZE=4> attenzione ATTENZIONE </FONT> </MARQUEE>
</TD>
<TD> <MARQUEE> <FONT COLOR="#ffffff" SIZE=4> warning WARNING </FONT> </MARQUEE>
</TD>
</TR>
<TR>
<TD HEIGHT="165px"> Questo sito è rigorosamente vietato ai minori di 18 anni in quanto contiene esplicitamente testi e scene di sesso gay riservate ad un pubblico adulto. Se hai un'età inferiore a 18 anni o ritieni che materiale del genere possa turbarti e offendere la tua persona esci adesso da questo sito. Entrando, invece, dichiari di essere maggiorenne e di accettare il materiale pornografico contenuto all'interno del sito e che è tua intenzione visionare tale materiale, esonerando gli autori di queste pagine da ogni responsabilità al riguardo.
</TD>
<TD HEIGHT="165px"> This gay website contains material that is inappropriate for users under the age of 18 and may be controversial and/or offensive to some adults. Do not enter if you are under 18, or the laws of your state or local province prohibit the viewing/use of material of this nature. By entering below, you are certifying that you are of legal age and wish to view the material contained herein.
</TD>
</TR>
</TABLE>
Uma tabela dentro de uma tabela pode ser usada, por exemplo, para colocar uma barra de navegação com seus vários links numa tabela à esquerda, e os textos e imagens numa outra tabela à direita.
Veja o exemplo abaixo:
|
Os links à esquerda permitem que você abra novas janelas e navegue pelo Meu Site! Sugiro visitar o site abaixo (a janela de HTML para Iniciantes continuará aberta, então por que você não clica e dá uma olhadinha ?) |
O html da tabela acima é este:
<TABLE WIDTH="500px" HEIGHT="200px" BGCOLOR="#f4a460" BORDER="1">
<TR>
<TD>
<TABLE WIDTH="100px" HEIGHT="100%" BORDER="1">
<TR ALIGN="center" VALIGN="middle">
<TD HEIGHT="25%"> Menu
</TD>
</TR>
<TR>
<TD HEIGHT="5%">
</TD>
</TR>
<TR ALIGN="center" VALIGN="middle" BGCOLOR="#f5f5dc">
<TD HEIGHT="20%> <A HREF="parte5.html"> Assunto 1 </A>
</TD>
</TR>
<TR>
<TD HEIGHT="5%">
</TD>
</TR>
<TR ALIGN="center" VALIGN="middle" BGCOLOR="#f5f5dc">
<TD HEIGHT="20%> <A HREF="parte5.html"> Assunto 2 </A>
</TD>
</TR>
<TR>
<TD HEIGHT="5%">
</TD>
</TR>
<TR ALIGN="center" VALIGN="middle" BGCOLOR="#f5f5dc">
<TD HEIGHT="20%> <A HREF="parte5.html"> Assunto 3 </A>
</TD>
</TR>
</TABLE>
</TD>
<TD WIDTH="400px" BGCOLOR="#f5f5dc"> <CENTER> <FONT SIZE="6"> Meu 1<s>°</s> Site </FONT> </CENTER> <BR> <HR COLOR="#ff0000" WIDTH="90%"> <P ALIGN="center"> <FONT SIZE="2" COLOR="#ff0000"> Os links à esquerda permitem que você abra novas janelas e navegue pelo Meu Site! Sugiro visiar o site abaixo (a janela de HTML para Iniciantes continuará aberta, então por que você não clica e dá uma olhadinha ?) </FONT> <BR> <A HREF="http://www.carnivalhp.hpg.ig.com.br/index.htm"> <IMG SRC="./parte5carnival.gif" ALT="visite este site" WIDTH="297" HEIGHT="38" BORDER="0" TARGET="_blank"> </A> </P>
</TD>
</TR>
</TABLE>
