Para quem está iniciando no mundo do tableless, nada melhor do que pensar nos seus layouts completamente sem tabelas. Mas isso pode se tornar um vício, e um recurso que pode e deve ser utilizado em XHTML acaba entrando no esquecimento.

Pensando nisso, um dos meus últimos projetos foi efetuado completamente sem tabelas (até para textos tabulados). O resultado foi interessante, mas ainda assim não foi possível chegar à todos os recursos (como larguras flexíveis) que as tabelas proporcionam. Caso eu fosse tentar me aventurar nisso, com certeza perderia um pouco de tempo, em vão.

Darei um exemplo. Ele funciona bem no IE, Opera e Firefox (ou firer0x, apelido carinhoso).

O código

Definindo as colunas e células da nossa “tabela”.

Definindo o título:

1. <div class="row-order">
2. <div class="col-title-1">Código</div>
3. <div class="col-title-2">Produto</div>
4. <div class="col-title-3">Quantidade</div>
5. </div>

Definindo o conteúdo:

1. <div class="row-order">
2. <div class="col-1">102</div>
3. <div class="col-2">Arroz</div>
4. <div class="col-3">1kg</div>
5. </div>

Definindo o CSS:

1. #content .row-order {
2. width: 500px;
3. background: #fff;
4. margin: 0;
5. border-bottom: 1px dotted #c7c7c7;
6. }
7. /**/
8. #content .row-order .col-title-1 { /* Título tabela - primeira coluna */
9. display: table-cell;
10. margin: 0;
11. padding: 10px;
12. width: 60px;
13. background: #f1f1f1;
14. font-weight: bold;
15. color: #0678b3;
16. border-left: 1px solid #fff;
17. }
18. /**/
19. * html #content .row-order .col-title-1 { /* Título tabela - primeira coluna (hack IE) */
20. display: list-item;
21. float: left;
22. }
23. /**/
24. #content .row-order .col-1 { /* Conteúdo tabela - primeira coluna */
25. display: table-cell;
26. margin: 0;
27. padding: 10px;
28. width: 60px;
29. border-left: 1px solid #fff;
30. }
31. /**/
32. * html #content .row-order .col-1 { /* Conteúdo tabela - primeira coluna (hack IE) */
33. display: list-item;
34. float: left;
35. }
36. /**/
37. /* E assim sucessivamente até chegar até a terceira coluna respeitando o tamanho total de 500px para cada célula da tabela. Ou seja: com três colunas, divida os 500px em três como desejar.*/

Esta técnica dá certo, porém vejam o trabalho para a construção de toda a marcação, além do inconveniente do uso dos hacks para IE. Todas as colunas posteriores à primeira precisarão de ajustes via hack para ficarem com seu tamanho similar ao apresentado em outros browsers.

A solução

Na realidade não é bem uma solução, já que, ao meu ver, deve ser a forma correta de marcação. Fica como uma conscientização, então. Lá vai:

1. <table>
2. <caption>Minha tabela de produtos</caption>
3. <thead>
4. <tr>
5. <th>Código</th>
6. <th>Produto</th>
7. <th>Quantidade</th>
8. </tr>
9. </thead>
10. <tbody>
11. <tr>
12. <td>102</td>
13. <td>Arroz</td>
14. <td>1kg</td>
15. </tr>
16. </tbody>
17. </table>

Para este trabalho, uma simples tabela de três colunas resolveria o problema. E melhor: sem grandes truques de CSS. Tabelas servem para isso! Use-as para isso!