Página de exemplo para site em XHTML+CSS sem usar tabelas (rosa/preto)
O XHTML (eXtensible Hypertext Markup Language) é o formato sucessor do HTML recomendado pela W3C para programação de páginas web. O principal objectivo do XHTML é melhorar a acessibilidade à informação publicada permitindo a sua correcta apresentação independentemente do dispositivo usado, através de uma separação entre os dados (usando XML) e a sua apresentação gráfica (usando CSS).
Esta página foi codificada usando XHTML 1.1 e CSS, sem recorrer a tabelas para formatação gráfica. O resultado é uma página mais leve e um código mais simples de ler e manter.
Porque é que as tabelas para formatação são agora desaconselhadas?
As tabelas em HTML foram originalmente criadas para apresentar informação tabular. Parece óbvio? Mas não é.
No anos 90, perante a falta de uma linguagem adequada para a criação de páginas gráficamente ricas, os web designers adaptaram as tabelas em HTML para definir a aparência gráfica das páginas (mea culpa, este site usa tabelas mas já senti os problemas e estou muito arrependido).
No entanto, actualmente o uso de tabelas para formatação gráfica é desaconselhado porque mistura dados de apresentação (ex. etiquetas <table><td><tr>) com conteúdos (ex. textos).
O uso de tabelas para formatação gráfica:
- Origina páginas desnecessariamente grandes porque os utilizadores têm que repetidamente descarregar os dados de apresentação para cada página;
- Páginas grandes e consequentemente lentas a carregar enervam os utilizadores do seu site;
- Páginas grandes, aumentam o consumo de rede e a sua conta a pagar ao fim do mês.
- Torna o redesenho de sites existentes muito trabalhoso (e caro!);
- Dificulta a manutenção da consistência entre as páginas de um site.
- Páginas com diferentes dentro de um mesmo site baralham os utilizadores;
- Dificultam a acessibilidade à informação por pessoas com deficiência;
- Dificultam a acessibilidade à informação através de diferentes dispositivos como telemóveis, PDAs ou diferentes browsers;
- Degradam a visibilidade das páginas em motores de busca.
A solução
A solução passar por estruturar os conteúdos das páginas em XHTML e delegar os dados relativos à apresentação para um ficheiro CSS partilhado que define a aparência gráfica de todas as páginas no site.
Para saber mais
- Why tables for layout is stupid: problems defined, solutions offered
- W3Schools CSS Tutorial
- Liquid CSS Layouts - Design Alternative to Table Based Websites
- CSS Basics - Making Cascading Style Sheets Easy to Understand
Leia as notas para optimizar esta página de exemplo
No código-fonte desta página de exemplo estão incluidas notas que sugerem como poderá optimizar as suas páginas para os motores de busca. Procure no código-fonte pelo texto NOTA: e siga as instruções. Quando terminar não se esqueça de apagar as notas.
Adicionalmente recomendamos a leitura dos artigos artigos Mozilla Firefox 2.0 e Internet Explorer 7 impõem respeito pelas normas de formato e Erros em web design.