18

Eu fiz uma tabela de dados para um colega meu aqui no trabalho e usei uma table, só que ela não tinha cabeçalho, ela tinha somente 2 colunas. E ele me falou que o pessoal odeia table, que era para mim ler sobre Tableless, e eu fiz isso, mas eu não consigo entender o porque é "feio" ou não adequado usar table.

Exemplo da tabela que eu fiz foi algo mais ou menos assim:

Nome:                            João
Banco:                      Santander
QualquerCoisa:                   XXXX
Saldo:                         345,00 <-- em negrito

No caso, a minha ideia é que é sim uma tabela, mas em vez de os títulos estarem em cima eles estão do lado esquerdo.

-Edit- O que quero dizer é, o que seria o mais correto de usar nesse caso? É errado fazer uma tabela nesse caso já que no fim ela não aparenta ser uma tabela(com bordas, títulos e etc)?

4
  • 3
    A questão do tableless é mais em relação ao layout da página. Se você for olhar o código-fonte de sites que utilizam table, você verá que o site é uma grande tabela, onde o cabeçalho, corpo e rodapé são tr e cada coluna é um td. Agora, para exibição de dados, eu não vejo problema
    – Lucas
    15/04/2015 às 13:55
  • 2
    @Lucas na verdade tabelas foram criadas para serem usadas em dados tabulares, então não é o caso de "não ter problema" mas sim que o correto é ser usado. 15/04/2015 às 13:57
  • O único problema com as tabelas são os dispositivos móveis. Se o site não é responsivo, não há problema em usar tabelas. Mesmo assim, existem meios de tornar tabelas responsivas. bootsnipp.com/snippets/featured/… getbootstrap.com/css/#tables 15/04/2015 às 14:01
  • 3
    A pergunta não é nada subjetiva. Usar ou não tabelas depende do problema. Para dados tabulares, tabelas são melhores. Para listas responsivas, tableless é a única opção. E, embora ambas sejam usadas para layout de websites, as tabelas apresentam uma séria de desvantagens. Não é porque dá para fazer de mais de um jeito que é baseado em opiniões.
    – utluiz
    15/04/2015 às 14:41

4 Respostas 4

22

Quem quer que te tenha dito para nesse caso não fazeres uso de uma tabela deveria ler sobre tableless porque aparentemente não percebe nada do assunto.

Tableless

Tableless web design (ou tableless layout de web) é uma filosofia de design web evitando o uso de tabelas HTML para fins de controlo do layout da página.

Ao invés de tabelas HTML, recorre-se ao uso de folhas de estilo (CSS) para organizar os elementos e texto numa página web.

tableless aplica-se a layout

Tableless surgiu quando via CSS começou a ser possível formatar uma página de forma eficiente sem necessidade de recorrer a tabelas para a criação do aspeto gráfico da mesma.

À alguns anos atrás fazia-se o layout da seguinte forma:

<center>
  <table border="0" width="500" cellspacing="0" cellpadding="0">
    <tbody>
      <tr>
        <td align="left" width="500" valign="top">
          <table border="0" width="500" cellspacing="0" cellpadding="0">
            <tbody>
              <tr>
                <td align="left" width="160" valign="top">Coluna esquerda</td>
                <td align="left" width="180" valign="top">Coluna centro</td>
                <td align="left" width="160" valign="top">Coluna direita</td>
              </tr>
            </tbody>
          </table>
        </td>
      </tr>
    </tbody>
  </table>
</center>

Atualmente, isto não faz sentido, porque com muito menos markup e pouca formatação via CSS fazemos o mesmo:

#grid {
  width: 500px;
  margin: 0 auto;
}
#grid:after {
  visibility: hidden;
  display: block;
  content: "";
  clear: both;
  height: 0;
}
#grid > div {
  float: left;
}
#grid > div {
  width: 160px;
}
#grid .main {
  width: 180px;
}
<div id="grid">
  <div>Coluna Esquerda</div>
  <div class="main">Coluna Centro</div>
  <div>Coluna Direita</div>
</div>

E isto é apenas um exemplo, existem centenas de soluções para organizar um layout nos dias de hoje.

Tableless != deixar de usar tabelas

O termo não é sinónimo de "deixa de usar tabelas", a tag de HTML <table/> continua a ser utilizada e perfeitamente válida quando estamos a apresentar dados tabulares. Alías, a mesma foi criada para isso mesmo:

W3c - table

Na web, tabelas são uma boa maneira de organizar os dados num formato tabular.

Basta pensar nisto e aplicar a mesma lógica aplicada ao layout da página:

  • Reduzimos a markup favorecendo propriedades de CSS para atingir o mesmo layout com manutenção reduzida, mais escalável e sempre com o mínimo de código possível (tableless).

Vamos agora apresentar dados tabulares fazendo uso de imensos elementos, incrementando a nossa markup, dificultando a manutenção futura da página e seus dados, provavelmente recorrendo a CSS para formatar as coisas da mesma forma que uma tabela, ao invés de simplesmente utilizarmos à tag <table/> ?

Claro que não!


Sumário

É, deveria estar lá em cima, mas estando aqui obrigou a lerem :)

Se estás a apresentar dados tabulares, a tag de HTML <table/> foi criada para isso mesmo. Se estás a fazer um layout para uma página, tableless é o caminho a seguir pelas questões já salientadas.

1
  • 5
    como sempre uma resposta impecável. bem que poderia ter um follow aqui ;D 15/04/2015 às 15:26
12

Table vs Tableless

To table or not to table? That's the question.

Usar ou não tabelas em uma página web depende do seu objetivo ao representar determinados dados.

Era uma vez a tag <table>

Como já foi mencionado em outras respostas, houve um tempo em que a maioria dos layouts de websites eram feitos usando tabelas.

Por exemplo, eram comum nas IDE's mais usadas, a exemplo do Dreamweaver, ter um wizard para criar layouts de sites. Veja o exemplo abaixo:

Dreamweaver layout

Então era comum começar um site pensando em quantas linhas ou colunas ele seria dividido para então encaixarmos todos os elementos. A grande vantagem de fazer layouts assim é que é lógico e intuitivo.

Porém, há muitas limitações em layouts com tabelas.

  • Dor de cabeça quando um elemento precisa se sobrepor ao layout, como um submenu em lista.
  • Adaptar o layout a dispositivos móveis.
  • Renderização demorada, pois o navegador precisa ler a tabela até o final para mostrá-la corretamente.
  • Código bagunçado, geralmente com tabelas dentro de tabelas dentro de tabelas dentro de tabelas...

E por aí vai...

Então surgiram divs e spans

Para sanar essas limitações, muitos webdesigners começaram a implementar layouts com blocos genéricos div e span aliados a técnicas de manipulação dos estilos CSS para gerar layouts mais flexíveis e responsivos.

Com o advento do HTML5, novas tags foram adicionadas para deixar ainda mais fácil a codificação ao adicionar semântica a determinados elementos da página. Algumas são: header, footer, section e aside. Elas estão exemplificadas no exemplo mais abaixo.

Diferente de uma tabela normal, onde cada célula deve obedecer aos padrões de posicionamento das tabelas os blocos são mais independentes. Cada bloco pode ser posicionado de forma independente, mas relativo aos outros blocos.

Veja o exemplo abaixo:

Tableless layout

Isso parece a mesma coisa que uma tabelas, porém acaba com as limitações mencionadas acima.

No código HTML, o layout pode ser algo assim:

<body>
  <header>
    Meu cabeçalho
  </header>

  <aside class="esquerda">
    Menu à esquerda
  </aside>

  <aside class="direita">
    Menu à direita
  </aside>

  <section id="content">
    Conteúdo da página.
  </section>

  <footer>
    Meu rodapé
  </footer>
</body>

Então as vantagens:

  • Mais liberdade ao posicionar elementos, pois não é necessário seguir exatamente a grade de uma tabela.
  • Em telas pequenas, por exemplo em celulares, os elementos podem ser dispostos um posições completamente diferentes de uma tela grande usando media queries do CSS.
  • O navegador consegue exigir cada tag assim que recebe o conteúdo do navegador, então se sua página é composta por muitos dados eles serão exibidos aos poucos e não tudo de uma vez após uma longa demora inicial.
  • Você pode dividir o código em diferentes seções e não fica tudo dentro de uma única tabela. Usando linguagens dinâmicas como PHP, JSP, ASP isso permite dividir o código em diversos arquivos de forma mais eficiente e evita quebrar o layout caso algum conteúdo maior do que o esperado seja escrito na página.

Claro, nem tudo são flores. No começo, criar um layout 100% tableless era uma grande dor de cabeça. O mais complicado era criar um código que funcionasse igual em todos os navegadores.

Porém, com o avanço da padronização do CSS, a evolução dos diversos navegadores e a consolidação de padrões de codificação de HTML e CSS, hoje é muito mais fácil fazer isso se você não quiser reinventar a roda.

Milhares e milhares de sites na internet disponibilizam exemplo de como fazer isso e ainda há bibliotecas como Foundation e Bootstrap que permitem reusar estilos já prontos para criar seu site.

Quando usar ou não tabelas

Se você tem dados que realmente são tabulares, como no caso de representar dados de um banco de dados, onde é importante que as colunas precisam estar sempre alinhadas, então tabelas são a solução mais ideal.

Por outro lado, imagine uma galeria de fotos. Num monitor mais largo você pode querer exibir 4 fotos por linha, mas ao diminuir o tamanho tabela, podem ser exibidas 3, 2 ou até 1 fotos, por exemplo em smartphones. Tabelas simplesmente não funcionam aqui.

Não pare por aqui

Uma dica para entender melhor como funciona isso é ir até a página do Bootstrap e ver como funciona o Grid System. Na mesma página, há um exemplo de uso da table.

Entendendo como funcionam os dois sistemas será mais fácil decidir quando usar um e outro.

3
  • 5
    +1 Por teres falado no Dreamweaver! Ahhh que saudades de nunca o ter utilizado :P
    – Zuul
    15/04/2015 às 17:00
  • 1
    Quando comecei a aprender HTML me recomendaram a usar o Dreamweaver, dá pra chorar vendo o código que aquilo gerava. 16/04/2015 às 2:58
  • @RafaelAlmeida Eu chorava, principalmente quando "quebrava" o layout e não conseguia achar de jeito algum o fechamento de tag faltando nos infinitos níveis de aninhamento.
    – utluiz
    16/04/2015 às 4:14
8

Tableless é um termo que surgiu quando o CSS e o HTML começaram a evoluir e possibilitar uma gama muito maior de controle ao pessoal do Frontend.

Para entender melhor, imagine que naquele tempo não se usava divs, spans e etc. Todo o layout do site era "recortado" e montado dentro de tabelas. Muitas tabelas, umas dentro das outras, ou seja, algo muito trabalhoso e que mesmo assim não possibilitava uma boa qualidade. Daí a resistência de muitos até hoje com as tabelas.

Porém, a flexibilidade é muito bem-vinda. As tabelas tem a sua utilidae, como o nome diz, para tabular dados. Não é recomendada para posicionar elementos e montar o layout, o que é contra o conceito de tableless, mas para algo como o seu exemplo, pode ser usada perfeitamente que não fará seu HTML amador ou com baixa qualidade. Um exemplo são os plugins jQuery como o datatable https://www.datatables.net/ que modernizam e agilizam o uso de tableas, do jeito que é para ser, para tabular dados.

6

A tag Table foi criada para exibir uma tabela com dados tabulares.

Sendo assim utilizar uma tabela para controlar a disposição dos elementos na página é uma má prática. Por conta disso que foi criado o conceito de tableless, para utilizar as tabelas de forma correta, apenas nos dados tabulares.

Tables should not be used as layout aids. Historically, some Web authors have misused tables in HTML as a way to control their page layout. This usage is non-conforming, because tools attempting to extract tabular data from such documents would obtain very confusing results. In particular, users of accessibility tools like screen readers are likely to find it very difficult to navigate pages with tables used for layout.

Tradução:

As tabelas não devem ser usadas para fins de layout. Historicamente alguns desenvolvedores Web utilizaram as tabelas para controlar o layout de suas páginas. Esse uso é uma não-conformidade, por conta de que ferramentas que buscam dados tabulares advindos do HTML iriam se deparar com dados muito confusos. Além disso, pessoas que utilizem de ferramentas de acessibilidade, como leitores de tela, tendem a ter grandes problemas na navegação de páginas em que o layout é feito por tabelas.

Fonte: http://www.w3.org/html/wg/drafts/html/master/semantics.html#the-table-element

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .