Tableless em inglês significa “ausência de tabelas”, ou seja, o site é construído totalmente sem tabelas, somente com divisões, as famosas <div></div>.

Veja abaixo como ficaria a troca de uma tabela por uma div.

Tabela:

<table>
<tr>
<td>Conteúdo da Tabela</td>
</tr>
</table>

Divisões:

<div>Conteúdo da Tabela</div>

No código da tabela temos 51 caracteres, já no código em div temos apenas 29, quase metade. Isso em um site grande traz ótimos benefícios, como redução do tamanho dos arquivos, agilidade no carregamento do site e menor consumo de banda.

Outro fator super importante num site em Tableless, é a possibilidade de mudar inteiramente o layout de todo um site, modificando apenas um arquivo, o arquivo de estilos (CSS).

Como funciona? Depois de estruturarmos nosso arquivo com as divs, atribuímos uma identificação para cada parte do site, através do atributo id ou class. Vamos supor que a div criada acima tenha o id=”conteudo”, basta então criarmos um arquivo estilo.css com o seguinte código:

#conteudo { background-color:blue; }

Com isso o fundo de nossa div fica azul, sem modificar uma linha do arquivo onde está estruturado o site. Esse exemplo de background é apenas um dos muitos que existem. Podemos modificar tamanho, cor, borda, margem, fonte, imagem e dezenas de outras funções para definirmos o layout de nosso site. Tais atributos também podem ser aplicados a diversos outros elementos, como <p>, <ul>, <img>, <a>, etc.

Outro benefício dos sites em Tableless é a leitura deles pelos robôs de busca (Google, Yahoo, MSN, etc). Como esses robôs varrem os sites desabilitando o estilo, o site fica muito mais atrativo e organizado, tornando assim muito mais fácil a indexação de seu conteúdo, e consequentemente, uma melhor colocação nos resultados das buscas.

Mais pra frente falarei de outras funções para se construir um site em Tableless.

Ah lembrando que eu aprendi Tableless fazendo o Curso da Visie, com o Professor Diego Eis. Vale a pena entrar no site dele pois tem um conteúdo muito bom para quem deseja aprender mais sobre tableless www.tableless.com.br