<1> <2> <3> <4> <5> <6> <7> <8> <9> <10> <11> <12> <13> <14> <15> <16>

 

Li��o 14 - Criando tabelas

 

Vamos agora saber como criar p�ginas com tabelas.

Objetivos

Ap�s esta li��o, voc� ser� capaz de:

  Criar tabelas em documentos.
  Definir linhas e colunas.

 

Li��o

Criando uma tabela

A formata��o de tabelas faz parte da vers�o 3.0 da linguagem HTML. Alguns browsers se "anteciparam" e j� aceitam esse tipo de formata��o. Manipular tabelas em HTML � um pouco chato - o Netscape Gold ainda n�o consegue manipular tabelas... - mas o efeito na p�gina � muito bom.

O elemento <TABLE BORDER> delimita uma tabela e a espessura de sua borda: 


        <TABLE BORDER> ... </TABLE>

Dentro dessa formata��o, inserimos as linhas e elementos da tabela:

<th> ... </th>
define um cabe�alho para a tabela
<tr> ... </tr>
delimita uma linha
<td> ... </td>
delimita um elemento da tabela 



<table border=4>

<th>Coluna 1</th><th>Coluna 2</th>

<tr><td>linha1, coluna 1</td><td> linha 1, coluna 2</td></tr>

<tr><td>linha 2, coluna 1</td><td>linha 2, coluna 2</td></tr>

</table>
Coluna 1 Coluna 2
linha1, coluna 1 linha 1, coluna 2
linha 2, coluna 1 linha 2, coluna 2





� poss�vel dividir colunas e linhas, atrav�s dos atributos colspan (para colunas) e rowspan (para linhas): 




<table border=4>

&ltth colspan=2>Colunas 1 e 2</th>

<tr>

<td>linha1, coluna 1</td><td> linha 1, coluna 2</td></tr>

<tr><td>linha 2, coluna 1</td><td>linha 2, coluna 2</td></tr>

<th rowspan=3>3 linhas</th>

<td>uma linha</td>

<tr><td>duas linhas</td></tr>

<tr><td>tres linhas</td></tr>

</table>

Neste exemplo, temos que o cabe�alho Colunas 1 e 2 compreende duas colunas (colspan=2); o cabe�alho 3 linhas compreende, por sua vez, 3 linhas (rowspan=3):
Colunas 1 e 2
linha1, coluna 1 linha 1, coluna 2
linha 2, coluna 1 linha 2, coluna 2
3 linhas uma linha
duas linhas
tres linhas

Devemos lembrar, entretanto, que TABLE n�o faz parte das formata��es-padr�o do HTML - ou seja: h� browsers que n�o entendem essa formata��o.

 

Comece abrindo o arquivo que voc� criou na li��o anterior (jv2.html). Vamos criar um documento para trabalhar com uma tabela exemplo:

  1. Digite o seguinte texto, logo depois da r�gua horizontal (hr), abaixo do mapa:

    <title> Exemplo de Tabela </title>
    Antes de sair pelas rodovias viajando, veja se voc� tem combust�vel suficiente para ir e voltar. Confira as dist�ncias de Joinville at� algumas das regi�es do mapa antes de sair de casa!
    <p>

  2. Agora iremos introduzir uma tabela no nosso documento. Para isso digite o seguinte texto (ou use o copy & paste):


    <table border>
    <caption align=center> Tabela de Dist�ncias Rodovi�rias � Joinville (Km) </caption>

    <tr> <th>Cidade/local
    <th>Dist�ncia
    <th>O que voc� encontra l�
    </tr>

    <tr> <td align=center>Florian�polis</td>
    <td align=center>184</td>
    <td>Praias, comida t�pica, gente hospitaleira, man�s e <b>Mulheres</b>!</td>
    </tr>

    <tr> <td align=center>Blumenau</td>
    <td align=center>130</td>
    <td>Louras, enchente, malhas, esporte amador, <b>Oktoberfest</b>!</td>
    </tr>

    <tr> <td align=center>S�o Francisco do Sul</td>
    <td align=center>45</td>
    <td>Patrim�nio hist�rico, uma balsa esquisita e cara, uma ilha, <b>s� isso</b>!</td>
    </tr>

    <tr> <td align=center>Itaja�</td>
    <td align=center>88</td>
    <td>Navios, estivadores, prostitutas, AIDS, mas <b>� um bom lugar</b>!</td>
    </tr>

    <tr> <td align=center>Balne�rio Cambori�</td>
    <td align=center>92</td>
    <td>Linda praia, gente animada, a Barra Sul, <b>t� indo pra l�</b>!</td>
    </tr>

    <tr> <td align=center>Jaragu� do Sul</td>
    <td align=center>51</td>
    <td>Motores, malhas, pr�ximo � Joinville, <b>n�o sei de mais nada</b>!</td>
    </tr>

    <tr> <td align=center>Curitiba</td>
    <td align=center>135</td>
    <td>Leite quente, frio e calor, p�lo industrial, parece mas <b>n�o �</b> Joinville!</td>
    </tr>

    </table> <hr>

    Note que:

      O r�tulo <tr> ... </tr> serve para abrir linhas na tabela.
      O r�tulo <td> ... </td> determina uma c�lula de dados.
      O r�tulo <th> ... </th> � utilizado na defini��o de cabe�alhos na tabela.
  3. Carregue seu arquivo no browser para visualizar a p�gina WWW que voc� acabou de construir.

 

Revis�o

  1. Como definir um documento que utiliza tabelas ?
  2. Como definir as regi�es na tabela?
  3. Como estruturar colunas e linhas?

Pr�tica Independente

Como voc� fez no exemplo, modifique sua pr�pria p�gina HTML que voc� iniciou na li��o anterior. Adicione algumas senten�as a mais e veja se consegue recarregar o documento modificado no browser.

 

A seguir...

Usando FORM e CGI.

 

Página Inicial | Índice |