Tableless vs Web Standards

<update:date="2006-07-27">
Dando continuidade ao debate pertinente sobre este assunto, o Diego Eis deixou sua contribuição com o texto quase homônimo em Web standards vs Tableless
</update>

Já faz muito tempo que não vejo uma discussão sobre esse assunto que na verdade eu sempre quis dar um pitaco. A discussão aqui trata-se sobre o que na prática cada um destes termos (tableless e web standards) representam na história recente da web e a forma com que eles se propagaram. Opiniões contrárias são muito bem vindas apesar que pretendo levantar tópicos mais históricos e objetivos e menos subjetivos.

Antes de começar, gostaria de dizer claramente (para os não iniciados no assunto) de que essa discussão trata-se da utilização dos termos “tableless” e “web standards” e não representa uma avaliação do site Tableless.com.br criado pelo Diego Eis e Elcio Ferreira que são amigos e estão do lado do bem da força (o melhor lado em que poderiam estar). Ou seja, isso não é um oposição ao nome do site deles (até eu queria ser dono desse domínio!) e sim ao falso conceito propagado sobre o termo “tableless“. Por isso sem comentários passionais, ok?

Tableless

O termo “tableless” (do inglês “sem tabelas“) foi criado em contrapartida a uma técnica antiga (e utilizada até hoje na verdade) para estruturar os sites utilizando-se tabelas para conseguir controlar a aparência dos elementos em um site. Em meados da década de 90 quando os browsers ainda não haviam implementado nada de CSS, todo o posicionamento dos elementos e a aparência deles era toda controlada através de marcação e delarações inline. A técnica de spacer (o uso de um gif transparente para empurrar elementos e deixá-los em um local específico) era amplamente utilizada. Naquela época era compreensível a utilização destas técnicas devido a ausencia de implementações de CSS nos browsers, considerando que o nível 1 do CSS foi publicado em 1996 e o nível 2 somente em 1998.

Antes disso então, todas as técnicas hoje consideradas sujas, eram verdadeiros macetes (e não gambiarras) para se alcançar o sucesso na web. Mesmo que desde o início o HTML não tivesse sido criado com estes propósitos, a necessidade e demanda por sites com design mais elaborado acabou fortalecendo muito a utilização dessas técnicas por muito tempo. Até as ferramentas de desenvolvimento foram aos poucos se adequando a esta metodologia de desenvolvimento o que acabou ficando conhecido como WYSIWYG.

Passados os anos e após praticamente todos os browsers em uso já tivessem implementado boa parte de CSS, os desenvolvedores continuaram por um tempo a criar sites como faziam anos atrás. O termo “tableless” então, surge em oposição a esta visão de desenvolvimento que utiliza tabelas (e não CSS) para estruturar e controlar a aparência de um site.

Web standards

Web standards é um termo mais amplo que refere-se aos padrões web como um todo e não somente as linguagens de marcação e CSS. Outra coisa importante é que “web standards” não é um termo de oposição como é o termo tableless, até mesmo porque ninguém defende racionalmente algo do tipo “não aos padrões web”.

A organização responsável por estes padrões é a famosa W3C e segui-los (web standards), nada mais é do que construir sites que sigam as especificações por eles propostas e implementada por desenvolvedores e pela industria mundial que está ao redor da web. Se você ainda está na fase de questionar a necessidade de “padrões” leia o texto “seguindo os padrões” do Diego Eis.

Este conceito de web standards envolve a utilização das diferentes tecnologias que constituem a web de forma que garanta a interoperabilidade da prórpia web como um todo. Isso envolve portanto um amplo conjunto de boas práticas para o desenvolmento web em diversas áreas que envolve linguagens de marcação (XML, HTML, XHTML), linguagens de apresentação (CSS), semântica (RDF), linguagens de comportamento (DOM), acessibilidade (WAI), protocolos (HTTP), mobile ( MWI) dentre outras. Em resumo, um site que segue os web standards preza pelos vários aspectos que o constitui e não somente o aspecto estrutural sobre usar <div> ou <table> no desenvolvimento de um site.

Tableless vs Web Standards

Acho que é neste ponto em que as diferênças se acentuam. E espero que você entenda a diferença entre os dois termos antes de qualquer avaliação dessa discussão. Algumas perguntas retóricas de exemplo vão demonstrar melhor essas diferenças.

Um profissional inexperiênte que nos dias de hoje sem conhecimentos mínimos de semântica mas que consegue a façanha de converter seu site feito em tabelas para algo cheio de divs (o cara consegue fazer uma convenção internacional de divs em uma única página) e utilizando CSS, significa que este site segue os padrões? Significa que ele é “tableless” simplesmente pelo fato de não utilizar tabelas para estruturar um site? Será que somente pelo fato do cara não utilizar tabelas mas coloca uma div com uma classe em cada cantinho do site dele, significa que este segue os web standards?

Seguindo os web standards muito além do tableless

Um site que não utiliza tabelas para estruturar um site (teoricamente um site “tableless”) mas que ainda usa algo do tipo <div class="titulo">Titulo do artigo aqui</div> no lugar de um <h1> ou <h2> é tão contrário aos web standards quanto aquele que utiliza tabelas para estruturar o site. Alguém discorda disso neste ponto? Se considerarmos o aspecto semântico, o <div> (que serve para criar estruturas lógicas) bem como a tag <table> (que serve para exibir dados tabulares) podem ser semanticamente vazias quanto qualquer outra tag utilizada no contexto errado. Podemos colocar no bolo também a questão da validação de um site, que nada pode dizer sobre ele, se segue ou não os padrões.

Tableless é um ótimo marketing (principalmente para o Diego que é sortudo dono do domínio no Brasil), é uma palavra com um fundo histórico interessante que representou uma oposição a uma metodologia de desenvolvimento que marcou a história recente da web, mas que não diz o que web standards diz. Uma não deve ser utilizada para expressar o que a outra diz.

  • André Pessoa

    Excelente artigo.

  • http://dirceu.info/ Dirceu Pereira Tiegs

    Yep. O tableless foi e ainda é útil como um termo de marketing para aqueles que estão começando a seguir os padrões, mas se limitar a fazer um site sem tabelas mas com semântica errada é ridículo.

    Por incrível que pareça, tem gente que leva o "tableless" tão a sério que faz tabelas usando a tag div.

    BTW, parabéns pelo artigo.

  • Rodrigo Aramburu

    Ótimo mesmo, acredito que o tableless é o primeiro passo para seguir os padrões, por que uma coisa leva a outra e antigas práticas são dificeis de abandonar, eu que estou começando tenho muitos vícios.

  • Thomaz Leite

    Sem dúvidas a primeira aula de semântica para os iniciantes desenvolvedores Web Standards é o "tableless", ou o não-uso de tabelas onde não se precisa de uma tabela.

    Depois de aprender isso, comecei a ler muito sobre o assunto. O tableless facilita muito o desenvolvimento e isso atrai novos desenvolvedores aos padrões.

    Até mais!

  • Maurício Adal

    cara, essa estrelinha girando nao me deixa ler nada aki :/

  • http://hiper.auszug.org/blog Pedro Markun

    Fato. A estrelinha girando rouba a cena!

    Outro fato, Tableless é mesmo um bom nome para dominio, e é um grito no ouvido dos fãs de tabela-para-toda-obra… mas nada além disso.

    E como bem disse alguem ali em cima, é preciso enfatizar que uma página 'tableless' não é aquela que não permite a tag table e seus derivados… e sim aquele que sabe o que é uma tabela e aonde ela é empregada.

  • http://www.osnysantos.com.br Osny Santos Netto

    Mandou bem, me lembro ainda quando colocava Titulo do texto.

    Ainda bem que não cometo mais erros desse tipo na semântica de um site.

  • http://www.techzine.com.br Rael B. Riolino

    É… eu lembro até hoje meus primeiros sites "tableless"… em divs, porém, lotado deles! hehe…

    detalhe, demorei umas 5 horas pra conseguir montar meu primeiro site sem tabelas :P

    e mesmo assim não tinha ficado aquelas coisas nao…

  • Newton Wagner

    Eu não acredito no termo Tableless, nem como forma de marketing. Acho que 'padrões web' denota mais o que é de verdade a coisa.

    Parabéns pelo artigo. :)

  • http://www.panteon.com.br Rodrigo Chibiaqui

    O tableless é a porta de entrada no mundo dos padrões web. Quem nunca colocou 500 div´s antes de se aprofundar no assunto?

    A ótima noticia é que geralmente quem se preocupa em retirar as tabelas do site não para por aí, e em pouco tempo está em busca do conhecimento amplo sobre os padrões, semântica, protocolos, etc…

    Sobre a validação? É muito importante que além da semântica, o conjunto sintatico e léxico estejam perfeitos. Logicamente isto não é tudo, mas é super importante ter um código sem erros, não tenha dúvidas!

    O que não se pode é confundir nem defender somente um lado!

  • http://www.brunodulcetti.com/blog/ Bruno Dulcetti

    assino embaixo… tableless eh como a web 2.0… apenas um nome marketeiro… e os iniciantes sempre caem pra tableless… belo texto… akele abraço…

  • http://www.numclique.net Joares

    maravilhoso artigo…

    só complementando o q o Dirceu disse… conheci um cara num fórum q tava postando várias vezes uma imensa tabela feita com divs…

    Os famosos "divmaníacos" soltos por aí…

    Mas… a questão de se desenvolver seguindo os padrões realmente é algo que é além de simplesmente saber centralizar um site com CSS…

  • camilo vitorino da c

    muito bom o seu artigo.. realmente tem muita gente que faz tableless mas o código fica tão ou mais pesado que quando usava tabelas

  • Rogério Brum

    sou mais o tal do divless =D

  • http://www.thalisvalle.com Thalis Valle

    Putz, não sobrou comentário pra mim. :(

  • Gustavo Straube

    Divless?

    Eu vi algum artigo que dizia que o melhor elemento para construir a estrutura de um site são as listas. Não acredito nisso. Se não me engano, o Diego Eis comentou sobre isso lá no Tableless. A tag div existe para definir seções no documento e as listas, obviamente, são listas, usá-las para separar conteúdo, seria como voltar às tabelas do ponto de vista semântico.

  • Felipe Ranieri

    Ótimo artigo!!

    Acho que o cenário muda aos poucos. Há muitas pessoas na área (ainda) que, mais do que confundir os conceitos, criticam sem saber do que estão falando. Infelizmente é comum ouvir uma piadinha do tipo "esse lance de w3c é moda". Mas é isso ai, trabalhando crescemos, e creio eu, mudamos o cenário.

    Abraços e mais uma vez, parabéns.

  • Carlos

    "Divs serve para criar estruturas lógicas" … De onde vc tirou isso..

    semanticamente o div não tem significado nenhnum… a propósito.. as próprias tags se estruturam sozinha, o conceito de divless parece piada, mas é um tapa de luva no pessoal do tableless…

    A propósito, pq tanto esforço em separar tableless de webstandards somente agora?

    Só pq agora é comun desenvolver websites em tableless e vcs querem continuar acima destes? Agora vcs estão empurrando webstandards… Depois dá uma lida no Webstandards Project – http://www.webstandards.org/ e vê realmente qual é a proposta do grupo…

    Oras, seus estudos sobre microformat estavam mais interessantes….

  • Fernando "Poe&q

    Eu acredito muito no termo "tableless" como um divisor de águas: quando você apresenta para alguém acostumado as falicitações de editores WYSIWYG que ele pode fazer as mesmas coisas de forma mais fácil e melhor é bem melhor você mostrar que isso pode ser feito através da substituição das infâmes tabelas por uma estrutura mais maleável de layers através dos "divs". Depois de introduzido o conceito você pode explicar porque não adianta só utilizar-se desse "macete", que a coisa é mais profunda.

    A diferença específica, como mostra seu texto, é que para ensinar alguém a pilotar primeiro deve ensinar como ligar o carro e guiar pelas ruas, depois você acelera e corre! ;)

    Como Daniel Sam ouviu: "Pinta cerca com a direita. Pinta cerca com a esquerda. Esfrega para a direita. Esfrega para a esquerda".

    Os padrões de Web deveriam ser item obrigatórios em faculdades e cursos que prometem salvar o mundo ensinando as pessoas a serem designers de Web, mas a coisa é mais profunda e leva tempo – você deve aprender o significado do trabalho com Internet e quebrar o estereótipo que sites devem ser bonitinhos apenas para vender produtos (aí entra outro quesito, a acessibilidade).

    Um abraço.

  • Carlos

    Concordo!

  • http://www.pauloacosta.com Paulo Acosta

    Fazer site seguindo padrões de semantica, e webstandads é tudo muito lindo, bonito e maravilhoso.

    mas ainda não tem muita aplicação. talvez no futuro quem sabe…

    As pessoas tem que tomar muito cuidado com Hypes, para não ter trabalho à toa.

    Henrique, uma boa sugestão para o artigo são as consequencias em posicionamento em sistemas de busca para sites que seguem WebStandards e Semantica.

    SEO as vezes é uma trabalho de criatividade e gambiarras. E todos reconhecem que SEO é responsavel por uma boa parte do sucesso de um site.

    Muito legal esse seu artigo, parabéns

  • http://www.w4studio.com.br Valmir

    A questão toda se restringe a semântica. Esta é a evolução da discussão suscitada pelo presente artigo. É sempre uma tentação empregarmos tags fora de seu contexto por razões bem subjetivas. Têm desenvolvedor que já está empregando listas para estruturar formulários. Isso é cair no mesmo erro, listas não ordenadas pode ser também uma panacéia como foram as tabelas e os divs. Vamos acordar gente.

  • Fellipe Cicconi

    Henrique, legal tocar neste ponto.

    Há tempos que isso deveria ser dito e você é uma das melhores pessoas para fazer isso neste meio.

    Como sempre, bem escrito e colocado! :)

  • Pingback: Web Standards vs Tableless - Tableless()

  • Pingback: rogeriobrum.com » Blog Archive » Aprenda Tableless, iniciando…()

  • http://rodrigomedeiros.com.br/categoria/geral/ Rodrigo Medeiros

    Muito bom o artigo!

    Ficou muito bom o novo layout, e essa estrelinha girando…

    É o charme! :P

  • Pingback: Xmedia Webfactory » Arquivo do Blog »()

  • Pingback: Xmedia Webfactory » Arquivo do Blog » Webstandards x Tableless()

  • Dirceu Jr.

    Web Standards é só ter leitura no W3C S.

    Porém mesmo tentando é dificil implementar tudo que sabemos sobre isso se na hora do layout o internet explorer ferra.

  • Rafael Marin

    Acredito que "Tableless" seja um bom princípio para os Web Standards. Quem geralmente fazia sites com tabelas e se empenha em aprender a fazer sites sem elas, certamente depois resolve ir além de fazer só isto.

    Particularmente demorei semanas para aprender a fazer um site com 's e css. E quando cheguei num bom resultado, descobri que poderia crescer muito mais tornando o meu XHTML válido e meu CSS válido.

    Depois desta segunda vitória (se assim posso chamar – a primeira foi fazer um site tableless), resolvi investir mais um pouco de tempo e pesquisa e revisar a semântica das tags.

    E não parou por aí. Continuei lendo, pesquisando e resolvi também incluir opções de acessibilidade, tornando formulários, tabelas, links, e tudo que a página continha acessível dentro dos padrões que conhecemos.

    Certamente há diferenças entre Tableless e Web Standards, mas quem se esforça para aprender Tableless certamente não quer parar por aí. O tableless já é uma boa introdução para códigos válidos, acessiblidade enfim, Web Standards.

  • Pingback: Auau Blog » Arquivos » Edital #1()

  • Areta do Bem

    Li o artigo do Diego no Tableless, e de lá vim ler o seu…

    Muito bom os artigos.

    Definitivamente tira e muito as dúvidas de quem está iniciando, de quem deseja ser um profissional "semanticamente correto"!

    O que eu conclui, é que, Tableless, é um "apelido" para fazer referencia a sites que foram desenvolvidos sem tabela, e ficou claro, que a intenção é ser Standards, mas nem sempre eles são.

    Te toda essa confusão, já fico feliz pela iniciativa do site ser Tableless!

    Peço licença para citar esse artigo no meu (humilde) blog.

    Obrigada!

  • Pingback: aretadobem.com.br » Blog Archive » Web Standards vs Tableless()

  • Pingback: A semântica do span e do div » Revolução Etc - Web Standards em uma casca de noz!()

  • Leonardo Proc&oacute

    Muito bom mano!!

    Gostei pacas!!

  • Pingback: Esqueça o atributo style. Estilos inline em doctype strict são resquícios do câncer de um passado sem padrões. » Revolução Etc - Web Standards em uma casca de noz!()

  • Pingback: Tableless « JulioGreff()

  • Pingback: JulioGreff’s Blog » Tableless()

  • Pingback: Padrões WEB, não são mais tendências e agora o que nos espera? « Vinícius Krolow()

  • Pingback: Júlio Greff » Arquivo » Tableless()

  • Claudio

    O que importa é o resultado. Vc já tentou rodar este site no firefox? Veja o que acontece.

  • Pingback: I Love Blogging: Gattune! empreendedor, novo layout, novos editores!()

  • Pingback: O que é Tableless ? em r3, Padrões Web para Todos!()