Você está na página 1de 6

Trabalhando com Tabelas

É fato que as tabelas ajudam na organização e melhor visualização de uma página HTML, pois as
informações ficam tabuladas semelhante a urna planilha eletrônica.

Outro fato é que, quando inserimos tabelas em nossas páginas HTML, nosso site ganha um ar de
profissionalismo.

Vamos conhecer agora os comandos que participam da elaboração de uma tabela simples e
depois vamos aprender a aperfeiçoar nossa tabela.

Os Tags Necessários para Criação de Tabelas


Felizmente, a linguagem HTML apresenta poucos tags para a criação de tabelas. Com a
combinação desses tags, você poderá criar qualquer tipo de tabela que queira.

A seguir, você verá os tags que aprenderemos para construir uma tabela na linguagem HTML.
São eles:

<TABLE> ... </TABLE>: Tags que delimitam os comandos que farão parte da elaboração
da tabela.

<TR> ... </TR>: Tag que tem a função de criar as linhas de uma tabela.

<TD> ... </TD>: Tag que tem a função de criar as células de uma
tabela.
<TH> ... </TH>: Semelhante ao tag <TD>, mas transforma o texto em negrito e
centralizado.
<CAPTION> ... </CAPTION>: Tag que permite a colocação de legendas.

Carregando o Internet Explorer


Vamos carregar o Internet Explorer (caso você não o tenha carregado) e, em seguida,
vamos dar sequência às explicações do Capítulo 4.

1.Dê um clique no botão Iniciar, escolha a opção Programas e, em seguida, dê um clique


na opção Internet Explorer.

2.Finalmente, dê um clique na opção Internet Explorer,


Ou

3.Dê um clique no botão Iniciar o navegador do Internet Explorer localizado na barra de


tarefas do Windows.

Aguarde enquanto o programa é carregado.

Neste momento NÃO é necessário você se conectar com seu provedor de


acesso para seguir as explicações deste livro.

Construindo uma Tabela Simples


Com alguns tags relacionados anteriormente, vamos agora aprender como construir uma tabela
simples.

Observe este exemplo de construção de tabelas:

<HTHL>
<HEfiD>
<TITLE> Trabalhando con Tabelas </TITLE>
</HEflD>
<BODV>
<H2>Una tsbela sinples:</H2>
<TftBLE BORDER>
<TR>
<TD>flK/TD>
<TD>BK/TD>
<TD>CK/TD>
</TR> <TR>
<TD>fi2</TD>
<TD>B2</TD>
<TD>C2</TD>
</TR>
</TflBLE>
</BODV>
</HTML>

Agora veja como o Internet Explorer interpreta este exemplo:

LINK

O exemplo mostra a construção de uma tabela simples, mas precisamos saber também como
aperfeiçoar uma tabela criada.

As próximas seções mostram como você deve proceder para aperfeiçoar uma tabela.
Primeiramente, mostram como modificar suas dimensões, depois, como inserir títulos, bordas,
legendas, cores e imagens.
Aperfeiçoando a Tabela
Depois que você constrói uma tabela e visualiza o resultado, é comum você querer alterar
alguma coisa. O aperfeiçoamento de uma tabela é um processo natural e deixá-la com uma
aparência melhor ajuda na visualização das informações.

A seguir, você verá as seções que ensinam como fazer isso.

Modificando as Dimensões
Quando falamos de como modificar as dimensões de uma tabela, estamos falando da
possibilidade de expansão de suas linhas e colunas.

Em uma tabela, o conjunto de linhas e colunas recebe o nome de células. Para aumentar essas
células utilizaremos o tag <TD> seguido dos parâmetros ROWSPAN (linha) e COLSPAN
(coluna).

Observe o exemplo a seguir:

<HTML>
ÍHEftDXTITLE> Trabalhando com Tabelas II </TITLEX/HEflD> <BODV>
<H2>Expandindo a coluna fi en duas células:</H2> <TflBLE BORDER>
<TRXTD flLIGH=CENTER
COLSPflN=2>fi1</TD><TD>B1</TDXTD>CK/TD></TR>
<TRXTD>fl2</TDXTD>B2</TDXTD>C2</TDX/TR> </TflBLE>
<H2>Expandindo a linha 1 em duas células:</H2> <TflBLE BORDER>
<TRXTD UflLIGN=TGP
ROWSPftH=2>Hl</TDXTD>B1</TDXTD>C1</TD></TR>
<TRXTD>fi2</TDXTD>B2</TDXTB>C2</TDX/TR>
<TRXTD>H3</TDXTD>B3</TDXTD>C3</TDX/TR> </TflBLE>
</BODV> </HTML>

Agora observe como o Internet Explorer interpreta este exemplo:

Títulos

Se você aprendeu a usar o tag <TD>, não achará difícil aprender o tag <TH>.

Este tag tem uma função semelhante ao <TD>, mas com a característica de transformar o texto
em negrito e centralizado, por esse motivo ele é aplicado em títulos.

Observe o exemplo a seguir:

LINK

Agora observe como o Internet Explorer interpreta este exemplo:


Bordas
Muitas vezes, a aplicação de bordas em uma tabela ajuda em sua visualização.

Vamos aprender a criar bordas usando parâmetro BORDER do tag <TABLE>. Observe o exemplo a
seguir:

Link

Agora observe como o Internet Explorer interpreta este exemplo:

Link

Legendas

Além de um título para as células da tabela, conforme vimos com a aplicação do tag <TH>, pode
ser que você queira inserir legendas explicativas em torno da tabela que você criou.

Na linguagem HTML, o tag <CAPTION> permite que você coloque legendas no topo ou no rodapé
da tabela.

Observe o exemplo a seguir:

Link

Agora observe como o Internet Explorer interpreta este exemplo:

Link

Aplicando Cores
Outro detalhe de aperfeiçoamento de uma tabela é a aplicação de cores.

Você não deve transformar sua tabela em um carnaval de cores (apesar da linguagem HTML
propiciar tal coisa), mas, muitas vezes, pode existir a necessidade de colorir uma célula específica ou
mesmo a tabela inteira.

Para colorir uma célula específica você irá utilizar o tag <TD>, seguido do parâmetro BGCOLOR e
para colorir a tabela inteira você irá utilizar o tag <TABLE>, seguido do mesmo parâmetro
BGCOLOR.

Observe os exemplos a seguir. O primeiro aplica cor em uma célula específica.

Link

Agora observe como o Internet Explore interpreta este exemplo:

Link

O segundo aplica cor na tabela inteira:


link

Agora observe como Internet Explore interpreta este outro exemplo:

Link

Inserindo Imagem

Como último item de aperfeiçoamento de tabelas, aprenderemos agora a inserir imagens.

Também nesse caso é possível você inserir uma imagem em uma célula específica ou em uma
tabela inteira.

Observe os exemplos a seguir, os dois primeiros inserem uma figura em uma célula específica.

Primeiro exemplo:

Lnk

Agora observe como o Internet Explorer interpreta este exemplo:

Link

Segundo exemplo:

Link

Agora observe como o Internet Explorer interpreta este exemplo:

Link

Os dois segundos exemplos inserem uma figura na tabela inteira:

Link

Agora observe como o Internet Explorer interpreta este exemplo:

Link

Para finalizar, observe este último exemplo.

Link

Agora observe como o Internet Explorer interpreta este exemplo:

Link

Agora observe como o Internet Explorer interpreta este exemplo:


Finalizando
Todos os exemplos mostrados neste capítulo você poderá encontrar também na pasta de exercícios
que foi gerado quando você instalou 0 disquete que acompanha este livro.

Você pode abrir estes arquivos usando o Windows Explorer, localizando-os e, simplesmente,
dando um clique duplo sobre eles. Com esse procedimento, você visualiza um arquivo HTML
no seu navegador.

Caso você queira verificar seu código fonte, proceda da seguinte forma:

1.Dê um clique com o botão direito do mouse em algum lugar da


página para trazer o menu suspenso do Internet Explorer.
2.Em seguida, dê um clique na opção Exibir código fonte para abrir o
programa Bloco de notas.

Revisão Rápida
A seguir, apresentamos um exercício que contém alguns "desafios" que você certamente
resolverá sozinho. Caso não consiga fazê-lo, consulte novamente o Capítulo 4.

Carregue o programa Bloco de notas.

Construa uma tabela contendo o nome, idade, peso e altura de cada membro de sua família.

Aplique nesta tabela uma borda de valor igual a 5. Aplique a cor amarela para o fundo
e azul para o texto.

Salve o arquivo com o nome REVCap4.htm na pasta C:\HTML Passo a Passo


Lite\Capítulo 4\Revisão Cap4.

Saia do Bloco de Notas

Abra o Internet Explorer

Carregue o arquivo RevCap4 e visualize a página criada.

Feche o Internet Explorer.