Diagramação Web - Tabelas

CURSO DE WEBDESIGN - 3ª AULA
Diagramação Web (Tabelas)

A ferramenta que possibilita um controle sobre a diagramação de sites é a tabela. É com ela que conseguimos "segurar" um conteúdo diagramado, no sentido de se ter um controle maior sobre o que e como estão dispostos os objetos que compõem o design de um site.

Como isso acontece?

Ao se criar uma tabela, de tamanho fixo (em pixels), se estrutura uma "página" imaginária, onde se distribui os elementos que comporão o seu site.

Pode-se inserir tabelas dentro de tabelas, fazendo com que se tenha controle sobre o espaço que cada elemento irá ocupar no layout do site.

TABELAS:

A formatação de tabelas foi adotada bem antes de sua inclusão na definição de HTML. A manipulação de tabelas, mesmo em editores, é trabalhosa; a maior diferença entre tabelas em HTML e em editores como o MS Word, entretanto, é o fato das tabelas em HTML serem definidas apenas em termos de linhas e não de colunas. Mas isso será percebido no decorrer destas páginas.

As tabelas foram uma grande conquista para os autores de documentos para a Web. Com elas é possível, por exemplo, termos estas páginas do tutorial organizadas em colunas, sendo uma delas voltada exclusivamente aos links de navegação e observações. Tabelas implementam um conceito importante de layout: as "grades", segundo as quais organizamos textos e ilustrações de maneira harmoniosa.

Como já foi possível perceber, as tabelas contêm textos, listas, parágrafos, imagens, diversas outras formatações - inclusive outras tabelas. Novas versões de HTML e de browsers populares vêm acrescentando diversos atributos às tabelas, e nosso objetivo aqui é saber lidar com a maioria desses recursos disponíveis.

Elementos básicos de tabelas

<TABLE>...</TABLE> delimita uma tabela. Um atributo básico é BORDER, que

indica a apresentação da borda.

...

</TABLE>

Títulos, linhas e elementos

define o título da tabela

delimita uma linha

define um cabeçalho para colunas ou linhas (dentro de <TR>)

delimita um elemento ou célula (dentro de <TR>)

Uma tabela simples:

<CAPTION>Primeiro exemplo</CAPTION>

<TR><TH>Coluna 1</TH><TH>Coluna 2</TH></TR>

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

Primeiro exemplo

Coluna1	Coluna2
Linha1, coluna1	Linha1, coluna2
Linha2, coluna 1	Linha2, coluna2

Títulos compreendendo mais de uma coluna ou linha

É possível englobar colunas e linhas, através dos atributos COLSPAN (para colunas) e

ROWSPAN (para linhas):

<TR><TH COLSPAN=2>Colunas 1 e 2</TH></TR>

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

<TR><TH ROWSPAN=3>3 linhas</TH><TD>uma linha</TD></TR>

<TR><TD>duas linhas</TD></TR>

<TR><TD>tres linhas</TD></TR>

</TABLE>

Colunas 1 e 2
linha1, coluna 1	linha1, coluna2
linha2, coluna1	linha2, coluna2
3 linhas	Uma linha
	Duas linhas
	Tres linhas

Neste exemplo, vemos 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).

Tabelas sem borda

As páginas deste tutorial foram construídas com tabelas sem borda. Para tanto, foi empregada a seguinte delaração:

...

</TABLE>

Realmente, a formatação de tabelas é complicada, e o texto fonte chega a ser quase ininteligível quando fazemos uso dos seus diversos atributos. Hoje existem editores de HTML que fazem esse "trabalho" sozinhos, porém, mesmo com esses recursos todos, às vezes não há outro jeito: é preciso editar manualmente.

Alinhamentos em tabelas

Alinhamentos simples

Os alinhamentos padrão em tabelas, como podemos ver no exemplo acima, são:

no sentido horizontal: alinhamento à esquerda

no sentido vertical: alinhamento no centro da célula

As linhas e células podem ter alinhamentos definidos através dos atributos:

ALIGN = alin_horizontal

VALIGN = alin_vertical

Alinhamentos combinados

Uma mesma célula pode ter atributos ALIGN e VALIGN.

<TD ALIGN=alin_horizontal VALIGN=alin_vertical>Texto da célula</TD>

Alinhamentos de linhas

O alinhamento pode ser aplicado a linhas inteiras, com:

<TR ALIGN=alin_horizontal VALIGN=alin_vertical>Texto da célula</TR>

Porém, o alinhamento declarado em uma célula prevalece sobre o alinhamento da linha, isso pode ser interessante para algumas aplicações.

Atributos de largura

Na seção anterior, foi comentado que uma tabela comum ajusta o tamanho de suas células ao conteúdo.

Para apresentar uma tabela ocupando determinado espaço disponível na linha, usamos o atributo WIDTH. Esse atributo pode ser aplicado também a linhas e células.

Essa largura pode ser definida em porcentagem (do espaço disponível):

WIDTH=x%

ou em pixels:

WIDTH=x

Ex.1: Tabela ocupando 50% do espaço disponível

Ex.2: Tabela ocupando 50% do espaço disponível, com uma coluna de 60% do espaço disponível na tabela

<TR>

<TD>janeiro</TD><TD width=60%>fevereiro</TD><TD>março</TD>

</TR>

<TR>

<TD>abril</TD><TD width=60%>maio</TD><TD>junho</TD>

</TR>

</TABLE>

Ex3.: O controle da largura da tabela está limitado à dimensão de seu conteúdo:

<TR>

<TD>janeiro</TD><TD width=1%>fevereiro</TD><TD>março</TD>

</TR>

<TR>

<TD>abril</TD><TD width=1%>maio</TD><TD>junho</TD>

</TR>

</TABLE>

Ainda faltam detalhes. Um deles é evitar que o texto fique grudado nas bordas da tabela; veremos na próxima seção, sobre espaçamentos.

Atributos de espaçamento

Dois atributos permitem o controle de espaçamento em tabelas:

CELLPADDING - espaço entre o texto e as bordas da célula

CELLSPACING - espaço entre células

Tomemos a mesma tabela simples da seção anterior:

Ex.1: Espaço entre o texto e as bordas

Ex.2: Espaço entre células

Ex3.: Espaço entre texto e bordas, e espaço entre células

Extensões de Tabelas

Diversas extensões de tabelas possibilitam a apresentação de efeitos muito bons nas páginas.

Cor de fundo

Cor de borda

<TABLE BORDER=5 CELLSPACING=5 CELLPADDING=10 BGCOLOR="#E1FFD9"

BORDERCOLOR="#00FF00">

Imagem de fundo

PARA APRENDER MAIS SOBRE TABELAS:

O Uso de Tabelas na Linguagem HTML

http://www.unb.br/vis/lvpa/html/tab1.htm

************************************************************

Criar um layout para uma página, usando o texto e as imagens disponíveis na pasta da aula 3 (Usando editor de imagem). Montar este layout com o editor HTML, completando o restante da "página", diferente dos exemplos dados.