Definição de layout por Table versus definição por DIVs

Um dos recursos mais utilizados para concretização dos Wireframes para layout de sites foi, por muito tempo a Table do HTML.

A definição por células da Table é muito flexível, pois a tabela se ajusta às maiores larguras necessárias em cada coluna, e produz um desenho equilibrado em resoluções de vídeo diferentes. Mas no caso de definição de seções de layout para portais, e para atender aos requisitos de visibilidade exigidos até pela força da lei, é desejável e prudente reservar espaço fixo para áreas da tela terem certa visão privilegiada.

Então, para o fim de visão privilegiada, quem melhor se adapta é a DIV. Ela ganhou tanto espaço, que o conhecido framework jQuery se ocupa em muito de achá-la e formatá-la a contento. Além disto, ela tem a utilíssima propriedade de posicionamento absoluto, possibilitando a construção de softwares de desenho para os browsers. Todos estão indo na direção de permitir este posicionamento, e as folhas de estilo padrão CSS3 fornecem, agora, bordas arredondadas, sombras e outras características altamente esperadas por nós programadores.

DIVs em cascata

DIVs podem ser colocadas dentro de DIVs em níveis inimagináveis, mas contenha a sua fome de aninhamento em três níveis, no máximo. Imagine a sucessão de DIVs em um desenho de tabela, pois a tag Table é a que melhor se presta para isto. Se necessário, coloque as DIVs dentro de células. Uma das utilizações deste tipo de disposição é o caso dos gráficos. Cada barrinha do gráfico pode ficar em uma coluna da Table gerada, com o alinhamento vertical (valign) no rodapé (bottom).

Portanto, pense em refazer determinados layouts que estão esquecidos em seus sites.