¿Por qué no se supone que debemos usar <table> en un diseño?

¿Cuáles son algunas razones claras y lógicas por las que no deberíamos diseñar sitios web con tablas? ¿Dónde están los beneficios, qué ha impulsado esta idea en la industria? ¿Cuándo está bien usar una mesa?

1) Las tablas no deben usarse para diseños de página porque son:

• Lento para renderizar ya que el navegador necesita descargar la mayoría de la tabla, si no toda, para representarla correctamente

• Requieren más HTML que diseños que no sean tablas, lo que significa una carga y representación más lentas, así como un mayor uso de ancho de banda

• Pueden ser una pesadilla de mantener, ya que pueden volverse complejos rápidamente

• Pueden romper la copia de texto

• Afectan negativamente a los lectores de pantalla y pueden hacer que su contenido sea inaccesible para algunos usuarios

• No son tan flexibles como usar un marcado semántico adecuado

• Nunca fueron diseñados para usarse en diseños de página

• Convertir las tablas en un diseño receptivo es muy difícil de controlar

2) Use una tabla para datos tabulares. Para eso están las mesas.

Ver también: ¿Por qué las personas hacen tablas con divs?

Las tablas son para datos tabulares, no de diseño. La gente a menudo malinterpreta la motivación detrás de hacer páginas "sin mesa".

Es incorrecto usar tablas para crear su diseño. Debe usar otros elementos para el diseño (divs, listas, secciones, artículos, encabezados, pies de página, apartados, etc.). Y puede lograr grandes efectos con un mínimo de HTML / CSS (dejando su código semánticamente significativo, liviano y fácil de mantener).

Por supuesto, los datos tabulares deben estar dentro de un elemento de tabla. Si lo desea, puede mejorar incluso la semántica de las tablas agregando thead, tfoot, tbody, th, caption, etc. Todos esos elementos están destinados a ser utilizados con tablas, y créanme, pueden hacer que su tabla sea mucho más descriptiva. .

Entonces, la cosa es que no vaya con un diseño basado en tablas y use cualquier solución HTML / CSS que se ajuste. Comience desde el marcado semántico HTML y luego desarrolle el diseño con CSS. Esto debería mantener a cualquiera a salvo. Use esto como una regla general.

Se supone que las tablas contienen datos y no elementos de diseño.

Las tablas solo deben usarse cuando se muestran datos tabulares. De lo contrario, generalmente son una mala elección para mostrar.

La verdadera causa para no usar tablas es:

El diseño predeterminado de una tabla es: table-layout:fixed

Esto le dice al navegador que analice la tabla y arregle las celdas para que contengan los elementos dentro de ellas, lo que lleva algo de tiempo. (es por eso que las tablas son tan buenas para datos complejos)

En pocas palabras: la tabla se representará después de que se represente todo el contenido dentro de ella, a diferencia de cuando se utilizan, por ejemplo, elementos DIV.

Utilizo tablas para la estructura de diseño web en líquido mezclado con fijo y sé que muchas dicen que las tablas son para novatos, otras dicen que son para chicos de la vieja escuela que siempre dicen que DIVS son los mejores, pero la verdad es que las tablas son mejores para algo y DIVS para otra cosa.

¿Qué es mejor a <br>o a <p></p>? La misma cosa

Mis viejas tablas y yo en mi nuevo diseño web de 2015 podemos patear traseros a cualquiera con mi amigable móvil de ancho 100% mezclado con 2 columnas laterales de 200px cada una.

Obviamente, dentro de las tablas es feo poner más y más tablas, ahí es donde DIVS es útil. Las tablas pueden hacer cosas que los divs no pueden y los divs pueden hacer cosas que las tablas no pueden.

¿Aquellos que dicen que el diseño de tabla predeterminado es fijo? te doy un ejemplo

<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>

¿Ves el potencial ahora? Échale un vistazo en tu PC y teléfono celular. Ah sí, y ni siquiera necesito bootstrap.

Ahora, para hacer lo mismo con los divs, debe escribir una gran cantidad de código CSS para mostrar alinear flotante y basura. ¿Quién escribió menos código? ¡Yo! ¿Qué necesitan los clientes? ¿Un chico que termina una página en 1 año o en 1 mes?

Ahora mejoremos el diseño con 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>

Un diseño de diseño de 5 columnas tan hermoso que usa divs y tablas.

Su respuesta es: ambos funcionan mejor juntos y es más rápido y se verá bien en cualquier diseño, incluso en televisores y teléfonos celulares pequeños.