Tableless: o que é e como funciona

Buenas, galera!

Hoje vamos tratar de um assunto bem legal: tableless, uma técnica de desenvolvimento de layouts muito utilizada hoje em dia.

O que é Tableless?

Tableless nada mais é que uma forma de criar layouts sem utilizar tabelas (daí o porquê do nome), e sim folhas de estilos (CSS). Isso não significa que as tabelas se tornaram inutilizáveis, mas sim que serão usadas apenas quando for necessário (em caso de dados tabulados). O termo tableless é mais utilizado aqui no Brasil, mas em outros países ele foi mais difundido, sendo conhecido também como CSS Layouts.

Originalmente os layouts eram diagramados usando tabelas (<table>) para dividir as seções das páginas e organizar o conteúdo do site. Porém, nessa época os browsers não tinham um padrão a ser seguido, pois a W3C (World Wide Web Consortium), um consórcio internacional onde são desenvolvidos os Web Standards (padrões web), tinha apenas “rascunhos” dos padrões atuais. Com isso, os desenvolvedores encontravam muitas dificuldades para criar um código que funcionasse igualmente em navegadores diferentes, e acabavam focando em apenas um browser específico (tipo aqueles “Melhor visualizado em …”).

Com o passar dos anos, e o aumento de integrantes na Guerra dos Browsers, criar um site que funcione nos principais browsers se tornou um requisito básico e indispensável na área de desenvolvimento web. Não basta apenas ter um layout bonito e bem diagramado, mas também que funcione da mesma maneira em navegadores diferentes. E é aí que entra o tableless.

Como funciona o Tableless?

Um site que utiliza o padrão tableless obrigatoriamente segue as regras de semântica. Ou seja, cada tag seja sua função. Por exemplo, um parágrafo de texto será representado pela tag <p></p>, as tabelas são usadas para dados tabulados, etc.

A grosso modo, trocamos o uso da tag table pela tag div, que pode assumir a forma desejada seguindo as orientações da folha de estilo (CSS). Essa folha de estilo é a grande responsável por toda a diagramação e estrutura do layout, facilitando para o desenvolvedor realizar qualquer alteração futura.

Um rápido estudo de caso para fixar a ideia do tableless:

Depois de várias reuniões e layouts, um grande projeto foi finalizado. Toda a estrutura do site está pronta, todas as inúmeras páginas estão diagramadas. Porém, de última hora, o cliente liga e pede para alterar a cor dos títulos, pois eles deveriam ser da mesma cor da logo.
O designer quase tem um infarto instantâneo, pois se lembra que cada página possui seu estilo no próprio código, e a única saída seria vasculhar documento por documento buscando os benditos títulos que seriam atualizados.

Neste caso, o desenvolvedor criou um grande problema para si mesmo pois criou o layout na forma “primitiva”. Se ele tivesse utilizado a técnica do tableless, bastava alterar apenas uma linha de código na folha de estilos. Agora imaginem se o cliente pedisse para mudar o site inteiro novamente?

Quais as vantagens do Tableless?

• Utilização de folha de estilos: facilita caso haja necessidade de alteração;
• Redução de banda: os navegadores atuais armazenam arquivos CSS e javascript em cache.
• Maior velocidade na renderização da página;
• Maior facilidade para adaptação à dispositivos mobile;
• Apenas uma: requer um grande conhecimento das tags HTML e, principalmente, CSS.

E quais as desvantagens?

• Apenas uma: requer um grande conhecimento das tags HTML e, principalmente, CSS.

Desenvolver seu site através de tabelas não é uma forma errada de fazê-lo. Porém, com o tableless, a facilidade em atualizar a folha de estilos e manter um padrão cross-browser é muito grande, e ainda possibilita ao desenvolvedor utilizar design responsivo, que será o próximo tema a ser comentado.

Até a próxima, pessoal!