menu-inline

Table e Tableless, quais as diferenças?

Não é raro encontrarmos layouts formulados em tabelas, ou ainda layouts que misturam table e tableless. Mas afinal, qual a diferença e quando usar cada um?
HTML

Vamos a uma breve explicação sobre essas duas técnicas:

Table/tabelas.

Técnica criada para apresentar dados tabulares, que passou a ser usada na estruturação de layouts.

Código básico de uma tabela:
Créditos: 10calco.blogspot.com
<table>
  <tr>
    <td>Célula 1</td>
    <td>Célula 2</td>
  </tr>
  <tr>
    <td>Célula 3</td>
    <td>Célula 4</td>
  </tr>
</table>
E como seria visto no navegador:

Célula 1 Célula 2
Célula 3 Célula 4


Com a evolução do HTML e a individualidade dos browsers em interpretar os códigos, foram necessárias algumas mudanças na forma de estruturar layouts.

Tableless/"sem tabelas".

Consiste em dar maior semântica ao uso das tags HTML na construção de layouts. Uma das características do tableless é o fato de trabalhar com a linguagem de marcação (ex: HTML) separada da linguagem de estilo (CSS), o que permite maior controle e facilidade na hora de fazer alterações nos códigos.

Código básico em tableless:
<div id='menu'>
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
  </ul>
</div>
E como seria visto no navegador:
Créditos: 10calco.blogspot.com

»Conclusão.

Table já foi a principal ferramenta para criação de layouts, e ainda é muito defendida e utilizada por parte dos usuários. Porém após a criação do Web standards, juntamente com o Tableless e o CSS podemos criar layouts com maior acessibilidade, semântica e facilidade na sua manutenção.
Isso não quer dizer fim ao table, ou condenar sua utilização, mas sim fazer uso racional dessas técnicas, utilizando cada uma para seu devido fim.

Para finalizar deixo aqui um link muito interessante do blog Revolução Etc, de Henrique C. Pereira sobre Introdução a Semântica.

Comentários 1 Comentário

audiencia da tv disse...

muito bom o blog otima dica
estou te seguindo ta
se quiser me seguir agradeço
tenha um bom dia
http://cleberbinhocomportamentos.blogspot.com/