Apostila de HTML 04

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.
LINK

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
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.
Link
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
Link
Segundo exemplo:
Link
Link
Os dois segundos exemplos inserem uma figura na tabela inteira:
Link
Link
Para finalizar, observe este último exemplo.
Link
Link

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.

Apostila de HTML 04

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Apostila de HTML 04

Uploaded by

Copyright:

Available Formats

Trabalhando com Tabelas

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

Carregando o Internet Explorer

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

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

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

Aguarde enquanto o programa é carregado.

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

Construindo uma Tabela Simples

Observe este exemplo de construção de tabelas:

Agora veja como o Internet Explorer interpreta este exemplo:

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

Observe o exemplo a seguir:

Agora observe como o Internet Explorer interpreta este exemplo:

Observe o exemplo a seguir:

Agora observe como o Internet Explorer interpreta este exemplo:

Agora observe como o Internet Explorer interpreta este exemplo:

Observe o exemplo a seguir:

Agora observe como o Internet Explorer interpreta este exemplo:

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

Agora observe como o Internet Explore interpreta este exemplo:

O segundo aplica cor na tabela inteira:

Agora observe como Internet Explore interpreta este outro exemplo:

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

Agora observe como o Internet Explorer interpreta este exemplo:

Agora observe como o Internet Explorer interpreta este exemplo:

Os dois segundos exemplos inserem uma figura na tabela inteira:

Agora observe como o Internet Explorer interpreta este exemplo:

Para finalizar, observe este último exemplo.

Agora observe como o Internet Explorer interpreta este exemplo:

Agora observe como o Internet Explorer interpreta este exemplo:

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

Carregue o programa Bloco de notas.

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

Saia do Bloco de Notas

Abra o Internet Explorer

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

Feche o Internet Explorer.

You might also like