http://www.usabilidoido.com.br/tablelove_transicao_suave_aos_webstandards.html
Dois dias antes do 10º Encontro de Webdesign em Curitiba, a organização do evento me convidou para substituir meu amigo Bechara, que teve de ser operado no apêndice. Topei o desafio só porque esse assunto não poderia faltar no evento. É a mudança mais importante no rumo do Webdesign nos últimos anos e o mercado curitibano não poderia ficar de fora.
Quando comecei a preparar os slides fiquei pensando como eu iria dizer a 300 profissionais que muito do que sabiam sobre codificação HTML estava errado e que era preciso mudar. Se dissesse para esquercer as tabelas, como prega o discurso Tableless, certamente iria desanimar uns e revoltar outros. Se dissesse que eles precisariam conhecer todas as recomendações do W3C, desanimaria a todos.
Inspirado na transição suave proposta por Jeffrey Zeldman, propus o movimento Tablelove. As tabelas quebraram nosso galho por muito tempo enquanto não haviam alternativas para marcar layout. Passar a odiá-las de uma hora para a outra não é saudável nem para os webdesigners, nem para as tabelas.
O primeiro passo do Tablelove é transferir a formatação inline (embutida na própria tag) para um arquivo separado de CSS. Com as propriedades de formatação do CSS é possível fazer muito mais com muito menos. As tabelas aninhadas (uma dentro da outra) diminuirão e o spacers.gif transparente não serão mais necessários.
Só esse esforço de separação entre o conteúdo e a apresentação vai tornar a manutenção do código mais fácil e aumentar a acessibilidade da página.
Originalmente as tabelas foram criadas para exibirem dados tabulados. Elas começaram a ser usadas para marcar layout porque não havia alternativa melhor na época, mas dessa forma estavam sendo mal tratadas. Eis um exemplo de tabela bem utilizada:
| Fruto | Cor | Sabor |
|---|---|---|
| Banana | Amarelo | Doce |
| Maçã | Vermelha, Amarela ou Verde | Doce |
| Tomate | Vermelho ou verde | Salgado |
Para substituir as tabelas na marcação do layout, é recomendável a utilização da tag DIV. Elas permitem posições mais flexíveis, precisas e ousadas. No CSS Zen Garden, um mesmo grupo de DIVs é rearranjado de centenas de formas diferentes para compor layouts impressionantes. Observe que o código HTML não muda, só muda a folha de estilos da página.
Os títulos sugestivos das lições do Tablelove ficam muito mais engraçados e memoráveis numa palestra ao vivo do que nesse texto. Para quem não estava no evento, segue o áudio da palestra que pode ser escutado junto com os slides.
Padrões Web (Webstandards) [MP3] 1h e 30 minutos 14MB
Fred van Amstel (fred@usabilidoido.com.br), 18.09.2005
Veja os coment?rios neste endere?o:
http://www.usabilidoido.com.br/tablelove_transicao_suave_aos_webstandards.html