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…

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.

Fonte: Tableless

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.

Fonte: iMasters, Igor Escobar