Posso dizer que fui um profissional bem orientado, quando estava começando a lidar com webdesign. Aprendi a recortar layouts usando o modo visual do Dreamweaver. Os layouts eram completamente feito em tabelas. Fazer edições minuciosas desses layouts era bastante frustrante, mas como eu era praticamente leigo, pensava: “bem, meu trabalho é esse mesmo! Fazer o que?”.
Uma bela tarde, com um tempinho de folga, perguntei ao programador com quem lidava o que eu poderia aprender enquanto não aparecia nada para eu fazer. E ele me disse, e eu agradeço, que eu deveria aprender Tableless e Webstandards. Então tá, foi o que fiz. Logo estava pesquisando uma dezena de sites a respeito. Após uns dois dias só lendo, passei a fazer alguns testes, criar alguns layouts bem básicos em tableless, primeiro com uma coluna. No momento em que se faz o primeiro teste de layout com duas colunas é que a dificuldade começa. Três colunas então, muito mais complicado!
Normalmente ouço e leio de outros webdesigners que o principal motivo para eles não trabalharem com layouts tableless é que “é muito limitante”, que “os layouts ficam feios”. Sinceramente, essas respostas são normalmente desculpa de quem achou muito complicada a estrutura tableless. Quem não aprendeu ou não quis aprender a desenvolver. Além deste portfólio, posso citar uma imensa quantidade de sites lindÃssimos que usam estrutura tableless. Na verdade, designers que se atualizam, quase obrigatoriamente aprendem tableless, e em tempos de Google e busca semântica, isso é essencial.
Eu admito que o começo é difÃcil, pode até ser meio decepcionante quando se compara com a facilidade que é montar um layout em tabelas no modo visual do Dreamweaver. Mas enquanto passava pelas dificuldades, jamais pensei em deixar de usar tableless. Desde o primeiro dia de digitação de código já dava para perceber como isso ia facilitar minha vida e melhorar a qualidade do meu trabalho. Hoje eu acho pelo menos umas quatro vezes mais fácil digitar um código de estrutura tableless do zero, do que usar o modo visual para fazer tabelas. E nem estou falando da manutenção do código, que deve ser pelo menos umas vinte vezes mais fácil!
Alguns motivos para fazer layouts em tableless
- Facilidade de construção de código (a partir do momento em que o desenvolvedor tem razoável conhecimento da estrutura);
- Simplicidade do código;
- Limpeza do código: o código fica livre de atributos desnecessários que são colocados automaticamente pelos editores de HTML, ou que são necessários para as tabelas. Fica só uma estrutura básica, de entender com uma passada de olhos;
- Facilidade de manutenção do código: com um código mais simples e limpo, não há dúvidas de que a manutenção se torna uma tarefa muito mais simples.
- Conformidade com os Padrões da Web ou Webstandards, que são padrões internacionalmente aceitos para a criação e leitura de aplicações para a internet.
- Otimização para sistemas de busca: o uso correto de tableless torna o site mais legÃvel para o Google e outros sistemas, podendo melhorar as posições no ranking;
- Acessibilidade a deficientes visuais que usam softwares de leitura de páginas. Esses softwares funcionam melhor com estruturas semanticamente construÃdas, coisa obtÃvel com o uso de webstandards;
- Reconhecimento da comunidade desenvolvedora: é inevitável, tableless já é reconhecido como a melhor forma de desenvolver websites em HTML, e designers que insistem em utilizar estruturas em tabelas não são bem-vistos entre a comunidade de designers que já utiliza webstandards em seus projetos.
Pra quem não se convence apenas com isso, há um artigo muito legal da Smashing Magazine que trata das vantagens e desvantagens dos dois métodos.
Eu acredito plenamente que essas informações sejam muito úteis para os designers, mas o essencial é que isso também é importante para os clientes… Estruturas tableless, como já disse, têm uma manutenção mais rápida e simplificada e ajudam a melhorar a visibilidade do site em mecanismos de busca! Ou seja, é essencial em uma era em que o Google comanda.
Quem quiser aprender, recomendo dois sites:
- http://www.maujor.com (Brasileiro especialista em tableless)
- http://www.w3schools.com (A organização por trás dos Webstandards)
Tags: Tableless, Webdesign, Webstandards

Cara..achei fantatisco esse artigo, estava eu a procura de informações para arrumar o layout do meu site (ainda em desenvolvimento) e vim para aqui (uffa ainda bem rsrsrs) O problema que me trouxe aqui foi justamente a posição do layout… não sabia o que era tableless (meus templates eram em tabelas)..fiquei muito interessado em aprender tableless… e gostaria de saber se posso te enviar e-mails..referentes a duvidas que eu tiver.
Bom..chega de falar..
Abraços e Parabéns.
Olá Édipo, obrigado por seu comentário!
Fico muito contente que tenha te convencido a utilizar tableless com esse meu post hehe.
Podes me enviar e-mails sim, apenas peço tua compreensão se demorar a respondê-los.
Um abraço e obrigado!
Vamo trabalhar com tabeless então…
Existe algum editor visual que dê para posicionar e esticar as divs ou é tudo via código?
Olá Rocha!
Olha, eu até acho que exista algum editor visual para desenvolver tableless, mas não saberia te dizer qual, pois eu faço tudo no código.
Além disso, grande parte dos posicionamentos em tableless é feita principalmente pelo tipo de display (block, inline, inline-block, table-cell), margins e paddings, não tanto por posicionamento absoluto.
Um abraço!
Beleza Leo, obrigado.
Abraço!