Escola
AULAS
ACTIVIDADES


Cursinhos
HTML
JAVA

Recursos 
SOFTWARE 
SITES A VISITAR

  HOME

Tabelas e Frames

Tabelas

As marcas TABLE, TR, TD, TH

Uma tabela � um conjunto de c�lulas organizadas em linhas e colunas. Em HTML, o in�cio de uma tabela � identificado pela marca <table> e o fim pela marca </table>.
Cada linha, numa tabela, � identificada pelas marcas <tr> e </tr>. Em cada linha s�o definidas c�lulas com as marcas <td> e </td>.
O procedimento para a cria��o de uma tabela implica a defini��o sequencial, da esquerda para a direita e de cima para baixo, do conte�do de cada c�lula.
As tabelas s�o uma estrutura poderosa da linguagem HTML. Praticamente tudo o que � poss�vel ter no corpo de um documento HTML pode colocar-se nas c�lulas de uma tabela.

Exemplo:
<table>

<tr><!-- in�cio da linha 1 -->
<td>1</td>
<td>2</td>
<td>3</td>
</tr><!-- fim da linha 1 -->
<tr><!-- in�cio da linha 2 -->
<td>4</td>
<td>cinco</td>
<td>6</td>
</tr><!-- fim da linha 2 -->

</table>

1    2            3
4    cinco      6

Trata-se de uma tabela com duas linhas e tr�s colunas. Cada linha e coluna ajusta-se ao conte�do da c�lula.

A inclus�o de t�tulos, para a tabela e para as linhas e colunas faz-se com recurso �s marcas <caption>...</caption> e <th>...</th>, respectivamente.

Exemplo:
<table>
     <caption>Primeiro exemplo de uma tabela em HTML</caption>
          <tr><!-- T�tulos das colunas -->
          <th>Coluna 1</th>
          <th>Coluna 2</th>
          <th>Coluna 3</th>
          </tr>
          <tr><!-- in�cio da 1� linha de dados -->
          <td>1</td>
          <td>2</td>
          <td>3</td>
          </tr><!-- fim da linha 1 -->
          <tr><!-- in�cio da linha 2 -->
          <td>4</td>
          <td>cinco</td>
          <td>6</td>
          </tr><!-- fim da linha 2 -->
     </table>

Primeiro exemplo de uma tabela em HTML
Coluna 1    Coluna 2    Coluna 3
1                 2                 3
4                 cinco           6

Exemplo:
<table>
     <caption>Segundo exemplo de uma tabela em HTML</caption>
          <tr><!-- T�tulos das colunas -->

<th></th>

          <th>Coluna 1</th>
          <th>Coluna 2</th>
          <th>Coluna 3</th>
          </tr>
          <tr><!-- in�cio da 1� linha de dados -->

<th>Linha 1</th>

          <td>1</td>
          <td>2</td>
          <td>3</td>
          </tr><!-- fim da linha 1 -->
          <tr><!-- in�cio da linha 2 -->

<th>Linha 2</th>

          <td>4</td>
          <td>cinco</td>
          <td>6</td>
          </tr><!-- fim da linha 2 -->
     </table>

Segundo exemplo de uma tabela em HTML
              Coluna 1    Coluna 2    Coluna 3
Linha 1 1                 2                 3
Linha 2 4                 cinco           6

O atributo ALIGN

Nos documentos HTML, as tabelas aparecem alinhadas tal como o texto, geralmente � esquerda. O alinhamento pode ajustar-se com a marca <center>...</center> ou com o atributo align, que pode associar-se a uma marca de "divis�o" do texto, <div>, ou � pr�pria marca <table>. Neste �ltimo caso, usando os valores left ou right a tabela aparece "embebida" (inline) no texto, fluindo este � sua direita ou esquerda, respectivamente.
O atributo align quando usado com as marcas <tr>, <td> e <th> controla o alinhamento do texto nas respectivas c�lulas. Aceita os valores left e right e center. O alinhamento vertical define-se com o atributo valign que aceita os valores top, bottom, baseline, e center.

O atributo NOWRAP

Para evitar que o navegador parta automaticamente as linhas para as ajustar ao espa�o da c�lula pode usar-se o atributo nowrap das marcas <td> ou <th>. Pode sempre for�ar-se a mudan�a de linha com as marcas <br> ou <p>.

O atributo BORDER

Por omiss�o, os navegadores apresentam as tabelas sem molduras, exterior e interiores. Pode alterar-se este comportamento com o atributo border da marca <table>. Pode ou n�o indicar-se o valor, em pixel, para o atributo border.

Os atributos CELLSPACING e CELLPADDING

Por omiss�o, os navegadores colocam dois pixel de espa�amento entre cada c�lula. Este espa�o pode controlar-se com o atributo cellspacing da marca <table>.

O atributo cellpadding da marca <table> permite controlar o espa�o entre o conte�do da c�lula e o seu bordo.

O atributo BGCOLOR

Para alterar a cor do fundo associada a uma tabela usa-se o atributo bgcolor da marca <table>. Caso se pretenda destacar apenas a moldura pode usar-se o atributo bordercolor.

O atributo WIDTH

As tabelas s�o por vezes utilizadas para controlar a apresenta��o dos documentos HTML. Deste ponto de vista, o atributo width reveste-se de particular import�ncia.
O valor deste atributo pode especificar-se em pixel ou em percentagem. Al�m de se usar com a marca <table>, pode, adicionalmente, usar-se com as marcas <td> para especificar a largura das respectivas colunas.

Exemplo:
<table width=450 cellspacing=0 cellpadding=0>

<tr>
<td width=50><br></td>
<td width=400>
<!--conte�do da p�gina-->
</td>
</tr>

</table>
 

Deste modo apresenta-se o texto numa coluna de largura definida, � direita, deixando-se � esquerda uma margem apropriada.

Os atributos COLSPAN e ROWSPAN

Estes atributos usam-se com as marcas <th> e <td> para juntar colunas ou linhas. O atributo colspan indica quantas colunas ocupa a c�lula e o atributo rowspan indica quantas linhas ocupa a c�lula.

Exemplo:
<table>

<tr>
<th colspan=2>A</th>
<th>B</th>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>

</table>

  A      B
1   2    3
4   5    6

Tabelas dentro de tabelas

Dentro de uma tabela � poss�vel definir outras tabelas. Embora esta facilidade possa ser bastante �til, permitindo criar estruturas complexas, exige cuidados redobrados na escrita do respectivo c�digo, para evitar erros. A verifica��o da concord�ncia entre as marcas de in�cio e fim � fundamental, bem como a inclus�o de coment�rios, e o pr�prio estilo de escrita do c�digo. Cada nova tabela deve definir-se dentro de uma c�lula, isto � entre <td> e </td>.

Aceda a p�ginas com alguns exemplos de tabelas que ilustram a utiliza��o das marcas e atributos aqui referidos. O s�tio TableMaker merece tamb�m uma visita.

Frames

As frames (janelas) dividem a janela do navegador num determinado n�mero de �reas cada uma das quais com o seu pr�prio conte�do. As frames permitem que um s�tio Web seja mais facilmente naveg�vel e mais atraente. No entanto, exigem, para serem eficazes, um planeamento cuidadoso do design a utilizar, que deve tirar partido da rela��o existente entre os v�rios documentos que constituem o s�tio. As marcas para a cria��o de frames s�o simples. A sua aplica��o � que constitui um desafio.
As frames s�o um standard de facto criado pela Netscape (a partir do Navigator vers�o 2.0), rapidamente adoptado e extendido por outros navegadores, como o Internet Explorer.

Para criar frames � necess�rio definir as v�rias janelas em que se pretende dividir a janela do navegador, a sua dimens�o, nome e conte�do. Estas defini��es figuram num documento especial que n�o � visualizado.

Tal como as tabelas, as frames permitem apresentar os documentos organizados numa estrutura de linhas e colunas na janela do navegador. Devem preferir-se tabelas, nomeadmente, quando:

• Se pretende apresentar muitas linhas e colunas;
• A organiza��o das linhas e colunas varia de p�gina para p�gina;

Deve optar-se pela utiliza��o de frames quando:

• Uma sec��o das p�ginas se mant�m praticamente fixa. Com frames essa sec��o mant�m-se na janela do navegador, n�o sendo descarregada e apresentada de cada vez que se acede a uma p�gina. A apresenta��o de um �ndice, para a informa��o de um s�tio Web, � uma aplica��o t�pica.
• Se pretende estabelecer rela��es de causa-e-efeito entre as v�rias sec��es em que se subdivide a informa��o. Se a inten��o � s� criar o efeito de apresenta��o da informa��o em linhas e colunas � prefer�vel usar tabelas.
• O n�mero de linhas e colunas a apresentar � pequeno. Janelas com mais de quatro frames tornam-se dif�ceis de navegar. Duas frames �, geralmente, o desej�vel.

As marcas FRAMESET, FRAME, NOFRAMES e BASE

Na cria��o de frames utilizam-se quatro marcas b�sicas: <frameset>, para dividir a janela em frames, <frame>, para descrever individualmente cada frame, <noframes>, que indica ao navegador como deve apresentar a janela se n�o aceitar frames e <base>, que indica ao navegador para colocar um determinado documento numa janela espec�fica.

Antes de criar o ficheiro com estas defini��es, pense no n�mero de linhas e colunas em que deseja dividir a janela do navegador, nas suas dimens�es e conte�do inicial. Est� ent�o em condi��es de criar o seu "ficheiro frameset".

Exemplo:
<html>
<head>

<title>M�dulo Constru��o de p�ginas Web</title>

</head>
<frameset cols="250,*">

 <frame src="indice.html"
 name="�ndice_html">
 <frame src="c4_tabelas.html" name="conte�do_html">

</frameset>
</html>

A marca FRAMESET

A marca <frameset> substitui a marca <body> e define o n�mero e dimens�o de cada frame. Neste caso definiram-se duas colunas. Posso definir quer linhas quer colunas na mesma frameset. Posso igualmente definir framesets dentro de uma frameset.

A marca <frameset> aceita os atributos cols ou rows que indicam o n�mero e dimens�o, em pixel ou em valor relativo, das colunas e linhas da janela, respectivamente.

Exemplos:
<frameset rows="150,300,150">

Divide a janela do navegador em tr�s linhas com as dimens�es indicadas. O navegador comprime ou alarga proporcionalmente as frames para que se ajustem � janela do navegador.

Alternativamente poder�amos definir:
<frameset rows="25%,50%,25%">

Podemos tamb�m usar o s�mbolo * para deixar ao navegador a liberdade de usar o espa�o que ainda lhe sobra:
<frameset cols="10,*,10">
ou ainda:
<frameset cols="20%,3*,*,*">

Para evitar que o utilizador redefina a dimens�o das janelas pode usar-se o atributo noresize da marca <frame>.
A utiliza��o de molduras nas frames controla-se com o atributo frameborder da marca <frameset>. Por omiss�o este tem o valor yes. O controlo suplementar da apresenta��o das molduras n�o se faz do mesmo modo no Navigator e no Explorer. O primeiro usa o atributo border na marca <frameset> de topo (no caso de existir mais do que uma), ao qual � atribu�do o valor em pixel da largura da moldura. O Explorer usa o atributo framespacing para o espa�amento em pixel entre frames. Como ambos os navegadores ignoram atributos n�o aceites � poss�vel, usando ambos os atributos, criar uma apresenta��o consistente das frames, independente do navegador.
O Navigator aceita ainda o atributo bordercolor para controlo da cor da moldura.

A marca FRAME

A marca <frame> descreve mais detalhadamente cada frame. A cada frame tem de corresponder uma marca <frame>. Estas s�o colocadas no frameset coluna a coluna, da esquerda para a direita, e depois linha a linha, de cima para baixo. A ordem � portanto significativa.

Os principais atributos da marca <frame> s�o:

• src="nome_ficheiro" indica o documento que deve ser apresentado na janela
• name="nome_da_janela" atribui um nome � janela para refer�ncia futura
• noresize impede o redimensionamento da janela pelo utilizador
• scrolling consoante tem os valores "yes" ou "no" permite ou n�o elevadores associados � janela. Por omiss�o, s�o colocados quando o conte�do da janela vai al�m da sua dimens�o.
• marginheight e marginwidth permite especificar o n�mero de pixel das margens da frame.
• frameborder que consoante os valores "yes" (ou 1) ou "no" (ou 0) indicam ao navegador para aprsentar ou n�o uma moldura � volta da frame.

A marca NOFRAMES

Nem todos os navegadores aceitam frames. Deve pois incluir-se a marca <noframes> que indica ao navegador o que deve fazer neste caso. Entre <noframes> e </noframes> deve incluir-se a informa��o, em HTML, a apresentar pelo navegador. Este documento HTML pode incluir a marca <body>.

A marca BASE

Habitualmente quando se activa uma liga��o num documento HTML, o conte�do associado a essa  liga��o substitui o conte�do da janela actual. Dito por outras palavras, a janela actual funciona como destino (target) para a apresenta��o do conte�do da liga��o.

Com frames � necess�rio especificar o destino, isto �, em que janela, devem ser apresentados os conte�dos das liga��es. Para isso � muitas vezes conveniente usar a marca <base> associada ao atributo target. Evita-se assim usar o atributo target em cada marca <a> correspondente a uma liga��o a apresentar numa mesma janela.

Exemplo:
<html>
<head>

<title>�ndice</title>

<base target="conte�do_html">

</head>

<body>
....
</body>
</html>

Dar ao atributo target um nome que n�o foi atribu�do a uma janela implica a apresenta��o do documento numa nova janela, que � aberta automaticamente pelo navegador. Este atributo da marca <a> pode usar-se independentemente de se usarem frames.

H� quatro nomes reservados para o atributo target que d�o origem a ac��es de redireccionamento especiais:

• _blank apresenta o documento numa nova janela, � qual n�o � atribu�do um nome
• _self valor usado por omiss�o, a pr�pria janela do documento original
• _parent com framesets encadeados, apresenta o documento no frameset actual.
• _top apresenta o documento na janela do navegador, ignorando todos os frames.