continue reading hover preload topbar hover preload widget hover preload

Use tabelas!

Outro dia vi no twitter o Pedro Rogério (@pinceladasdaweb), referência em html5 e webstandarts, criticar a montagem do html do orkut todo em div. Ele tava com razão.
Coincidentemente, na mesma semana, na empresa onde eu trabalho, estavamos discutindo sobre usar div ou table em um trecho do sistema onde há uma listagem de ítens cadastrados em forma de tabela. Também optei por não usar div naquela situação. Vejamos porquê:

A tag DIV significa divisão de texto, uma seção de texto ou conteúdo. Ela (sempre) deve ser usada para a montagem geral do layout do seu site. Neste caso não deve-se utilizar tabelas – pelo amor de deus – como se usava antigamente.
Apesar da abolição da tag TABLE para a montagem geral dos sites (tableless), esta tag ainda existe e deve ser usado para dados tabulados, dados que normalmente se apresentariam em forma de tabela mesmo. Ela apresenta uma vantagem semântica e de implementação, inclusive, quando empregada no uso correto.
No meu caso, como se tratavam de listagem de ítens, poderia usar a tag UL em caso de amostragem do nome do ítem ou com TABLE quando é apresentado de forma de uma tabela.

Uma boa tabela deve ter:

  1. Sumário: O atributo summary especifíca um resumo do conteúdo da tabela
  2. Caption quando necessário: A tag caption pode ser usada quando deseja imprimir o título da tabela
  3. thead, tfoot e tbody quando necessário: A tag thead engloba as linhas pertencem ao cabeçalho, tbody ao corpo e tfoot ao rodapé. o não uso fará que todas as linhas sejam do corpo da tabela
  4. Uso correto de th e td: td define uma célula comum e th uma célula de título, normalmente usada no cabeçalho da tabela

Exemplo de uso destas recomendações:

<table summary="Lista de compras">
  <caption>Compras</caption>
  <thead>
    <tr>
      <th>Quantidade</th>
      <th>Unidade</th>
      <th>Produto</th>
      <th>Preço</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>5</td>
      <td>Und</td>
      <td>Peras</td>
      <td>0,00</td>
    </tr>
    <tr>
      <td>5</td>
      <td>Kg</td>
      <td>Arroz</td>
      <td>0,00</td>
    </tr>
    <tr>
      <td>7</td>
      <td>Fls</td>
      <td>Alface</td>
      <td>0,00</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th colspan="3">Total:</th>
      <td>0,00</td>
    </tr>
</table>

Categorias: htmlPublicado em: 30 de novembro de 2009 por: leandro
Responder
  • 3 respostas para "Use tabelas!"

  • Respondido em 30 de novembro de 2009 @ 7:51 Pedro Rogério

    Bem, acho que eu não me expressei muito bem lá no Twitter, mas vamos lá. O que eu queria passar para as pessoas é evitar o uso excessivo de Divs onde simplesmente uma div daria conta do recado. Por exemplo a listagem de amigos do Orkut, eles utilizam uma carga excessiva de divs, poderiam simplesmente utilizar ul li para listar os itens. Mais vai entender a cabeça deles não?

  • Deixe sua resposta:


    Campos obrigatórios com *