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 BORDER="borda"> ... </TABLE> Títulos, linhas e elementos <CAPTION>...</CAPTION> define o título da tabela <TR>...</TR> delimita uma linha <TH>...</TH> define um cabeçalho para colunas ou linhas (dentro de <TR>) <TD>...</TD> delimita um elemento ou célula (dentro de <TR>) Uma tabela simples: <TABLE BORDER=4> <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
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): <TABLE BORDER=1> <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>
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 BORDER="0"> ... </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:
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 <TABLE BORDER=1 width=50%> Ex.2: Tabela ocupando 50% do espaço disponível, com uma coluna de 60% do espaço disponível na tabela <TABLE BORDER=1 width=50%> <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: <TABLE BORDER=1 width=50%> <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 <TABLE BORDER=1 CELLPADDING=20> Ex.2: Espaço entre células <TABLE BORDER=1 CELLSPACING=20> Ex3.: Espaço entre texto e bordas, e espaço entre células <TABLE BORDER=1 CELLPADDING=20 CELLSPACING=20> Extensões de Tabelas Diversas extensões de tabelas possibilitam a apresentação de efeitos muito bons nas páginas. Cor de fundo <TABLE BORDER=5 CELLSPACING=5 CELLPADDING=10 BGCOLOR="#E1FFD9"> Cor de borda <TABLE BORDER=5 CELLSPACING=5 CELLPADDING=10 BGCOLOR="#E1FFD9" BORDERCOLOR="#00FF00"> Imagem de fundo <TABLE BORDER=5 BACKGROUND="imagem">
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. |