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

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?

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?

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.

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

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

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.

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.