Por que não devemos usar <table> em um design?

41

Quais são algumas das razões claras e lógicas para a criação de sites com tabelas? Onde estão os benefícios, o que tem impulsionado essa idéia no setor? Quando é bom usar uma mesa?

Incógnito
fonte
Discutido extensivamente sobre o SO stackoverflow.com/questions/83073/…
Gabriele Petrioli
O Google usa as próprias tabelas, no adwords, por exemplo. Com milhões de anunciantes registrando e trabalhando com dados dinâmicos, é muito mais fácil codificar em torno de uma <table>grade CSS. Uso datatables.net para alguns aplicativos e você pode ver uma lista de quem usa esse plug-in jquery em seu site. Muitos sites ainda usam tabelas por boas razões. Só uso tabelas quando trabalho com muitos dados dinâmicos que precisam ser classificados por coluna paginada etc., mas não para layouts de página, é para isso que serve o CSS.
Anagio

Respostas:

71

1) As tabelas não devem ser usadas para layouts de página porque são:

  • Lento para renderizar, pois o navegador precisa fazer o download da maioria - se não toda - da tabela para renderizá-lo corretamente

  • Eles exigem mais HTML do que layouts que não são de tabela, o que significa carregamento e renderização mais lentos, além de um aumento no uso da largura de banda

  • Eles podem ser um pesadelo para manter, pois podem se tornar rapidamente complexos

  • Eles podem quebrar a cópia de texto

  • Eles afetam negativamente os leitores de tela e podem tornar seu conteúdo inacessível para alguns usuários

  • Eles não são tão flexíveis quanto o uso de marcação semântica adequada

  • Eles nunca foram projetados para serem usados ​​para layouts de página

  • Transformar tabelas em um layout responsivo é muito difícil de controlar

2) Use uma tabela para dados tabulares. É para isso que servem as mesas.

Veja também: Por que as pessoas estão criando tabelas com divs?

John Conde
fonte
1
Certo, então se eu tiver uma seção sobre detalhes de contato, não há problema em ter uma tabela, mas o layout gráfico de uma página está em DIVs ou algo semelhante a eles. Vi alguns designers evitá-los todos juntos em áreas que possuem dados tabulares e usam DIVs.
Incognito
18
Designers que evitam tabelas completamente não sabem o que estão fazendo. Eles entenderam mal o que significa "não usar tabelas para layouts de página".
John Conde
1
É estúpido evitar completamente as tabelas, mas existem alternativas legítimas às tabelas para informações de contato. A lista de definição é uma boa alternativa, especialmente ao implementar um hCard: cagintranet.com/archive/...
lesa majestade
2
@Litso: Você deve ler as especificações do W3C DLantes de decidir para que serve ou não.
Lèse majesté
1
Há também uma posição: tag CSS da tabela para criar layouts baseados em tabela sem colocá-los em HTML. Existem alguns casos de nicho em que as tabelas ainda são a melhor / mais fácil opção para layouts. Dê uma olhada em css-tricks.com/fluid-width-equal-height-columns para ver o que quero dizer.
Evan Solha
8

As tabelas são para dados tabulares, não para design. As pessoas geralmente entendem mal a motivação por trás de tornar as páginas "sem mesa".

É errado usar tabelas para criar seu layout. Você deve usar outros elementos para o layout (divs, listas, seções, artigos, cabeçalhos, rodapés, além, etc.). E você pode obter ótimos efeitos com o mínimo de HTML / CSS (deixando seu código semanticamente significativo, leve e fácil de manter).

Obviamente, os dados tabulares devem estar dentro de um elemento da tabela. Se desejar, você pode melhorar até a semântica das tabelas adicionando thead, tfoot, tbody, th, caption etc. Todos esses elementos devem ser usados ​​com tabelas e, acredite, eles podem tornar sua mesa muito mais descritiva. .

Então, o importante é não usar design baseado em tabela e usar qualquer solução HTML / CSS adequada. Comece pela marcação semântica HTML e crie o design com CSS. Isso deve manter qualquer pessoa segura. Use isso como regra geral.

Dave
fonte
3

As tabelas devem conter dados e não elementos de design.

sdadffdfd
fonte
3

As tabelas devem ser usadas apenas ao exibir dados tabulares. Caso contrário, eles geralmente são uma má escolha para exibição.

Chris Ballance
fonte
Por que o voto negativo?
22414 Chris Cornance
0

A verdadeira causa para não usar tabelas é:

O layout padrão de uma tabela é: table-layout:fixed

Isso indica ao navegador para analisar a tabela e corrigir as células para conter os elementos dentro delas, o que leva algum tempo. (é por isso que as tabelas são tão boas para dados complexos)

Conclusão: a tabela será renderizada depois que todo o conteúdo dentro dela for renderizado, em oposição ao usar, por exemplo, elementos DIV.

YardenST
fonte
-3

Eu uso tabelas para estrutura de web design em líquido misturado com fixo e sei que muitos dizem que as tabelas são para noobs outros dizem que são para caras da velha escola que sempre dizem que DIVS são os melhores, mas a verdade é que as tabelas são melhores para alguma coisa e DIVS para outra coisa.

O que é melhor a <br>ou a <p></p>? A mesma coisa

Eu e minhas tabelas antigas no meu novo web design de 2015 podemos dar um chute na bunda de qualquer pessoa com meu amigável móvel de 100% de largura, misturado com 2 colunas laterais de 200px cada.

Obviamente, dentro de tabelas é feio colocar cada vez mais tabelas, é aí que o DIVS se torna útil. Tabelas podem fazer coisas que divs não podem e divs podem fazer coisas que tabelas não podem.

Aqueles que dizem que o layout da tabela padrão é fixo? Eu te dou um exemplo

<table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="200">left</td>
    <td width="100%">middle</td>
    <td width="200">right</td>
  </tr>
</table>

Você vê o potencial agora? Dê uma olhada no PC e no celular. Ah sim e eu nem preciso de bootstrap.

Agora, para fazer o mesmo com divs, é necessário escrever muito código CSS para exibir o alinhamento de flutuação e porcaria. Quem escreveu menos código? Eu! Do que os clientes precisam? Um cara que termina uma página em 1 ano ou em 1 mês?

Agora vamos melhorar o design com divs

<div style="width:100%; min-width:1000px; height:200px;">top menu or nav</div>
<table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="200">left</td>
    <td width="100%">middle</td>
    <td width="200">right</td>
  </tr>
</table>
<div style="width:100%; min-width:1000px; height:200px;">top menu or nav</div>

Um layout de design de 5 colunas tão bonito usando divs e tabelas.

Sua resposta é: os dois juntos funcionam melhor e são mais rápidos e ficam bem em qualquer design, mesmo em TVs e celulares pequenos.

Rodrigo Santiaborg
fonte