TABLELESS TABLE: A tabela sem tabela

O Movimento tableLess é o movimento que idealizou o conceito de que não se desenha um site usando tabelas ("<table></table>"). O fato de não se usar as tags "table" no documento HTML implica em ganho muito grande de desenvolvimento já que usa-se menos tags para exibir o mesmo conteúdo em tela. Eu li uma citação, (pena não lembrar a citação), que o problema da tabela não fica apenas na despadronização do tratamento dado a ela pelos diferentes browsers, "esta também associado ao excesso de nodos e extruturas que a tag utiliza".

O TESTE

Fiz certa vez um teste onde uma grid de dados (lembra o excell, com cabeçalho, celulas, e scrollbar vertical para movientar o conteúdo para cima e para baixo), receberia 500 registros. Eu comparei o desempenho desta minha grid com a ActiveWidgets (você encontra facil se procurar no google), que foi desenvolvida com "table". A grid foi superiormente eficaz ao ActiveWidgets: manipulava em aproximadamente a metada do tempo da AW. Isso verificando levando em consideração: tempo/velocidade em que demorou para ler o conteúdo, tempo para trabalhar com as scrollbars, capacidade de dados...

A EXPLICAÇÂO e o CODIGO

Bem a técnica que utilizei foi simples: CSS! O código CSS abaixo foi o segredo da aplicação. Com ele eu conseguia desenhar tabelas sem a necessidade de usar
a tag TABLE. Usei em seu lugar as tags: DIV, para representar o corpo da tabela; UL, as linhas; LI, as colunas. Precisei implementar uma "gambiarra" pro caso da linha ter altura maior que o valor padrão: usei a tag UL com o atributo "expand" associado a ele. Ex: "<ul class="'expand'">".

Infelizmente a microsoft não segue o padrão W3C e o código abaixo não funciona adequadamente no Internet Explorer. Conta rumores de que a nova versão do Internet Explorer (IE7) adote algumas medidas para ser mais compatível, mas nada comprovado.


/* =========================================
* CSS by Miere Teixeira
* E-mail: miere00@gmail.com
* License: BSD
* ========================================= */

.table {
display: block;
clear: both;
padding: 0px;
padding-top: 5px;
}

.table ul {
display: block;
width: 95%;
height: 20px;
margin: 0px;
margin-bottom: 1px;
padding: 0px;
padding-left: 10px;
overflow: hidden;
}

.table ul li {
display: table-cell;
height: 20px;
padding: 0px;
list-style: none;
}

.table ul.expand {
overflow: visible;
height: auto;
}