Curso Tecnolgico de Informtica - Aplicaes Informticas A - 11 Ano

6CDGNCU
As tabelas definidas em HTML tm permitido apresentar dados em forma tabular e construir arranjos de pgina complexos.

i Definir

tabelas

A tabelas definem-se com o elemento <table>. Uma tabela divide-se em linhas (com o elemento <tr>, cujo nome deriva de "table row"), e cada linha divide-se em clulas (definidas com o elemento <td>, cujo nome deriva de "table data")). Uma clula pode conter dados, texto, imagens e outros elementos do HTML.

Sintaxe: <TABLE WIDTH=[largura] HEIGHT=[altura] ALIGN=[left/center/right] BGCOLOR=[cor] BACKGROUND=[url] CELLPADDING=[distanciamento] CELLSPACING=[espaamento] BORDER=[espessura] BORDERCOLOR=[cor] BORDERCOLORDARK=[cor] BORDERCOLORLIGHT=[cor] FRAME=[estilo borda]> <TR ALIGN=[left/center/right] VALIGN=[top/middle/bottom] BGCOLOR=[cor] BACKGROUND=[URL]> <TD WIDTH=[largura] HEIGHT=[altura] CELLPADDING=[distanciamento] CELLSPACING=[espaamento] ALIGN=[left/center/right] VALIGN=[top/middle/bottom] BGCOLOR=[cor] BACKGROUND=[url]
Escola Secundria S. Joo do Estoril

COLSPAN=[celulas] ROWSPAN=[celulas] > [conteudo] </TD> </TR> </TABLE>

Paula Cardoso Alcobia

- 57 -

Curso Tecnolgico de Informtica - Aplicaes Informticas A - 11 Ano

Atributos:

i WIDTH

determina a largura da tabela ou da clula e aceita valores em pixeis ou em percentagem. - determina a altura da tabela ou da clula e aceita valores em pixeis ou em percentagem. determina o alinhamento da tabela em relao pgina.

i HEIGHT

i ALIGN

i V ALIGN

determina o alimento vertical do contedo de uma clula. O valorpadro para a maioria dos browsers centralizado (middle). Determina a cor de fundo. atribui uma imagem de fundo sua tabela, linha ou clula.

BGCOLOR i BGCOLOR

i BA CKGROUND BACKGROUND i CELLPADDING CELLPADDING

determina em pixeis a distncia existente entre as bordas da clula e o seu contedo. determina o espao em pixeis existente entre uma borda e outra.

CELLSPA i CELLSPA CING

i BORDER

determina a espessura do limite da tabela. O padro sem limite. determina a cor do limite (borda) da tabela.

i BORDERCOLOR BORDERCOLOR

i BORDERCOLORD ARK BORDERCOLORD ORDARK

como os limites da tabela apresentam a colorao de forma diferente para criar a sensao de tridimenso, podemos determinar de forma diferente as cores do lado escuro e do lado claro da tabela. O atributo i BORDERCOLORD ARK - determina a cor do lado escuro da borda ( esquerda e BORDERCOLORD ORDARK acima da tabela).
i BORDERCOLORLIGHT BORDERCOLORLIGHT

determina a cor do lado claro da borda ( direita e

abaixo da tabela.
i FRAME

podemos alterar o posicionamento dos limites de uma tabela. Os valores vlidos para o atributo frame so: Void elimina os limites externos Above apenas o limite superior Below apenas o limite inferior Hsides lados horizontais, ou seja, os limites de cima e de baixo.

Escola Secundria S. Joo do Estoril

Vsides lados verticais, esquerda e direita da tabela Lhs limite do lado esquerdo Rhs limite do lado direito Box limite completo (padro) Border limite completo (padro)

Paula Cardoso Alcobia

- 58 -

Curso Tecnolgico de Informtica - Aplicaes Informticas A - 11 Ano

i i

COLSPAN COLSPAN Atributo que une duas ou mais clulas horizontalmente ROWSPAN ROWSPAN Atributo que une duas ou mais clulas verticalmente

Exemplo: <table border="1"> <tr> <td>linha 1, clula 1</td> <td>linha 1, clula 2</td> </tr> <tr> <td>linha 2, clula 1</td> <td>linha 2, clula 2</td> </tr> </table>
i

Definio das reas da tabela

As tags de definio das reas da tabela so: <THEAD>: cabealho da tabela, posiciona a linha no incio da tabela. <TFOOT>: rodap da tabela, posiciona a linha no fim da tabela. <TBOBY>: corpo da tabela, posiciona a linha no fim da tabela. Basicamente as tags de definio de reas da tabela comportam-se como a tag de linha (<TR>) e aceitam os mesmos parmetros.

Exemplo: <table border = "1"> <thead>

Escola Secundria S. Joo do Estoril

<tr> <td>Este texto est sob um elemento</td> </tr> </thead>

Paula Cardoso Alcobia

- 59 -

Curso Tecnolgico de Informtica - Aplicaes Informticas A - 11 Ano

<tfoot> <tr> <td>Este texto est sob um elemento tfoot</td> </tr> </tfoot> <tbody> <tr> <td>Este texto est sob um elemento body</td> </tr> </tbody> </table>

Ttulo da tabela

Para activar um ttulo para uma tabela, deve-se utilizar a tag CAPTION.

Sintaxe: <CAPTION ALIGN=[left/center/right] VALING=[top/bottom]> [titulo] </CAPTION>

Exemplo: <table border="1"> <caption>Isto uma legenda</caption> <tr> <td>Clula 1</td> <td>Clula 2</td> </tr>
Escola Secundria S. Joo do Estoril

</table>

Paula Cardoso Alcobia

- 60 -