011 - TABELAS
Tabela - Tags Básicos
<BODY BACKGROUND="BGWite.jpg">
<P> <B> TAGS BÁSICOS DA TABELA </B>
<P>
Os tags <TR> e </TR> (Table Row=Linha) definem uma linha de
Os tags <TD> e </TD> (Table Data=Dados) definem quantas células
<TABLE BORDER=1>
<TR>
<TD>
Tabela com 1 célula
</TD>
</TR>
</TABLE>
<!--------------------------------------Descrição dos Tags
Os tags <TABLE BORDER=1> e </TABLE> limitam a tabela.
O atributo BORDER=1 é essencial se não houver fundo a cores
na tabela, que se verá como fazer mais adiante.
células, dentre os quais podem existir mais de um par de
tags <TD> e </TD>. No caso só tem um par e assim 1 célula.
existem em cada linha definida pelos tags <TR> e </TR>.
Haverá tantas células na linha quantos pares de tags
<TD> e </TD> existirem.
Entre uma par de <TD> e </TD> não pode deixar de ter um
conteudo, nem que seja espaço em branco, que em HTML se
digita: incluindo-se o ponto-e-vírgula
e significa: "non-break space".
------------------------------------------------------------>
<P> Tabela com 2 células em uma linha:
<TABLE BORDER=5>
<TR>
<TD>
Célula Lin 1 Col 1
</TD>
<TD>
Célula Lin 1 Col 2
</TD>
</TR>
Observe o TABLE BORDER=5
</TABLE>
<!-----------------------------------------------Observações
Neste caso existem 2 pares de <TD> e </TD> entre os
tags <TR> e </TR>.
Os tags acima foram digitados com grande espaçamento vertical
apenas para fins didáticos. Na prática este espaçamento pode
ser menor, mas as indentações horizontais dos tags, embora não
essenciais, são de grande importância na elaboração e manutenção
posterior de qualquer tabela.
-------------------------------------------------------->
<P> Tabela com 2 células em cada uma de 2 linhas:
<TABLE BORDER=3>
<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>
Observe o TABLE BORDER=3
<!-----------------------------------------------Observações
Neste caso existem 2 pares de tags <TR> e </TR> entre os
tags <TABLE BORDER> e </TABLE>, definindo 2 linhas.
Cada par de tags <TR> contém 2 pares de tags <TD>
---------------------------------------------------------->
</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:
Regra Importante: Cada par de tags <TR>, que representam linhas na tabela, tem que conter o mesmo número de pares de tags <TD>, que representam células de dados. Do contrário a tabela ficará deformada.
Num par de tags <TD>, que representa uma célula, pode-se formatar o texto, inserir imagens, links (ver mais adiante), selecionar cor de fundo da célula (como veremos adiante) e até inserir outra tabela (escapa ao escopo deste curso). Enfim:
Pode-se considerar uma célula como uma mini-home-page para fins de formatações e inserções.As tabelas com 1 só célula são muito usadas com BORDER=0 e fundo colorido para se destacar quadros sobre o fundo da home page, nos quais se pode formatar qualquer texto e inserir figuras que muito enriquecem o visual, como veremos adiante.
Exemplo:
A página de Introdução deste curso, contém apenas uma tabela com só 1 célula.Existe também os tags <TH> e </TH> (Table Header=Cabeçalho) que obedece aos mesmos requisitos do tag <TD> mas, automáticamente aparece com seu conteudo em NEGRITO e CENTRADO HORIZONTALMENTE na célula.
É usado para facilitar a montagem de:
Cabeçalhos Horizontais : <TH>s dentro do primeiro par de <TR> da tabela.
Cabeçalhos Verticais: <TH>s no lugar do primeiro <TD> dentro de cada par de <TR>, e pares de <TD>s daí por diante.Exemplo: As letras, abaixo, em tamanho maior nos THs, são apenas para enfatizar.
<HTML>
<HEAD>
<TITLE>
011 - TABELAS
</TITLE>
</HEAD>
<BODY BACKGROUND="BGWite.jpg">
<P> <TABLE BORDER=1 WIDTH=450>
<TR>
<TH>
Célula Lin 1 Col 1
</TH>
<TH>
Célula Lin 1 Col 2
</TH>
<TH>
Célula Lin 1 Col 3
</TH>
</TR>
<TR>
<TH>
Célula Lin 2 Col 1
</TH>
<TD>
Célula Lin 2 Col 2
</TD>
<TD>
Célula Lin 2 Col 3
</TD>
</TR>
</TABLE>
</BODY>
</HTML>
Atualização em Agosto/2000 por
