As CSS e as tabelas

Publicado em: 14/04/2005

O uso de tabelas em documentos Web

Há muita confusão e dúvidas quando o assunto aborda o uso de tabelas sob o ponto de vista das CSS e das Web Standards.

Tabelas são terminantemente proibidas em projetos CSS, dirão uns.

Tabelas são admitidas em alguns casos em projetos CSS, retrucarão outros.

Sempre usei tabelas e deu tudo certo ? afirmarão terceiros.

São questões e pontos de vista, comuns, aos quais procurarei trazer à reflexão alguns aspectos adicionais para este polêmico tema.

Este artigo tem por objetivo fornecer aos leitores alguns itens relevantes de análise, que talvez passem desapercebidos quando se trata de avaliar o uso de tabelas.

O conceito tradicional do uso de tabelas

Qualquer um, familiarizado com marcação HTML, sabe muito bem que o layout de uma página Web constituido por exemplo; de um topo, uma coluna de navegação, uma coluna de conteúdo principal e um rodapé, é facilmente construido com o uso de uma tabela de duas colunas e três linhas, com as linhas superior e inferior expandidas para duas colunas, conforme mostrado abaixo:

E a partir dai, logotipos, menus de navegação, imagens, blocos de conteúdos estáticos ou dinâmicos, textos e toda a "parafernália" constituinte de uma simples página Web vai sendo colocada e posicionada com mais tabelas dentro da tabela principal e aninhadas umas dentro de outras, não raro, até a exaustão.

É assim que foi e é assim que continua sendo o projeto da maioria dos sites, tanto existentes quanto os que estão sendo construidos.

Renderização visual de uma tabela

Uma tabela é renderizada em um navegador gráfico, como uma espécie de grade, composta de colunas, linhas e células com um texto, imagem, link, script, etc. dentro de suas células. Todos já vimos variados tipos de tabelas em páginas Web. Umas com bordas outras sem, umas enormes outras menores, umas simétricas outras assimétricas e assim por diante, numa variedade infinita. O fato é que no final fica tudo arrumadinho e certinho na página, quer a página contenha cinco quer oitenta e cinco tabelas .

O esqueleto

Esta é a filosofia tradicional do uso de tabelas baseada principalmente nas facilidades que elas oferecem para 'montar' uma página Web. Vamos analisar o que está por trás disto. Uma espécie de olhada no esqueleto que mantém tudo no lugar.
Uma fechada na janela de design do editor de HTML e abertura da janela de código.

Observe o fragmento de código abaixo, que sustenta uma área mínima de texto em uma página.

Sem necessidade de análise profunda, note a quantidade de tabelas (cinco tabelas) e compare com as informações que foram passadas pelo código, (em destaque): cinco textos e oito imagens.
Sobre as imagens notar suas dimensões (1px x 1px, 1px x 5px...). Serão espaçadores? Provavelmente sim.

<TABLE BORDER=0 CELLPADDING=0 cellspacing=0 
WIDTH='500' ALIGN="center">

<TD WIDTH="500">
<table border="0" cellpadding="0" cellspacing="0" 
width="100%">
<tr><td height="17" class="xx" >um texto</td>
<td align="left" class="xx" ><b>outo texto</b></td></tr>
<tr><td colspan="2"><img src="xx" width="1" height="3" 
border="0" >
</td></tr>
<tr><td colspan="2" height="1">
<img src="x" width="1" height="1" border="0" ></td></tr>
<tr background="x"><td colspan="2"><img border="0" src="x" 
width="1" height="6"></td></tr>
</table>

<TABLE WIDTH="100%" CELLPADDING="0" CELLSPACING="0" 
border="0"><TR>
<TD>

<table align="right" border="0" cellpadding="0" 
cellspacing="0" width="100%">
<tr><td valign="middle" align="center"><a href="x">
<IMG ALIGN="LEFT" BORDER="0" alt="x" src="x"></a></td>
</tr><tr><td valign="baseline"><a href="xx">
<SPAN CLASS="xx">um texto</SPAN></a>
<img src="xx" width="1" height="5" border="0" ><br><br>
<a CLASS="x" href="javascript:NewWindow(''); ">
<IMG BORDER="0" WIDTH="15" HEIGHT="15" ALIGN="left" src="">
outro texto</a><BR><BR>

<table width="100%" cellpadding="0" cellspacing="0" 
border="0"><tr><td colspan="2"><img src="x" border="0" >
</td></tr><TR><TD ALIGN="LEFT" VALIGN="top" COLSPAN="2">
<a CLASS="x" href="xx"><img src="x" vspace="1" 
width="8" height="5" border="0" >mais um texto</a></TD>
........

Nota: O código acima é um exemplo real, como a maioria dos códigos que encontramos em páginas Web de grandes e pequenos sites e portais.

Experimente olhar o código fonte de um site qualquer, escolhido ao acaso. Examine no código fonte de uma página as tabelas usadas. É de 99,9% a chance de você encontrar uma marcação semelhante a esta mostrada acima.

99,9% of Websites are Obsolete afirma Jeffrey Zeldman em seu livro Design with web standards.

O que há de errado com o código?

Afinal o código é perfeito para mostrar no monitor tudo que foi projetado e 'de quebra' eu pergunto:

Quantos dos visitantes do site irão olhar o código fonte da página? Quem se interessa por isto?

Eu também concordo, mas antes de encerrar, vamos propor algumas questões:

• Para apresentar tão pouco texto e algumas imagens é preciso um código tão extenso?
• Se eu precisar alterar o layout e em consequência a estrutura da tabela; p.ex.: dividir uma coluna em duas? Consigo fazê-lo facilmente?
• E aquelas linhas que estão em azul? Se eu resolver alterar a cor?
• A imagem fatiada necessita de um ajuste. Consigo fazê-lo rapidamente, sem ter que fatiá-la outra vez?
• As informações contidas na tabela são facilmente lidas por um leitor de tela (JAWS, DOSVOX).
• A tabela carrega rápido?
• Existe um meio alternativo para o uso desta tabela? É melhor ou pior?
• Conheço os elementos de construção de tabelas <caption> <th> <thead> <tbody> <tfoot> <colgroup> <col> ? E os atributos summary, scope, headers ?

O conceito moderno do uso de tabelas

Começam a dar frutos o grandioso esforço que vem fazendo o W3C no sentido de tornar universal o acesso a Web.

No dizer de Tim Berners-Lee, Diretor do W3C e inventor da World Wide Web

"O poder da Web está na sua universalidade. É aspecto fundamental, que o acesso esteja garantido para qualquer pessoa, independente de suas necessidades especiais."

A palavra chave então é: universalidade (com sentido exato daquele da definição acima).

E, pensar em universalidade, significa basicamente que uma página Web deverá estar disponível para todos (cobrir todo o universo de pessoas que a acessam) e assim o seu projeto deverá considerar usuários acessando-a, com características e/ou equipamentos os mais variados possíveis.

Os fatores a considerar quando se trata de garantir acesso universal a um site são de duas naturezas: os que se referem às pessoas e aqueles referentes ao ambiente.

Uma listagem resumida destes fatores, a título de ilustração:

1. Relativo às pessoas
   • usuários com restrições visuais de qualquer ordem, inclusive completamente privados de visão;
   • usuários inpossibilitados de usar mouse;
   • usuários impossibilitados de usar teclado;
   • usuários com dificuldades de leitura e interpretação de textos.
2. Relativo ao ambiente
   • navegadores de versão mais antiga;
   • navegadores sem suporte para cor;
   • navegadores de texto;
   • conexão discada;
   • usuários com variados sistemas operacionais;
   • usuários com dispositivos de navegação portáteis, como telefones celulares;
   • usuários com monitores monocromáticos.
   • navegadores sem suporte ou desabilitados para scripts e pop ups.

Você como desenvolvedor, designer, projetista ou de qualquer forma envolvido com produção para Web deve assumir um compromisso de ordem moral quando não em certas circunstâncias legal, de garantir o acesso universal à sua obra.

Comece por não assumir que os seus usuários estão 'armados' com o mais moderno equipamento do mercado, conexão banda larga a mais rápida, com monitores de tela plana de alta resolução, telas de 1280 x 1064, última versão do navegador igual ao que você usa para projetar, com todos os plugins instalados e capaz de processar qualquer script no lado do usuário, em fim a última geração de navegação.
Suposições amplamente admitidas pela grande maioria dos que projetam Web.

A lista é vasta e os aspectos envolvidos com todas as condicionantes citadas e mais outras tantas, são de variadas ordens. Neste artigo vamos considerar exclusivamente ao uso de tabelas sob a ótica da universalidade. E, já posso imaginar que a esta altura deve esta soando absurdo para alguns o acesso universal e vem a indagação.

Usuários com restrições visuais de qualquer ordem, inclusive completamente privados de visão ? acessar uma página Web ?

Continue a leitura que vou explicar. O W3C fornece todas as condições para satisfazer os aparentes "absurdos".

Por enquanto acredite: O moderno conceito do uso de tabelas permite que elas sejam "vistas" até por pessoas com privação total do sentido da visão.

Universalidade

Usuários completamente privados de visão navegam pela Internet em número bem superior ao que você provavelmente imagina e com uma destreza muito maior que a minha que enxergo perfeitamente. Fiquei impressionado ao presenciar uma desenvolvedora Web, completamente privada da visão, navegar, (talvez mais apropriado seja o termo 'pilotar', tal a destreza demonstrada) a Internet e SEM USAR MOUSE E MONITOR. Uma experiência sem precedentes, pela qual todo desenvolvedor Web deveria passar.

A declaração anual de Imposto de Renda via Internet, uma tarefa simples para nós que enxergamos, deve estar acessível àqueles usuários. Por que tais cidadãos com seus dispositivos especiais de navegação, haveriam de depender de alguém para esta tarefa simples?

E o que dizer dos site de serviços aos cidadãos em geral, tais como, sites dos governos, listas telefônicas, correios, consultas processuais e uma infinidade de tantos outros.

E, o raciocínio aqui exercitado para pessoas com restrição visual total vale por extensão à todas as limitações listadas acima. Deixo por sua conta tais conclusões.

Lembre-se universalidade é a palavra chave.

Um exemplo prático

Vamos seguir com dois exemplos simples de tabela. Observe a tabela abaixo:

Para você que está 'vendo' a tabela não há necessidade de maiores explicações. Agora, imagine um usuário sem um monitor navegando com um leitor de tela. O leitor lê uma tabela por linhas. No caso acima assim:

Março Browser % I Explorer 74,0 Firefox 17,7 Mozilla 2,2 Opera 1,1 Netscape 0,4 Outros 4,6

Se você não tivesse visto a tabela, mas ouvido alguém ditar o parágrafo acima, teria entendido a informação por ela transmitida? Muito provavelmente sim.

Agora considere outra tabela, tão simples como a anterior.

Faça uma leitura da tabela acima, tal como faria um leitor de tela.

Tire suas conclusões.

O que é uma tabela acessível

Tabelas, podem e devem ser construidas para serem lidas por dispositivos especiais de maneira inteligível. Com uso de tags e atributos apropriados, isto é facilmente conseguido.

A tabela acima pode ser codificada de modo a ser lida assim:

Esta tabela apresenta o número de visitas diária ao site no período de o1 a 05 de abril de 2005 , bem como fornece outros dados complementares. Awstats visitas. Dia 01 abril visitas 1978 páginas 8297 hits 31913 megabytes 263.84 dia 02 abril visitas 1473 páginas 5361 hits 222.37 megabytes 173.43 dia 03 abril visitas 1394 páginas 5621 hits 22393 megabytes 174.60 e assim por diante

Toda a informação acima é fornecida no código da tabela entre as tags <table> </table>

Não é do escopo desta matéria a construção de tabelas acessíveis.

Quando, onde e como usar tabelas

As Web standards recomendam o uso de tabelas somente para apresentação de dados tabulares, tais como descrição de dados estatísticos em geral, agendas e logs, calendários, planilhas em geral etc. E, recomenda também evitar o uso de tabelas para construção de layout, posicionamentos, alinhamentos e obtenção que qualquer tipo de efeito visual.

As razões destas recomendações são imediatas. Basta você tentar ler tal como um um leitor de tela faria, uma tabela usada para construir um layout. Isto é uma tarefa impossível para o leitor de tela e a página simplesmente não existira para uma grande quantidade de usuários

A alternativa e as vantagens

É possível substituir as tabelas criadas para layout por uma marcação HTML ou mais modernamente XHTML (ver artigo) clara e estruturada, passando para as CSS toda a responsabilidade pela apresentação do documento.

Adotando esta técnica, você terá as seguintes vantagens imediatas:

• Marcação do código muito mais simples e estruturada, facilitando a rápida localização de qualquer segmento da página;
• Tempo de carregamento da página reduzido em valores superiores a 50%;
• Páginas acessíveis a leitores de tela e dispositivos especiais;
• Documentos amigáveis aos mecanismos de busca e indexação;
• Facilidade e simplicidade de manutenção;
• Uma marcação única capaz de servir várias mídias - tela, impressora, telefones celulares e dispositivos portáteis em geral, braille, projeção, etc.

Quer constatar na prática?

Suponha que você deseja imprimir um artigo ou matéria, publicada em um site.
1-) Abra a página que contém a matéria e no navegador acione o botão Arquivo (File) e depois Visualizar Impressão (Print Preview).
É quase certeza que você juntamente com o que interessa - o texto da matéria - vai ter que levar junto na impressão o menu de navegação, o rodapé, banners e tudo mais que estiver na página e que só vai prestar para gastar sua preciosa tinta na impressora. Isto só não acontecerá se o projetista do site gerou um outro arquivo, só para impressão tipo - versão para impressão - o que vamos admitir é um brutal acréscimo de trabalho sem necessidade já que há alternativa mais racional.

2-) Agora faça o mesmo com uma página sem tabelas - HTML + CSS -. Não conhece? Aqui tem uma indicação. Visualize a impressão e compare. E a estrutura para impressão é válida para todas as páginas do site - somente o que interessa- , utilizando a mesma marcação - sem versão para impressão, com uma simples definição de regras de estilo em uma folha para mídia print, gerada em 15 minutos é válida para uma ou mil páginas, não importa o tamanho do site.

3-) Tente fazer isto com um layout baseado em tabelas! Talvez você até consiga, mas seguramente com mais trabalho que para desenvolver a versão para impressão.

Mais?

Agora tente abrir os dois sites usados acima em um telefone celular ou em um dispositivo portátil qualquer e veja o que acontece.
Tente navegar nos dois sites usando o leitor de tela!

As tabelas utilizadas para o layout, as técnicas de formatação e o HTML mal escrito em resumo, tornam impossível as facilidades e a portabilidade conseguida sem tabelas.

Conclusões

O assunto é vasto e eu poderia me alongar por mais páginas e páginas com considerações, comparações e exemplos, mas minha intenção é a de apenas despertar seu interesse e curiosidade para um assunto, que talvez por falta de oportunidade ou tempo, você ainda não tenha refletido a respeito. Estou convidando você a pesquisar um pouco mais sobre o novo conceito de desenvolvimento de páginas Web com uso de (X)HTML + CSS e entregar para as tabelas somente as funções para as quais elas foram criadas - apresentar dados tabulares. Com isto você irá descobrir que ganhará de 'bonus' incontáveis e preciosas vantagens. O tempo que você 'perder' pesquisando vai recuperar com sobras à frente, eu garanto.

Quer continuar? Siga por este caminho.

Saudações e bons estudos!