LOGIN:

iMasters | Por uma internet mais criativa e dinâmica

Feeds

Web Standards

Feed da seção Web Standards

Newsletter de Web Standards


Sexta-feira, 29/02/2008 - 12:00 - Por Igor Escobar
Seções relacionadas:

Tableless, o termo maldito?

Recentemente, vi alguns profissionais e blogueiros revoltados com a repercussão do termo "Tableless" na mente dos pobres alunos e aprendizes.

Meu objetivo com este texto é tentar salvar as pobres mentes puras de alguns destes aprendizes que talvez cheguem até aqui através dos buscadores, sites que estejam linkando a matéria, etc. Provavelmente grande parte dos leitores já saibam exatamente o significado deste termo e como utilizar esta técnica na prática. O aprendizado é inevitável, cedo ou tarde você acaba descobrindo o que é Tableless de fato.

O Problema

O termo Tableless veio à tona no Brasil em 2003, pelos amigos Elcio Ferreira e Diego Eis, fundadores do site www.tableless.com.br, que incentiva o uso da técnica, com exemplos, mostrando benefícios, boas práticas de desenvolvimento e diversos assuntos que giram em torno do código fonte do desenvolvedor. Para a maioria destes aprendizes, este site pode se tornar evangelizador (rs), você entra crendo no poder das tabelas e sai como table-killer.

Esta é a visão interpretada pela maioria das pessoas. Sempre que alguém começa a ler sobre o termo, logo quer sair botando a mão na massa, e contar para todo mundo: - Agora eu sei Tableless, é fácil, é só nunca mais usar tabelas!

As pessoas tendem a ler o conteúdo pela metade ou rápido demais, ignorando detalhes, afinal, a sua teoria já esta embutida no seu próprio título certo? Errado!

Eu não sei ao certo o que acontece. É difícil identificar de quem é a culpa, enfim, de duas, uma:

Pode ser nossa (disseminadores de conteúdo), que passamos a informação as vezes incompleta, sem muita clareza, omitindo alguns detalhes, ou a culpa é do próprio leitor.

Tableless - Definitivo

O termo Tableless, nesse começo de 2008, faz 5 anos que vem sendo falado, estudado e colocado na prática no Brasil.

O Tableless é um técnica de desenvolvimento web cujo o foco esta exclusivamente no seu código fonte. Antes de aplicar o tableless e sair por ai saltitando, estude a semântica das tags, amplie o seu conhecimento em relação às tags, se você não conhece o HTML a fundo, sua capacidade de criação de interfaces com Tableless fica muito limitada, e exposta ao famoso "jeitinho brasileiro" ou gambiarras, como preferir.

Tableless não é NUNCA mais usar tabelas, Tableless é usar as tags do HTML respeitando os seus valores semânticos, se você programa sob esta filosofia, automaticamente seu código no final será um código, semântico, compatível e claro, Tableless.

As tabelas foram criadas para exibição de dados tabulares e não para estruturação de layout e criação de interfaces.

A W3C diz:

"Tables should not be used purely as a means to layout document content as this may present problems when rendering to non-visual media."

Tabelas não podem ser utilizadas meramente para definição da estrutura do seu layout, isso provavelmente vai gerar problemas na rederização para midias não visuais.

Se você parar para fazer uma análise, vai ver que é uma resposta meio lógica, se a web 2.0 encoraja o uso dos padrões web para o desenvolvimento, por que o Tableless, que é um técnica que surgiu junto com o amadurecimento da web, iria encorajar o contrário?

O termo talvez gera dúvida na cabeça das pessoas por que todos os lugares que você encontra fonte de informação principalmente no tableless.com.br fala-se muito em livre-se das tabelas, o fim das tabelas, tabelas nunca mais etc.

O autor do texto repete muito isso somente para fixar o objetivo do técnica e enfatizar o resultado em si. Mas em nenhum momento é citado que você deve esquecer as tabelas, se fosse somente isso, esquece-las, seria simples, tudo gira em torno de como se virar sem elas para fazer o básico o resto é com você.

Tableless = Menos tabelas (rs) e não livre de tabelas ou sem tabelas ou qualquer outra variante.

Aceita uma dica? Não leve as coisas tão ao pé da letra, tente entender o por quê das coisas antes de mudar.

Eu sei que este texto não vai chegar nem a 0,00000001% das pessoas que estão começando com desenvolvimento web, mas se este texto pelo menos ajudar uma pessoa a pensar diferente sobre o Tableless se encontrando na definição dos termos já vou ficar contente.

Links Úteis:

Tables in HTML Documents (W3C)

Tutorial Básico de Tableless

O Caminho suáve para o tableless

Informação & Formatação; as duas camadas do desenvolvimento web

Video tutorial #9: Implementando a home de um site tableless

Introdução a semântica web

Semântica Web

Semântica de titulos

Semântica de formulários

Espero ter contribuído!

[]´s

Todos os artigos de Igor Escobar

23 comentários publicados

  • 1. Quanta confusão!

    Sexta-feira, 29/02/2008, por Paulo de Tarso Furtado Machado

    Pois é, esse termo "Tableless" já gerou tanta discussão (desnecessária) que eu até tento evitar de utilizá-lo, dependendo de quem está conversando comigo sobre isso.

    Em casos de pessoas recém formadas em cursos de Web Design, que saem construindo sites inteiros através da junção entre Fireworks e Dreamweaver, costumo dizer então que são "Layouts CSS", os quais devem ser estruturados com as tags corretas para tal, como as próprias "divs".

    E as tabelas? Oras, todo mundo já está cansado de ouvir que "tabelas servem para conter dados tabulares". Mas parece que mesmo assim a maioria ainda precisa entender direito o que é um dado tabular. Caso contrário, a pessoa, depois de ouvir isso, simplesmente diz: "Ah..." e continua com aquela enorme interrogação...

    Como é difícil conscientizar as pessoas. Se todos já aprendessem desde o início a maneira correta de se construir um site, não teríamos tantos problemas assim hoje em dia...

    Responder comentário

  • 2. É verdade...

    Sexta-feira, 29/02/2008, por Igor Escobar

    Eu acho que o termo correto seria "Layout Semântico". Este seria o termo perfeito. Layout CSS não quer dizer nada a não ser o fato dele estar estilizado através de folhas de estilo rs.

    Obrigado pelo comentário Paulo, prazer te-lo como leitor ;)

    Responder comentário

  • 3. Padrões Web

    Sexta-feira, 29/02/2008, por Fabiano Pereira

    O termo foi lançado no mercado como a descrição de uma metodologia de trabalho essencialmente baseada na utilização das regras definidas como "padrões web", com destaque especial para o não-uso de tabelas em layouts, técnica amplamente difundida por importantes designer da assim chamada "web 1.0", protagonizada, especialmente, por David Siegel em seu livro "Creating killer web sites", uma grande revolução para a web, naquela época.

    Acho que o "problema" foi o uso do termo de forma marketeira: quando bem sucedido, leva o aluno a estudar, numa boa escola, as técnicas de padrões. Quando não, leva o tal aprendiz a uma busca desenfreada em sites de referência, e acaba tendo uma visão levemente distorcida das coisas.

    Acho que devemos lutar pela propagação do termo "padrões web. É isso.

    Parabéns pelo artigo!

    Responder comentário

  • 4. Perfeito!

    Sexta-feira, 29/02/2008, por Igor Escobar

    Concordo plenamente com o seu ponto de vista, foi básicamente isso que tente expressar no decorrer do artigo.

    Obrigado por seus comentários, foi um prazer tê-lo como leitor.

    Igor.

    Responder comentário

  • 5. Para isso que existe a web 2.0

    Sexta-feira, 29/02/2008, por Adriano Rosa


    Excelente artigo!

    Abço

    Responder comentário

  • 6. Olá!

    Sexta-feira, 29/02/2008, por Igor Escobar

    Muito obrigado pelos elogios Adriano.

    Prazer ter você como leitor.

    Igor.

    Responder comentário

  • 7. Meu entendimento

    Sexta-feira, 29/02/2008, por Renato Nogueira

    Apenas acho que o TABLELESS chegou só por causa do alto uso de tabelas e do esquecimento das CSS e das DIV's, não sei se estou certo mais ainda existe muito site usando o css de forma meio que "feio" Exemplo: style01, style02... e assim vais, pois ele se perde nas tabelas e esquece o que o site tem de mais precioso as CSS.

    Responder comentário

  • 8. E o pior..

    Sexta-feira, 29/02/2008, por Igor Escobar

    E o pior de tudo, é que eu acho que isso sempre vai existir! Só não mais em um curto espaço de tempo, empresarialmente falando, mais as pessoas ao menos saberão diferenciar os sobrinhos dos profissionais.

    Este é o futuro que eu arrisco.

    Responder comentário

  • 9. E o pior (2)...

    Sexta-feira, 29/02/2008, por Paulo de Tarso Furtado Machado

    ... que o que o Renato disse, de se encontrar "style01", "style02", etc., esse é o típico caso de código gerado por softwares como o Dreamweaver, em modo visual...

    Eu estava começando a acreditar que as pessoas já estavam se esquecendo que esse (maldito) modo visual não existia mais... Que pena...

    Responder comentário

  • 10. Tecnicamente sim !

    Sexta-feira, 29/02/2008, por Rodrigo Emanuel Lima Luz

    Trabalho em desenvolvimento web usando tableless por 4 anos e soube bem lidar com prós e contras de se utilizar esta técnica. O código fica mil vezes mais leve, renderizado mais rápido pelo browser.

    Não fui muito fã do tableless.com.br pois ele aplicou várias regras e ditos que eu, durante minha experiencia, neguei e ainda nego até hoje.

    Tocando na questão da Websemântica, como proprio foi dito, dados organizacionais precisam ser tabulares, para proprio entendimento visual. Mas já fazer vários layouts usando tabelas, principalmente hoje onde os browsers estão se esforçando para renderizar a folha de estilos como deve ser, é meio que "forçar a barra".

    Para os mais fanáticos, existe uma técnica chamada "DIVLess" ... acreditem ou não. Eu mesmo já tentei, fazendo um código usando apenas <ul>, <ol> e <li>, mas é mil vezes mais cansativo e trabalhoso. E sinceramente, um tanto quanto esdrúxulo.

    Enfim, mudando de assunto, ótimo post o seu. hehehe !

    Responder comentário

  • 11. Fora que, fazendo isso...

    Sábado, 01/03/2008, por Paulo de Tarso Furtado Machado

    ... seu código não fica nada SEMÂNTICO! Né? Afinal de contas, se você passar a utilizar as tags de listas para estruturar sua página, cairemos no mesmo conceito do Tableless: utilize tabelas para dados tabulares... E, no caso de listas, utilize listas para... Listas... Oras, simples assim... Um menu, por exemplo, é uma lista! Ainda podemos encontrar alguns que não concordam com isso, mas páre para pensar: o que é um menu? Nada mais, nada menos do que uma lista de opções... Pronto!

    E outra: se inventam técnicas para "bater de frente" com os que já existem, fala sério, isso é coisa de quem não tem o que fazer... Por que querer inventar algo só para ir contra os princípios? Pra que inventar uma técnica que me venha estruturar uma página sem utilizar as tags que, por definição semântica, servem justamente para isso?

    Vixi... Isso vai longe pelo jeito... rsrsrsrs...

    Responder comentário

  • 12. Claro !

    Sábado, 01/03/2008, por Rodrigo Emanuel Lima Luz

    Concordo Tarso. A semântica vai pro espaço. Mesmo que tudo possa ser transformado com CSS, não se deve abusar. O que todo mundo chama de "web 3.0" vai ter como marco próximo a semântica da linguagem.

    Eu tentei esta "técnica" estranah em 2006 e demorei quase o dobro do tempo do que fazendo códigos como costumo fazer. Fora que os resultados visuais não são sempre os esperados. Enfim, a prova que precisamos ter sobre este tipo de código é que não "pegou" como o tableless.

    E uma coisa também concordo com você: Discutir websemântica e standards hoje e em futuros bem próximos, vai ser igual como debater religião. Sempre haverão fanático :D.

    Responder comentário

  • 13. E o pior de tudo (3)...

    Sábado, 01/03/2008, por Paulo de Tarso Furtado Machado

    ... é justamente isso: sempre haverá uma resistência! Dá vontade às vezes até de xingar... Caraca, será que é tão difícil assim enxergar as vantagens de se desenvolver dentro dos padrões?

    Será que as pessoas continuarão a enxergar as palavras "padrões" como "na verdade eu quero ir contra os padrões para poder me destacar mais"? Agora, só me digam que vantagem isso tem...

    E só me digam se existem vantagens em se desenvolver fora dos padrões...

    Parece que a palavra padrões mexe com o ego das pessoas, como se fosse algo que se tem que "quebrar"...

    Atenção pessoas que ainda não aceitam as webstandards: quando falamos padrões não é para fazerem igual a quando vocês eram crianças, que os pais de vocês falavam que não era pra fazer isso ou aquilo, mas vocês íam lá e faziam justamente porque eles falavam que aquilo era errado ou proibido... Esses padrões que tanto se falam existem para FACILITAR SUA VIDA! O que mais complica é justamente o vício de se querer enxergar a página como uma tabela... Enquanto vocês não se desvincularem desse vício, continuarão agindo como os xiitas, como os fanáticos e extremistas...

    Think about this!

    Responder comentário

  • 14. A coisa é mais ou menos assim...

    Sábado, 01/03/2008, por Wagner Bianchi

    Conheço prestadores de serviço de "recorte e montagem de web sites" que precisam MUITO ler este seu artigo e principalmente o seguinte trecho:

    "Tableless não é NUNCA mais usar tabelas, Tableless é usar as tags do HTML respeitando os seus valores semânticos, se você programa sob esta filosofia, automaticamente seu código no final será um código, semântico, compatível e claro, Tableless."

    A grande questão é justamente defender algo que se ouviu dizer que é bom, leu pela metade as fontes de informação, se preocupou mais em se ater aos código para enfim ter a "glória" de falar para todo mundo, EU USO TABLELESS.

    Escrever código, qualquer um escreve! Saber dos fundamentos e ter ciência do que se está fazendo, que necessitam estudos e aperfeiçoamento...ehehe, ninguém quer.

    Parabéns pelo artigo, muito bom!

    Responder comentário

  • 15. Cara vc disse tudo!!

    Domingo, 02/03/2008, por dieffrei quadros

    eu até estava pensando em escrever um artigo para explicar isso... mas vc disse tudo parabéns!

    Responder comentário

  • 16. Muito Obrigado

    Domingo, 02/03/2008, por Igor Escobar

    Muito obrigado pessoal, pelos comentários e pela participação de todos.

    Saibam que os comentários dados neste artigo são de muito importância para mim, principalmente para medir o quão conciso eu estou sendo.

    Muito obrigado pelas palavras de todos. Principalmente aos elogíos.

    Grande Abraço.
    Igor.

    Responder comentário

  • 17. Excelente!

    Domingo, 02/03/2008, por Bruno Cochito

    Igor, seu artigo sintetiza toda a tendência de tableless e define, de forma prática e sutil, a verdadeira importância e o real uso da técnica.
    Acompanhá-lo-ei de hoje em diante.

    Abraços,

    Responder comentário

  • 18. Opa!

    Domingo, 02/03/2008, por Igor Escobar

    Que bom que gostou Bruno, o objetivo do texto era justamente este, alcançar o máximo de pessoas possíveis, para descomplicar a cabeça da galera que ta começando e ta meio que perdida no meio de tantos conceitos.

    Será um prazer tê-lo como leitor!

    Semanalmente esterei com novos textos aqui no iMasters ;)

    Responder comentário

  • 19. Enfim Meu Desabafo !

    Quarta-feira, 13/08/2008, por Rodrigo Chiarato

    Puxa vida estou feliz em ler algo o qual eu sempre preguei. Trabalho numa area onde a lei é tableless (mais problemas), o que significa que vc tem q ter um arquivo de estilo para cada browser e cada versao dos mesmos. Com tabelas isso não acontece, se inventarem um broser novo hoje o site não perde o layout. Na minha opinião devemos usar o que há de melhor nos dois. Não adianta web é uma convergência de tecnologias tem que saber dosar, nada em excesso e nem ao pé da letra como vc disse. Faço de suas palavras as minhas, excelente.

    Responder comentário

  • 20. GSS -Gambiarra Style Shit

    Quarta-feira, 17/09/2008, por Jonathan Braz Simas

    Para mim, uso de divs em vez de tabelas tem motivos muito óbvios:
    1- facilitar as alterações do layout, pois as tabelas são um tanto rígidas.
    2- Reduzir e tornar mais compreensível o html, sem tantos trs e tds.

    Pórem... Existem problemas ao utilizar tableless que fazem qualquer programador arrancar os cabelos. Principalmente as diferenças no modo em que os navegadores interpretam css, o que requer utilização de hacks e macetes não convencionais (muitas gambiarras, folhas de estilo diferenciadas por navegador, já cheguei mesmo a fazer páginas php com content-type:text/css. Ridículo, não é?).

    Quanto à semântica da coisa, discordo. Utilizo tags de forma convencional ou não, de acordo com a necessidade e minha própria criatividade, como listas para layout, divs para listas e o bom e velho parágrafo pode servir para muita coisa além de texto. Os conservadores acham um absurdo, mas enquanto não padronizarem a interpretação do css, as gambiarras serão sempre necessárias, com ou sem tabelas. Melhor que tableless seria gambiarraless.

    Muito boa matéria.

    Responder comentário

  • 21. ...discordo...discordo e discordo.

    Quarta-feira, 17/09/2008, por Igor Escobar

    Concordo em partes quanto a sua observação a divergencia de renderização nos navegadores. Se esta torno, a culpa é do desenvolvedor que ou desenvolve errado, ou esta usando as coisas erradas na hora errada ou desconheçe o CSS Reset.

    Quanto a segunda observação, discordo completamente do seu ponto de vista e acho que você deveria ler mais a respeito antes de falar com tanta convicção assim de algo.

    Se a web é assim hoje, é por culpa de pensamentos assim. Se todos batessem o pé e não fizessem nada até algo ser feito, NADA será feito mesmo, quem faz a web somos nós, programadores e colaboradores. Mude sua cultura, faça sua parte, e tudo vai mudar. Se você não da valor a semântica das tags e usa tags aleatorias para as coisas sem se importar para que ela foi criada, sou sincero com você, se você fosse um funcionário meu, você estaria encrencado, pois você como programador, deveria ter o minimo de preocupação com relação ao aspecto e integridade do seu código. Lembre-se, seu código é o seu curriculum, se seu código é uma porcaria, você esta cagando no próprio pé.

    Desculpe meus comentários aqui Jonathan, não estou querendo julgar ninguém, todo mundo pode criticar, porém, para criticar é preciso ter conceito formado, e o conceito que você formou não é nem um pouco valido, pode ser que deu certo pra ti até hoje, mais no mundo empresárial, onde todo cuidado é pouco, esta não é a postura que valorizamos de um profissional.

    Responder comentário

  • 22. Calma ae pessoal

    Sábado, 04/10/2008, por Wesley Willians Ramos da Silva

    Temos um grande problema chamado IE6.
    Fora isso NÃO há porque colocar milhares de gambiarras no código.

    Me desculpe mas não posso concordar com isso: "mas enquanto não padronizarem a interpretação do css, as gambiarras serão sempre necessárias, com ou sem tabelas. Melhor que tableless seria gambiarraless."

    Olha, isso está muito longe, o IE6 sair de uso está longe, diferenças entre os browsers sempre teremos.

    O que não podemos deixar é de utilizar os elementos para que eles foram usados, afinal, seria muito mais fácil o HTML 5 ou 10.0 ter apenas a tag <ul><li>. Pronto tudo resolvido. Por que a W3C não o faz? Porque não somente eles mas NÓS também sabemos a importância de utilizar os elementos corretamente.

    Vou dar um exemplo muito simples: Por que utilizar uma taça de vinho se temos copos de bar? Da para tomar do mesmo jeito, não dá?

    Outra coisa, daqui 1 ano (isso é um chute) teremos umas 50 milhões de brasileiros utilizando celulares. Meu Deus!!
    Tem certeza que tudo vai funcionar bem? Já que não é para utilizar semântica, faça tudo com tabelas...

    O grande ponto é:
    - Tableless é um termo que foi popularizado de forma totalmente equivocada.
    - Podem falar que é culpa do leitor, mas quando há uma grande gama pensando a mesma coisa, acredito que nós, disseminadores de informações, não fomos muito claros.

    OBS: Use apenas parágrafo e fique em último no google. Lembre-se, até para isso a semântica é algo MUITO importante.

    Um grande abraço, ótimo artigo.

    Meu objetivo não é "brigar" ou ofender ninguém, espero que tenham bom senso.

    Responder comentário

  • 23. Não é melhor usar Webstandards do que Tableless?

    Quarta-feira, 11/02/2009, por Paul Vera

    Afinal, imagino que seja IMPOSSÍVEL usar webstandards sem utilizar as tabelas de maneira semanticamente adequada, ou seja, apenas para dados tabulares. Porém é possível fazer designs "sem tabelas"(ou com MENOS tabelas) e continuar a ter um código mal-estruturado, sem relevância semântica... Fora que em inglês o sufixo "less" quer dizer sempre "SEM" e não menos.

    Responder comentário

Poste um comentário


Os textos publicados neste espaço são de responsabilidade única de seus autores (colunistas e leitores) e podem não expressar necessariamente a opinião do iMasters.

Sobre o autor

Igor Escobar é Formado em Desenvolvimento de Sistemas para Internet pelo Instituto Brasileiro de Tecnologia Avançada. Desenvolvedor web da Visie, escreve em veículos de tecnologia como o Web Insider e mantém um blog (www.igorescobar.com).


Indique para um amigo

captcha

TI SHOP Produtos iMasters

  • Lançamento: CD-ROM Treinamento Aplicado de SQL - Lançamento! Treinamento Aplicado de SQL - Aprenda a trabalhar com SQL com bancos de dados Oracle e SQL Server. São mais de 100 tópicos explicados por Mauro Pichilliani, um articulistas mais lidos do iMasters. Aproveite! Apenas R$ 69,90 no TI SHOP.
  • Lançamento: Livro iMasters "O Encontro de 2 Mundos"- Este livro conta com 56 crônicas de profissionais mais admirados e influentes do mercado brasileiro de Internet. Aproveite o preço especial para leitores do iMasters. Apenas R$ 40,00 e envio imediato!
  • DVD Curso Completo de Photoshop - Do conceito à finalização Lançamento! Curso Completo de Photoshop, em DVD, com mais de 230 aulas dividas em 4 módulos: conceito, básico, avançado e finalização. Apenas R$ 69,50 no TI SHOP - Frete com 50% de desconto
  • DVD Javascript Starter - Curso Completo Com mais de 9 horas de vídeo-aulas, é um curso completo sobre Javascript. Ideal para quem deseja aprender a linguagem. Apenas R$ 64,90 no TI SHOP - Frete com 50% de desconto!

2001 - iMasters FFPA Informática Ltda - Todos os direitos reservados.