Tableless - Padrões Web com Pastel e Caldo de Cana

por Diego Eis Agosto 9th, 2005

O que é Tableless?

A Web foi criada para ser um ambiente onde fosse possível trocar informações livremente, e que essas informações pudessem ser acessadas ao redor do planeta por qualquer pessoa. Em 1994, foi criado o W3C (World Wide Web Consortium): um consórcio internacional, onde são desenvolvidas os padrões para a web (Web Standards) tais como: HTML, CSS, XML, XSLT, entre outros.

Naquela época, no mercado de browsers, as opções ainda eram poucas: consistiam apenas em Lynx, Mozaic e Netscape Navigator, da Netscape Communications, então liderada por James Clark. A Microsoft, de Bill Gates, resolveu entrar nesse mercado lançando o Internet Explorer. A partir daí, o Netscape e o Internet Explorer começaram a travar uma guerra atrás de adpetos. A concorrência entre os dois browsers é chamada até hoje de Guerra dos Browsers. Durante essa “guerra”, os padrões do W3C ainda eram meros rascunhos. Por conta disso, as duas empresas que não podiam esperar que esses rascunhos ficassem prontos começaram a lançar seus browsers com padrões proprietários.

Agora o impasse: Os browsers tinham seus próprios padrões… Já os desenvolvedores não conseguiam criar um único código que funcionasse nos dois navegadores. Por este motivo, eles eram obrigados a desenvolver, na maioria das vezes, para apenas um browser.
Isso trouxe mais um problema, agora para os usuários. O usuário que usava Netscape, não conseguia acessar sites que eram feitos para Internet Explorer, e vice-versa.

Como a web não tinha sido projetada para desenvolver os criativos ambientes gráficos que temos atualmente, naturalmente, os recursos de desenvolvimento eram limitados e os criadores faziam das tripas coração para criar seus sites. Entre as muitas idéias que surgiram para ultrapassar ao ambiente de “apenas texto” da internet, estava aquela de utilizar tabelas de HTML para posicionar os elementos no layout, utilizando slices de imagem, gifs transparentes e a técnica de aninhamento de tabelas para contornar os problemas que os padrões proprietários traziam. A esse tipo de técnica, que foi usadapela maior parte dos websites, chamamos de layout com tabelas.

Os sites que seguem os Padrões Web utilizam uma metodologia de desenvolvimento baseado em 3 camadas, são elas:

  1. Informação - A informação do site é exibida utilizando código XHTML ou HTML.
  2. Formatação - O XHTML que exibe a informação é formatada com CSS (Folhas de Estilo). É com CSS que comandamos todo o visual do site. Tudo que é visual e decorativo deve ser feito por CSS.
  3. Comportamento - Definida por Javascript e AJAX. É a camada que define como os elementos irão se comportar de acordo com as ações do usuário.

Em poucas palavras: um site tableless é um site que não utiliza tables para a estruturação do Layout. É um site que segue os Padrões Web.
O termo “tableless” é usado mais largamente aqui no Brasil. Em outros países outros foram mais difundidos, por exemplo: CSS Layouts.

Um site tabeless segue obrigatoriamente regras de semântica. Cada tag tem sua função própria. Por exemplo, para criar um parágrafo de texto, usamos a tag <p></p>. A tag Table e suas filhas são utilizados para exibir dados tabulados, por exemplo, uma listagem de produtos, onde são mostrados algumas informações sobre o produto como tamanho, preço, cor, material, disponibilidade, etc…

Tênis Cor Tamanho Preço Disponibilidade
Nike Preto 38-39 R$ 100,00 Em Estoque
Adidas Branco 40-41 R$ 120,00 Esgotado

Formatar informações dos sites não é algo novo. Por volta de 1970, no começo da tragetória do SGML, vários browsers já personalizavam as aparências dos documentos, cada um com seu estilo próprio.

Håkon Wium Lie, estudava e percebia as dificuldades que se tinham ao desenvolver um site, e resolveu criar uma maneira fácil para formatar a informação do HTML. Foi aí que ele propôs a criação do CSS ou Cascading Style Sheets. Esse era o ano de 1994.

Em 1995 eles apresentaram sua proposta e finalmente, o W3C - World Wide Web Consortium - que estava acabando de nascer, se interessou pelo projeto e resolveu criar uma equipe, obviamente liderada por Håkon e Bert Bos. O resultado apareceu logo, em 1996, eles lançaram a recomendação oficial pelo W3C do CSS Level 1 (CSS 1).

Dois anos depois, no dia 12 de Maio de 1998, eles lançaram a recomendação do CSS de nível 2. A segunda versão das Folhas de Estilo para web.

Hoje em dia, o nível de compatibilidade entre os browsers é muito parecido, de forma que se você implementar algo específico em um browser, é muito provável que em outro browser esteja igual.

Portanto, o desenvolvedor pode ficar tranqüilo quanto a maioria dos problemas causados por diferenças entre browsers.

Se ainda estiver interessado, leia também:

11 Comentários

Alexandre Gomes Gaigalas

Só uma coisinha besta. Mosaic é com s. Erro de digitação imagino.

Um link interessante, e simples pra explicar por que "tabelas são estúpidas":

http://www.plasmadesign.com.br/stupidtables/

Francisco dos Santos

Como tudo está em constante evolução. No início, usar tabelas foi uma solução encontrada para contornar as limitações de layout no HMTL.

Mas o tempo passou e surgiram novas idéias (web standards) para facilitar o trabalho do web designer.

Usar tabelas não é ruim, apenas está fora do contexto atual.

Sendo assim… Tableless neles…

Bruno Mikoski

o Diego, o que tu ta esperando do novo dreamweaver? e o "editor visual de css"? Tem como esperar algo realmente bom? Ou sera que a macromidia vai trancar ele no ie =[
Apesar que sempre teve suporte "multibrowser"
Seria legal se vc fize-se uma analize ai, sobre o novo Dreamweaver em cima de Tableless

Diego Eis

Vou ver o que posso fazer Bruno!
Mas até agora estou ouvindo só bem dele.
Tem que esperar para ver.

M&#225;rcia O. Carmo

Muito bom o texto!
Quanto mais textos "estimulantes" desse tipo, melhor.

Ah, adorei o link do "por que tabelas são estúpidas"! Muito bem ilustrado. É o tipo de coisa que o chefe lê, pelo menos um pouco mais que os outros textos. Eles "nunca têm tempo pra isso."

=)

Poiseh Diego, novidades sobre o Studio 8!!! Só sei o que li no site da Macromedia :(

Henrique Costa Pereira

Ahhhhhh… Editor visual de CSS é brabo! Na minha opinião tudo que é customizado em termos de XHTML e CSS possa ser perfeito. Isso nem faz sentido pra mim….

RONI

Existe algum editor WYSIWYG

Guigo

Realmente as tabelas ajudaram muito no seu tempo , após ter feito um curso de desenvolvimento de sistemas web , eu conheci o método tableless junto ao web standards e farei novos cursos relacionados inclusive na vision , é muito bom e vejo poucos profissionais utilizando tais termos de criação web , gostei Diego Eis ..

abraço

O que é Tableless ? em r3, Padrões Web para Todos!

[…] O que é Tableless? (www.tableless.com.br) […]

[Duvida|Site] Como fazer em tabela? - eXperience Zone - A XP que faltava pra subir de level!

[…] tabelas… Hoje em dia j existe CSS, que tal comear com tableless? Recomendo os seguintes links: Tableless O que Tableless? Tableless O Caminho Suave para o Tableless []’s __________________ Meus websites: GHSehn, Blog […]

Voltar para o topo

Histórico