Blog do Maujor - Tutoriais e pensamentos, CSS, web standards, acessibilidade, tableless


Fora Tableless!

Publicado em: 2008-02-20 — 4,507 visualizacoes

Tableless é extremamente nocivo e presta um enorme desserviço aos Padrões Web.
Tableless dissemina um conceito totalmente equivocado sobre as tecnologias do W3C e no meu entender deveria ser banido definitivamente.

Escrevo esta matéria com dois propósitos básicos:

  1. Conclamar todos meus leitores que desenvolvem Blogs a escrever algo contra Tableless
  2. Alertar os desenvolvedores iniciantes (e até mesmo alguns não iniciantes) para os perigos de Tableless

A motivação para escrever esta matéria veio de um post colocado na seção Web Standards de um fórum para desenvolvedores. Lá, possivelmente um iniciante nos estudos dos padrões Web, perguntava como inserir dinamicamente o resultado de uma consulta a Banco de Dados em uma grade composta de n linhas por m colunas de DIVs.

Obteve como primeira resposta a sugestão de usar uma tabela desde que supostamente os dados a apresentar se enquadravam na categoria "dados tabulares" (como são os dados contidos em tabelas de índices financeiros, horários de meios de transporte, datas de jogos de campeonatos de futebol, preços em geral e similares).

Várias outras respostas e sugestões surgiram e lá pelas tantas o iniciante que postou a dúvida, talvez indignado com a insistência de outros participantes em convencê-lo a usar a usar uma bela e apropriada tabela argumentou que não queria a solução, pois (sic) "E este forum tbm nao fala sobre tableless?".

Humm! ele deve ter raciocinado assim: este fórum é sobre tableless, logo vou buscar uma solução tableless (sem tabelas).
Perfeito o raciocínio! Mas, baseado em uma premissa errada.

Tableless significa realmente sem tabelas, contudo Padrões Web não é e nem nunca foi desenvolver sites sem usar tabelas. Associar o nome Tableless aos Padrões Web é um erro altamente nocivo ao aprendizado. Tabelas são perfeitamente legais em marcações seguindo as recomendações do W3C, pois o elemento TABLE tem o valor semântico de "apresentar dados tabulares" e não deve nunca ser substituido por DIV, um elemento sem valor semântico, quando se trata de apresentar dados.

foraPortanto:
Fora o termo Tableless do jargão Web Standards!

foraÀ propósito:
Vida longa para o site do Élcio e Diego:
http://www.tableless.com.br

1 Star2 Stars3 Stars4 Stars5 Stars (1 votos, média: 5 / 5)
Loading ... Loading ...

----------------x-x-x---------------    fim da matéria    ---------------x-x-x---------------

Construindo sites com CSS e (X)HTML

Esta matéria foi publicada em: 2008-02-20 (Wednesday). Subscreva o feed RSS 2.0 para comentários.
Comente abaixo, ou link para http://www.maujor.com/blog/2008/02/20/fora-tableless/trackback no seu site.



54 comentários na matéria: “Fora Tableless!”

  1. Rafael Marin disse:

    De acordo!
    Já escrevi sobre isso em meu blog, e está na hora de reforçar o recado.
    Assim que meu domínio (que expirou) voltar, será meu primeiro artigo.

  2. adriano disse:

    Clap! Clap! Clap!
    Sempre desenvolvi sites com tabelas, coloco elas alí, em 30 segundos esta do jeito que eu quero. meus códigos (os mais atuais) geralmente validam tudo.
    Esse esquema de Tableless, SÓ me da dor de cabeça, em questões de compatibilidade com diferentes browsers e versões.
    HOJE, quem me diz para fazer todo em tableless, em mando ir às favas. quero produtividade com qualidade, e isso, as tabelas me servem muito bem.
    ótima matéria. ótimos site, parabens!

    Abraços

  3. Clauber Stipkovic disse:

    Ufa, no começo do post eu me assustei ..heheh achei que o pessoal(Élcio e Diego) tivesse feito algo de errado :-P

    Mas infelizmente é assim mesmo, muito iniciantes no estudo de desenvolvimento web, acabam achando que se tirarem todas as da sua página, serão considerados os maiorais.

    É ai que a coisa complica, e infelizmente é onde eles não entendem o recado do tableless :(

    Grande abraço Maujor, parabéns e muito obrigado por tudo o que vc já fez pela Web :)

  4. Fellipe Cicconi disse:

    Assunto veeeelho…

    contudo, volta e meia encontro malucos tentando criar estruturas nianas para agrupar dados tabulados em que uma tabela serviria perfeitamente.

  5. Fernandojs disse:

    Muito bem observado!

    Realmente o termo é muito perigoso, até mesmo, para desenvolvedores experientes.

    Abs
    t+

  6. Micox disse:

    Acho que o adriano (2o comment) não entendeu o recado…

  7. Luiz Jr. Fernandes disse:

    Acho que a questão não resume-se em não usar tabelas, mais sim, “quando devo usar tabelas?”, visto que o problema maior para quem está iniciando na caminhada dos padrões web de desenvolvimento é justamente compreender como funciona a semântica de desenvolvimento e o valor semântico de cada elemento xhtml. Tableless sim!, mais apenas para se estruturar layouts, e que Deus ilumine a mente daqueles que tentam fazer divs funcionar semanticamente como tabelas.

  8. Edy Segura disse:

    Bom a idéia que eu tive do tableless quando comecei a estudar os padrões web, era para fazer o layout sem tabelas. Mas somente o layout. E não de usar divs ou qualquer outra coisa para apresentar dados tabulares.

  9. Rodrigo Capuski disse:

    Micox, eu tenho certeza que ele não entendeu.

  10. Pedro Rogério disse:

    O Orkut é um lugar onde deve-se disseminar isso!!!

  11. Joel Galdino disse:

    Acho que o Adriano (2º comentário) realmente não entendeu.

    A proposta dos padrões web é justamente proporcionar compatibilidade aos diferentes browses e dispositivos.

    Por exemplo: Eu posso ter o mesmo conteúdo apresentado de forma melhor em um smartphone. Apenas tendo uma folha de estilo própria para dispositivos móveis. Posso ter também uma versão própria para impressão.

    Aprender a “pensar” como os padrões web é um investimento na carreira e sua produtividade será tão melhor quanto.

    Também não posso esquecer no ganho em performace, já que estamos usando menos código.

    O pensamento é simples: “Se você está usando tabelas para compor o designer do seu projeto, está tomando o caminho errado”.

  12. Bernardo disse:

    Olá Maurício e leitores,

    Assim como os outros, tomei um susto ao ler esse título no meu leitor de feeds, curioso, li o artigo todo e fiquei mais calmo ;}

    Realmente esse tipo de confusão é volte e meio reincidente, eu tive essa dúvida nos meus primeiros contatos com tableless e muitos ainda a tem. E é ótimo quando blogs respeitados no assunto como o seu, do Élcio e Diego, ZenGarden e por ai vai, postar o devido esclarecimento sobre o assunto.

    PS: Acho que o Adriano não entendeu o post tanto quanto ainda não entendeu os benefícios de um layout sem uso de tabelas como componente do design.

    Abraços

  13. Fabiano Pereira disse:

    O termo em questão representa, sem dúvida, uma evolução ao modo como o design de sites deve ser efetuado, porém, trata-se de um “neologismo” marketeiro de muita eficiência, a ponto de se confundir com o termo “correto”: padrões web.

    Parabéns pelo artigo e vida longa aos defensores e praticantes dos padrões!

  14. Margot Zeinad disse:

    Olá, Mauricio e leitores…

    Meu querido Maujor, seu post não poderia ter vindo em melhor momento… Me lavou a alma…hahahaha

    Ontem mesmo eu estava explicando a diferença - como e para quê o CSS funciona - ao contato de uma agência que me contratou para um serviço e sabe o que tive que ouvir? “Acho que avaliei mal seus conhecimentos, achei que vc conhecesse mais de css, mas se vc só consegue fazer com tabelas tudo bem.
    Depois de tentar explicar a diferença e como funciona o CSS umas duas vezes, desisti. Infelizmente algumas pessoas repetem o vêem na net sem saber exatamente do que estão falando.

    Assim como o Adriano, que leu o seu post, mas não compreendeu realmente o contexto, muitas pessoas lêem sobre CSS e Padrões Web, mas não compreendem exatamente o que está sendo dito e saem por ai fazendo um verdadeiro “telefone sem fio”. Imagina para qtas pessoas ele não deve ter dito que o Maujor é contra Tableless…
    Talvez algumas acreditem, outras venham checar e outras achem impossível, enfim… podemos dar a informação, mas como ela será interpretada, infelizmente foge ao nosso controle.

    Bjs e parabéns pelo excelente post,
    Margot

  15. O que é Tableless ? em r3, Padrões Web para Todos! disse:

    […] Fora o termo Tableless do jargão Web Standards! (blog do Maujor) […]

  16. Fabio badaró disse:

    Olá Maujor…li o post mandou muito bem, apenas na minha opinião o que poderia ser feito é, não ser totalmente radical, pois como vc mesmo disse o rapaz era iniciantee tinha uma visão meia errada do que realmente significa o Termo de tableless, o que podemos fazer neste caso (Se vc claro…faz parte de algum forum de web) e explicarmos o que realmente significa esse termo e dizermos também que, não tem essa de não poder usar tabelas, apenas não vamos fazer todo o layout recortado em tabelas…. assim estaremos ensinando mais uma pessoa a seguir e estudar realmente os padrões da W3C..

    Té Mais Seu livro chega pra mim essa semana ^^]

  17. Christiano Milfont disse:

    Seria bom uma campanha a favor do divless também :)

  18. Diogo disse:

    Apoio essa campanha!

  19. João Rodrigo Moreira disse:

    Boa Maujor! Iniciantes, como eu, se vangloriam em criar um documento sem nenhuma tabela, mesmo quando há a necessidade delas. Poucos sabem que é um conceito errado. E ao meu ver, criar uma tabela “nos conformes” é bem mais complicado do que montar um layout tableless. Acho que seria interessante, ao invés de divulgarmos “não ao tableless” ou qualquer outro não, divulgarmos um “sim às recomendações da W3C”, o que o teu site já faz com maestria. Abraço…

  20. Web2Ponto0 » Web2Ponto0 Podcast #4 - “Quem sabe faz ao vivo” disse:

    […] - A grande novidade da transmissão do podcast ao vivo - Trabalhos Freelancer - Inclusão digital no brasil - Padrão MVC - Dada.net e Flycell.com - Críticas não-construtivas - Fora tableless - Desenvolvedores que não costumam ler […]

  21. Elmadan Valentim disse:

    Esses maníacos do tableless são um pé saco, um deles já veio me perturbar por causa de uma tabela que exibia um CSV.

  22. Sampahio Damaceno disse:

    Bem no comecinho, quando começou a se expor webstandards eu migrei para esse tipo de desenvovimento (já que como a maioria eu desenvolvia através de tabelas os meus layouts) gradativamente. Pesquisei muito antes de deixar o método antigo. Hoje utilizo 100% webstandards em meus sites. Mexe que vira enfrento problemas por incompatibilidades de browsers. Mas quando vejo meu código-fonte estufo o peito com orgulho. O que não acontecia com o método antigo, através das tabelas. Hoje me acostumei tanto em utilizar o novo método que não consigo mais voltar ao antigo, e acho muito mais difícil construir um site com tabelas. Agora dados tabulares em divs?? Francamente. Dados tabulares tem que ficar para os elementos que foram constituídos para dados tabulares!! Redundante?? Não. Lógica!! O que faltou ao nosso amigo lá do post. Webstandars não são só divs, amigo.
    Resumindo, eu acho que webstandars nada mais são que lógica de HTML/CSS: usá-los da forma que eles foram criados para serem usados.

  23. Sidney disse:

    Nos últimos meses tenho estudado a fundo a questão dos padrões web. Sempre usei tabelas para desenvolver todo o layout e confesso que passar a aplicar os padrões e obedecer a semântica não foi fácil, mas só no começo,. Hoje, como o Sampaio (22) comentou, não consigo me ver fazendo sites sem os padrões!
    Infelizmente, o que aconte é que muitos não se dispõe a estudar, ler, praticar, exercitar, enfim, encarar a “novidade” de frente. É aí que acabam ficando estagnados.

    A propósito, o site dessa escola de informática de florianópolis no meu link foi feito por mim em um layout com tabelas que está fora dos padrões. No momento estou refazendo tudo. Quando estiver pronto vou postar aqui tanto o velho como o novo site para análise, observação e críticas.

    Abraço
    E parabéns ao Maurício por tantas contribuições significativas!

  24. Fernando disse:

    Concordo com você maujor.

  25. Alessandro RS disse:

    Ufa, também tomei um susto no começo do post.
    Concordo plenamente. E falo mais uma coisa que não comentaram aqui:
    “Tableless” quer dizer “com menos tabelas”, mas o pessoal entende “sem tabelas”, por isso que dá toda essa confusão. Acho que “Webstandards” soa melhor.

  26. Alex Carvalho disse:

    Olá pessoal, graças a vcs ja me convenci que tabelas ja era…. da web….

    mas não consigo achar um tutorial digno de me ajudar a construir meu site em tabless preciso muito de ajuda pois trabalho com web e gostaria que todos os proximos sites da empresa fosse sem tabelas….

    alguém poderia me indicar um site ou trutorial. que ensina perfeitamente????

    muito obrigado

    Alex Carvalho

    alexcarvalhocp@gmail.com
    alexcarvalho@climatempo.com.br

  27. Luiz Tiago Oliveira disse:

    Perfeito!

    Dados tabulares = Tabelas

    Acho que a dúvida aí está no “less”. Traduzindo a palavra ao pé da letra, esta significa “Menos”, concorda ?
    Não sou professor de inglês, mas vejo que less também é usado para: “SEM”. Como nos casos: wireless(sem fio), bondless(sem osso), etc.

    Então o tableLESS seria “Menos” tabelas e não “Sem” tabelas, concorda?

    Lembrando, também não sou a favor do uso desta palavra.

    Abraços.

  28. Luiz Tiago Oliveira disse:

    Uma pergunta. Por que utilizas o termo Tableless no título do seu site ?

  29. Maujor disse:

    @Luiz Tiago
    Porque assim os mecanismos de busca apresentam meu site para aqueles desavisados que usam este malfadado termo nas suas buscas e aqui encontrarão o verdadeiro significado do termo.

  30. GarotaDPI » Blog Archive » Webdizes disse:

    […] Maujor contra o (termo) Tableless! Leia o artigo. […]

  31. Guilherme disse:

    Depois de trocentos anos, finalmente resolveram falar que o termo “tableless” é péssimo?!?!?

  32. Fabiano Pereira disse:

    Maujor,
    Retorno aqui para elogiá-lo pela iniciativa de “abrir os olhos” de muita gente, o que nem sempre, principalmente baseando-se nos comentários, é possível fazer…
    E também queria parabenizá-lo pelo livro!

    Abraços!

    http://fabianopereiradesigner.blogspot.com

  33. Adriano disse:

    O cara do fórum deveria ter estudado mais antes de falar besteira… Tem tantos artigos na web falando da importância semântica da …

  34. Adriano disse:

    O cara do fórum deveria ter estudado mais antes de falar besteira… Tem tantos artigos na web falando da importância semântica da table…

  35. Joabe disse:

    O que eu acho engraçado nisso tudo é que uns anos atrás eu discuti isso com algumas pessoas, eu disse que o termo “Tableless” era um problema, uma bela maneira de fazer as pessoas entenderem tudo errado achando que é só sumir com as tabelas e tudo fica perfeito. Lamentável saber que ainda existe isso.

    Eu gosto do site tableless.com.br, os caras são feras. Aliás, eles já discutiram isso em alguns posts, o problema é o pessoal preguiçoso que não busca se informar e se limitam a opiniões alheias garimpadas nos fóruns com pessoas mais desinformadas ainda.

    E sabia que tem curso de Tableless?

  36. Mateus disse:

    Discordo plenamente.

    Na minha opinião sites devem sim ser desenvolvidos sem tabelas, digo, a estrutura.

    Mas também discordo com os pensamentos de pessoas que querem abusar do tableless para tentar “desenhar” tabelas utilizando css sendo que para isso existe a tag específica para exibir os dados tabulados.

    Complementando o que o Joel Galdino disse no 11º comentario, que além do ganho de performace, a manutenção do site fica bem menos complicada.

  37. .... disse:

    nao consegui encontrar uma tag table no site do maujor…q engraçado….cade as tables…

  38. RjCorrêa disse:

    Olá Maujor, escrevi no meu blog sobre o lado nocivo do termo Tableless, e fiz uma imagenzinha que acho q pode virar um botão para disseminamos a ideia.

    Vocês acha que vale a pena criar um selo?

    Fiz um (meio roubado do seu).
    Da pra ver no link:
    http://www.rjcorrea.com.br/2008/04/27/fora-tableless/

    Abração.

    Ps: gostaria da opinião de todos.

  39. RjCorrêa disse:

    Depois de vários pedidos não feitos, eis o botão do Fora Tableless:

    http://www.rjcorrea.com.br/images/micro-botao-fora-tableless.gif

    Não tive paciência de esperar a opinião de todos rs

  40. RjCorrêa » Fora Tableless! disse:

    […] Atendendo ao chamado do dinossauro das CSS, Maujor, vou dar minha colaboração contra o termo Tableless (que começou como uma bandeira, hoje não faz mais sentido). […]

  41. Leandro disse:

    A propósito, “tableless” significa “menos tabelas” e não “sem tabelas”, que seria “no tables”. Mas não entendi muito bem a intenção do artigo, enfim, maujor, vc defende que só usemos tabelas em dados tabulares, ou podemos usá-la para o layout do site?

  42. Maujor disse:

    @Leandro
    O último parágrafo do artigo responde tua pergunta.

  43. William disse:

    @Leandro

    acho que nao cara, posso estar enganado pq meu ingles ta meio enferrujado mas pra ser “menos tabelas” seria less table, tableless realmente é “sem tabelas”……. alguem me corrija se estiver errado.

  44. Gilberto Saraiva disse:

    Ressuscitando a discussão:

    @William
    É sim “sem tabelas”

    Mas como o artigo mesmo disse, é impraticável se manter sem tabelas.

  45. MAuro disse:

    Deixa eu ver se eu entendi, usar as divs para a diagramação do site o layout, e as tabelas para dados tabulares tipo um calendário.

    E o termo “tableless” é errado de se dizer o correto seria webstandarts.

    Por favor me respondam, pode parecer ate bobeira para alguns é que sou iniciante mais procuro me aprofundar o maximo possivel.

    Obrigado
    E um abraço pra geral do blog e pro Maujor

  46. William disse:

    @Mauro
    exatamente !

  47. Cuezer disse:

    Meu caro,
    Você é que está equivocado.
    Tableless condena tabelas quando seu uso não é para exibir dados tabulares.

    Antes de condenar algo, tente se informar primeiro.

  48. Sidney disse:

    Conforme prometi no comentário #23, aí está:

    Site com layout em tabelas:
    http://www.ethicalinformatica.com.br/_arquivados/_ethical_ate_22_de_julho_de_2008/

    Site Web Standards
    http://www.ethicalinformatica.com.br/

    Mudanças: CSS validado nos padroes web, semântica correta (talvez nem tudo), acessibilidade para leitores de tela e navegadores de texto, javascript não obstrusivo, AJAX em alguns recursos e etc…

    Dêem uma olhada e se quiserem me enviar algum comentário, no final da página há o e-mail para contato.

    Vlw, abraço.

  49. Sara disse:

    Logo que comecei a ler o post tomei um susto. “Mas tableless não deixou de ser tendência e já se tornou padrão na internet?”, me questionei. Muito bom o esclarecimento que você fez. Sou iniciante e muitas vezes me bati porque achava que deveria usar divs e a tabela cairia bem ali.
    Meio tarde pra comentar, quase 6 meses depois do post publicado, mas o tema ainda me foi útil.
    Até mais!

  50. Carlos disse:

    Sinceramente eu sempre desenvolvi sites usando tableless, nunca fui a favor de usar Tables para construir a estrutura de meus sites. Acho feio e ridículo usar tabelas, e além disso, pessoalmente acho que o código fonte fica mais bagunçado usando tables…

    Bom, então quer dizer o que? Devo abandonar o tableless e fazer sites somente em tabelas!!??

  51. Fabiano Pereira disse:

    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 designers 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, com bons livros, 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!

  52. Trialforce disse:

    Concordo em 100% com o maujor, não misturemos as coisas, as pessoas acabam divulgando erroneamente uma nomenclatura que por uso acaba “parecendo” verdade.

    Viva a TABLE para uso de dados tabulares! (Que redundante! :D )

    Boa semana a todos!!

  53. soh dubom disse:

    Me lembro na epoca em q foi lançado o site Tableless.com.br e tinha postado justamente isso, q seria extremamente mal interpretado … as pessoas iriam achar q utilizar tables estava errado e blah blah blah … a maioria não me entendeu na epoca e ainda hoje insito em dizer q tableless eh uma definiçao muito infeliz! Pior q faz um tempao isso!

  54. rocks-hd disse:

    parabens, belo artigo!

Comentário:






Subscrição de comentários sem comentar

Teclar "Enter" cria um novo parágrafo. Teclar "Shift + Enter" causa uma quebra de linha.

Voltar ao topo

PR Tool


ir topo