May312006

O vício dos divs

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!

4 respostas para “O vício dos divs”

  • Yogourt

    Yogourt - 1/06/06 às 9:40 am

    A mistura dos dois estilos de construção, com e sem tabelas, seria a solução? Já construi sítios totalmente em tableless e realmente o códifo CSS é chatinho. Porém o HTML fica maravilhosamente simples! E acho que usei larguras e alturas variáveis sem tabela…

  • ramonpage

    ramonpage - 1/06/06 às 10:04 am

    Sim! Mesmo reduzindo a utilização das tabelas, elas não devem morrer. Perceba que neste tópico aponto para a solução na criação de dados tabulares.

    Qual a razão de quebrar a cabeça na criação de pseudo-tabelas, usando apenas divs e CSS, para inserir uma lista de produtos por exemplo, sendo que as tabelas existem para isso?

    É neste ponto que o uso dos divs pode ser vicioso. Dados tabulares podem e devem ser inseridos em tabelas!

    Não há dúvidas que para uma melhor marcação XHTML não se deve usar tabelas, mas não é por esse motivo que elas nunca devem ser usadas.

  • warez-vip

    warez-vip - 21/06/06 às 1:22 pm

    He sits at his chair, one of those faggy ball chairs, crosses his legs and turns toward his Macintosh. “Come, lovely. Let me show you how to open an email.”

  • ramonpage

    ramonpage - 21/06/06 às 2:29 pm

    @Warrez-vip: I’m sorry, but i don’t understand your intentions.

    Any comment that does not reffer with the article can be considered spam and consequently deleted.

Poste um comentário




Você pode utilizar as seguintes tags para formatação: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Oscomentários

Comentários diversos dos visitantes

Sylvestre disse:

Ramon, Te passei um e-mail cara! Responde ae. Abraço, Sylvestre....

Thalis Valle disse:

Parabéns pelos artigos, sempre ótimos. Abraços...

Lázaro D. Menezes disse:

Muito bom mesmo. Usei em meu site. /** * FORM GRID * * DICA DE ramonpage.com */...

junior disse:

Site clean com certeza é mais complicado de montar do q sites com partes graficas mais agressivas. A diferença entre o clean e o simples d+ é só um p...

Demétrios disse:

Gostei muito do seu post sobre espaço em branco, encontrei seu site a procura de um post como este, tenho um patrão que tudo pra ele tem que ser grand...

Quemsou

Uma prévia de quem é RamonPage

Avatar RamonPageMeu nome é Ramon Bispo. Sou web developer/ designer e natural do Rio de Janeiro, Brasil. Saiba mais sobre mim…