Sumário e status
Muito já se tem dito e repetido que tabelas não devem ser usadas com a finalidade de construir o layout de uma página web. Este documento mostra uma maneira de se construir um layout de 3 colunas sem tabelas, usando-se somente CSS.
Sugestões e comentários serão muito bem-vindos e sinta-se à vontade para enviá-los a Dominique Hazaël-Massieux. Este documento foi traduzido para as línguas espanhola , francesa e português brasileiro
Introdução
HTML é uma linguagem estrutural, ou seja, é - ou deveria ser - usada para estruturar textos através de tags. A tag table deveria ser usada tão somente com a finalidade de apresentar dados dentro de uma tabela com linhas e colunas.
Mas desde que as tabelas foram implementadas no HTML elas tem sido amplamente usadas para montagem de layouts e muito comumente para compartimentar uma página web em colunas. Ao fato de que este uso das tabelas contraria sua finalidade (seu propósito semântico) soma-se ainda várias outras desvantagens, entre elas notadamente a dificuldade de um parseamento adequado na renderização das tabelas em determinados contextos (usuários com necessidades especiais, agentes de usuários com restrições,....).
Este documento descreve uma maneira de criar um layout de 3 colunas e oferece links para outras páginas que mostram técnicas de criação de layout.
Descrição do layout
A técnica descrita a seguir foi usada para construir a página para novos usuários do W3C ( page for new W3C users ) e permite criar um layout de 3 colunas com as seguintes características:
- Os textos da coluna central são escritos no início do código da página o que significa "aparecer" no topo da área de visualização, quando a página é renderizada em um browser sem suporte ou com CSS desabilitada
- seguem-se as colunas esquerda e direita, nesta ordem
Isto é ideal para Home Pages já que dispõe o texto no centro e as listas de links (menus de navegação) nas laterais.
Uma restrição para este tipo de layout é que ele não funciona bem em agentes de usuário com suporte precário para CSS, contudo a página permanece perfeitamente legível em um tradicional layout vertical.
Esta página que você está lendo usa este tipo de layout e assim você pode ter uma idéia de como é o layout.
Implementação
Este layout usa posicionamento CSS absoluto (CSS
absolute positionning). Definimos 3 divisões (DIVs) no HTML da página <div id="main">, <div
id="list1" class="link-list">, <div id="list2" class="link-list">, e aplicamos as seguintes regras CSS a elas:
/* Propriedades comuns às duas colunas laterais de links */
div.link-list {
width:10.2em;
position:absolute;
top:0;
font-size:80%;
padding-left:1%;
padding-right:1%;
margin-left:0;
margin-right:0;
}
/* usamos a propriedade margin para abrir espaços para as colunas laterais */
#main {
margin-left:10.2em;
margin-right:10.2em;
padding-left:1em;
padding-right:1em;
}
/* e aqui colocamos as colunas laterais no lugar */
#list1 {
left:0;
}
#list2 {
right:0;
}
O fundamento básico consiste em "abrir" espaços nas duas laterais da coluna central div#main usando as propriedades margin-left e margin-right e a seguir posicionar cada uma das colunas laterais usando position:absolute, uma no canto superior esquerdo e a outra no canto superior direito através da definição das suas coordenadas (0,0).
Com a finalidade de "esconder" a folha de estilos de browsers com suporte precário ou mesmo sem suporte para CSS usamos a diretiva <style type="text/css">@import
url('your-stylesheet-url');</style> para nossa folha de estilos.