Fiz uma pesquisa por tableless no fórum e não há nada, por isso, cá vem um post sobre isso
Este tutorial será dividido em 2 partes, uma teórica, em que se explica o que é tableless, o que significa, para que serve, etc... e outra parte prática, em que se explica como se faz
NOTA: Este tutorial não é meu de raiz. Informei-me em sites, fiz copy paste das partes que interessam. Como sou respeitador do OpenSource, deixo os créditos para quem os fez, após cada texto
PARTE 1 - TeoriaPara que entendamos o que realmente é "Tableless", precisamos voltar um pouco ao passado.
Imagine se cada eletrodoméstico usasse um tipo de tomada. E ao comprar um novo eletrodoméstico, você tivesse que adaptar uma tomada nova em sua casa. Imaginou o caos que seria? Felizmente existe um PADRÃO de tomadas para todos os aparelhos domésticos. Se comprarmos um aparelho de som, e então levarmos para outra cidade, estado ou país, a tomada será a mesma e seu aparelho funcionará. Percebemos então o verdadeiro valor dos padrões. Na Web não é diferente, também é necessário haver padrões. Por isso que projetos como WaSP (Web Standards Project) surgiram no auge da desordem no desenvolvimento do sites. Eles foram um dos que impulsionaram a popularização dos Web Standards, fazendo a W3C (World Wide Web Consortium) ser conhecida por todos como uma autoridade e então ajudando-a a cumprir com seu papel.
O W3C criou linguagens básicas de publicação de conteúdo para Web. Essas linguagens são chamadas de Web Standards (Padrões Web). HTML, XHTML, CSS, SVG, XML, XSLT, entre vários outros.
Esses padrões hoje são estudados e felizmente os desenvolvedores estão aplicando em seus sites. Os desenvolvedores devem perceberem as incríveis vantagens que o desenvolvimento com os Padrões oferece, não só para a execução do trabalho, mas para a estruturação da web em si. Para a estruturação da Web do futuro, onde ninguém terá que garimpar em buscadores para conseguir a informação que se precisa, mas a informação estará aonde você estiver, andará com você aonde quer que for, e você terá acesso a ela sem barreiras, na hora que quiser, onde quiser, e usando o dispositivo que for.
O que é tableless e como funciona essa metodologia?Primeiramente é necessário que entendamos um pouco do conceito dos Web Standards. A idéia original da Web, era que existisse um ambiente onde pessoas conseguissem trocar informações livremente, e que essas informações poderiam ser acessadas de diversos dispositivos. O W3C (World Wide Web Consortium) criou as linguagens básicas de publicação de conteúdo para Web, como por exemplo: HTML, CSS, SVG, XML, entre vários outros. Essas linguagens são chamadas de Web Standards (Padrões Web).
Por este tempo, deu-se início a Guerra dos Browsers. Onde o Internet Explorer e o Netscape travavam uma briga para conseguir mais adeptos. Durante essa guerra, as linguagens do W3C eram ainda rascunhos. Então, os browsers não tinham um guia completo para se basearem e lançarem seus browsers com suporte a esses Padrões. Resultou que os fabricantes de browsers criaram seus próprios padrões. E foi aí que problema começou a crescer para o lado dos desenvolvedores e usuários. De um lado estava o desenvolvedor estudando as diferenças de cada browser, para assim poder escolher qual ele iria priorizar e qual ele iria ignorar. Do outro usuário, com o mesmo dilema. Se ele escolhesse “tal” browser, os sites que ele visitara poderiam não funcionar.
Os usuários que tinham algum tipo de deficiência, como por exemplo auditiva ou visual, ficaram praticamente isolados do mundo digital, já que os desenvolvedores web tiveram que se adaptar a um certo tipo de browser, obedecendo suas peculiaridades.
Durante essa época, desenvolver um site era um trabalho árduo levando os desenvolvedores escolherem apenas um browser e desenvolver apenas para esse browser. Era quase que insuportável tenta desenvolver um site que se adequasse às duas plataformas de browsers. Os trabalho de atualizar ou fazer manutenções eram enormes e despendiam de muito tempo e paciência.
Foi por esse período que surgiram projetos como o WaSP (Web Standards Project), que é um movimento para difundir os Web Standards. Esse grupo teve um papel muito importante na divulgação dos Padrões. Eles conversaram com os fabricantes dos principais browsers, convencendo- os de fazerem browsers mais compatíveis com os Padrões. E isso deu certo… Tanto que temos o Opera, Mozilla, e vários outros por aí. Hoje, o desenvolvedor tem mais liberdade de desenvolvimento do que a 5 anos atrás. Hoje, a visão dos fabricantes de browser mudou completamente, e se continuar assim, teremos uma web melhor em muito pouco tempo.
Sabendo disso, podemos agora entender o que é Tableless. Comecemos pelo nome. O nome Tableless é um nome mais “publicitário” para se referir a sites que seguem os Padrões. Os sites Tableless não são construídos usando as famigeradas tables. Elas usam XHTML para apresentar a informação e as Folhas de Estilo (CSS) para formatar essa informação. Pelo motivo de as tables não serem usadas para a estruturação, essa metodologia se chama Tableless.
Antes que você pense que as tables foram totalmente apagadas do mapa, eu explico: No movimento Web Standards, cada tag tem a sua função. Se você quer fazer um parágrafo, usa-se a tag P. Se quer fazer um título de primeiro nível, usa-se a tag H1. Se você quer exibir dados tabulados, como por exemplo um calendário, ou ainda uma lista de produtos seguidos de nome, preço e tamanho, você usará as tables para exibir esses dados.
Qual é a grande diferença entre um site tradicional para os que são feitos com Web Standards?Essa pergunta é muito difícil de ser respondida porque as diferenças entre um método e outro são gritantes. Essas diferenças afetam todas as pessoas envolvidas no projeto: começando na equipe de desenvolvimento. Aquela briga tradicional entre designer e programador acaba. Eles começam a trabalhar juntos no mesmo projeto, sem um atrapalhar o trabalho do outro. O designer trabalhará sem tocar no código de programação, ficará apenas no código CSS, onde o programador não terá como estragar o layout do Designer. E dessa forma, com os dois trabalhando ao mesmo tempo, no mesmo projeto, o tempo de produção será diminuída. Inclui os donos do negócio, já que há diversas economias no desenvolvimento do projeto e também em manutenções posteriores, bem como consumo de banda que é tão preciosa hoje em dia. E finalizando no usuário, que agora pode acessar o site usando a plataforma e o browser que preferir. Poderá acessar de seu Mac ou do seu Linux, usando Opera ou Konqueror. Ele terá controle.
No que diz respeito ao uso da metodologia tableless, quais são as principais vantagens com relação a atualizações de design?Assunto interessantíssimo. Suponhamos a seguinte situação: Final daquele grande projeto. Cliente grande, site gigantesco. Várias aprovações de layout durante o caminho. Tudo acertado e pronto para ir pro ar. Faltando apenas alguns detalhes, o chefe chama o designer em um canto e diz: - O cliente acabou de ligar; ele estava analisando o site e pediu que todos os títulos mudassem de cor. Ele não gostou do azul, gostaria de verde mesmo. O designer, com um olhar de desgosto, volta para sua cadeira e fica pensando em apenas uma coisa: - Por onde vou começar? Ele fez o site em um editor visual, os títulos do site estão sendo formatados nos próprios documentos, direto no código. A única saída seria abrir documento por documento e substituir título por título.
Creio que se isso não aconteceu com você, algo parecido deve ter acontecido. Se o site acima tivesse sido feito seguindo os padrões, usando CSS para sua formatação, e o código fosse um XHTML bem Semântico, o trabalho disso seria quase nulo. O designer (ou o responsável pelo código CSS) mudaria apenas uma linha.
E se, o caso não fosse para mudar apenas um título, mas mudar o layout do site, como faria? Se o site foi feito do jeito convencional, provavelmente seria da seguinte forma: O designer faria um novo layout em algum programa de imagem, implementaria este layout passando para HTML, e o programador teria que programar novamente em cima deste novo layout. Mas, se o site foi feito seguindo os Web Standards, bastava o designer escrever outro arquivo CSS, e depois de pronto, substituir os arquivos.
Despenderia de tempo apenas de uma pessoa. A programação não seria afetada, e o todo o site funcionaria perfeitamente, já que foi apenas o arquivo de formatação que foi substituído. Passe um pouco de tempo visitando o site: CSS Zen Garden. Esse layout mostra como isso funciona. O criador deste site disponibilizou o arquivo HTML para download. Os interessados baixam esse arquivo, e fazem um CSS em cima dele e depois mandam enviam de volta. Os interessados tem apenas o direito de criar um CSS e se quiser usar imagens para compor o layout, eles não podem mudar o código HTML que o criador do site disponibilizou.
Há uma infinidade de layouts, bonitos, funcionais e compatíveis… Mudando apenas UM arquivo. Facilidade de manutenção ou renovação de layout, economia de tempo, trabalho e paciência.
in WikiPédia PTPARTE 2 - PráticaIntroduçãoHTML é uma linguagem estrutural, ou seja, é - ou deveria ser - usada para estruturar textos através de tags. A tag table deveria ser usada tão somente com a finalidade de apresentar dados dentro de uma tabela com linhas e colunas.
Mas desde que as tabelas foram implementadas no HTML elas tem sido amplamente usadas para montagem de layouts e muito comumente para compartimentar uma página web em colunas. Ao fato de que este uso das tabelas contraria sua finalidade (seu propósito semântico) soma-se ainda várias outras desvantagens, entre elas notadamente a dificuldade de um parseamento adequado na renderização das tabelas em determinados contextos (usuários com necessidades especiais, agentes de usuários com restrições,....).
Este documento descreve uma maneira de criar um layout de 3 colunas e oferece links para outras páginas que mostram técnicas de criação de layout.
Descrição do layoutA técnica descrita a seguir foi usada para construir a página para novos usuários do W3C e permite criar um layout de 3 colunas com as seguintes características:
* Os textos da coluna central são escritos no início do código da página o que significa "aparecer" no topo da área de visualização, quando a página é renderizada em um browser sem suporte ou com CSS desabilitada
* seguem-se as colunas esquerda e direita, nesta ordem
Isto é ideal para Home Pages já que dispõe o texto no centro e as listas de links (menus de navegação) nas laterais.
Uma restrição para este tipo de layout é que ele não funciona bem em agentes de usuário com suporte precário para CSS, contudo a página permanece perfeitamente legível em um tradicional layout vertical.
Esta página que você está lendo usa este tipo de layout e assim você pode ter uma idéia de como é o layout.
Implementação
Este layout usa posicionamento CSS absoluto . Definimos 3 divisões (DIVs) no HTML da página <div id="main">, <div id="list1" class="link-list">, <div id="list2" class="link-list">, e aplicamos as seguintes regras CSS a elas:
/* Propriedades comuns às duas colunas laterais de links */
div.link-list {
width:10.2em;
position:absolute;
top:0;
font-size:80%;
padding-left:1%;
padding-right:1%;
margin-left:0;
margin-right:0;
}
/* usamos a propriedade margin para abrir espaços para as colunas laterais */
#main {
margin-left:10.2em;
margin-right:10.2em;
padding-left:1em;
padding-right:1em;
}
/* e aqui colocamos as colunas laterais no lugar */
#list1 {
left:0;
}
#list2 {
right:0;
}
O fundamento básico consiste em "abrir" espaços nas duas laterais da coluna central div#main usando as propriedades margin-left e margin-right e a seguir posicionar cada uma das colunas laterais usando position:absolute, uma no canto superior esquerdo e a outra no canto superior direito através da definição das suas coordenadas (0,0).
Com a finalidade de "esconder" a folha de estilos de browsers com suporte precário ou mesmo sem suporte para CSS usamos a diretiva <style type="text/css">@import url('your-stylesheet-url');</style> para nossa folha de estilos.
in W3C (traduzido PT BR)Espero que seja do vosso agrado
Autor