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

41

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

— Incógnito
fuente

Ampliamente discutido en SO stackoverflow.com/questions/83073/…

— Gabriele Petrioli

Google usa tablas, por ejemplo, dentro de adwords. Con millones de anunciantes que inician sesión y trabajan con datos dinámicos, es mucho más fácil codificar alrededor de una <table>cuadrícula CSS. Utilizo datatables.net para algunas aplicaciones y puedes ver una lista de quién usa ese complemento jquery en su sitio. Muchos sitios todavía usan tablas por buenas razones. Sin embargo, solo uso tablas cuando trabajo con muchos datos dinámicos que deben clasificarse por columnas paginadas, etc., pero no para los diseños de página para eso es CSS.

— Anagio

71

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?

— John Conde
fuente

1

Correcto, así que si tengo una sección sobre detalles de contacto para la que está bien tener una tabla, pero el diseño gráfico de una página está en DIV o algo similar para ellos. He visto que algunos diseñadores los evitan por completo en áreas que tienen datos tabulares y usan DIV.

— Incognito

18

Los diseñadores que evitan las mesas por completo no saben lo que están haciendo. Han entendido mal lo que significa "no usar tablas para diseños de página".

— John Conde

1

Es estúpido evitar las tablas por completo, pero hay alternativas legítimas a las tablas para la información de contacto. Una lista de definiciones es una buena alternativa, especialmente cuando se implementa una hCard: cagintranet.com/archive/…

— Lèse majesté

2

@Litso: debe leer las especificaciones del W3C DLantes de decidir para qué sirve o no.

— Lèse majesté

1

También hay una posición: etiqueta CSS de tabla para crear diseños basados en tablas sin ponerlos en HTML. Hay algunos casos de nicho donde las tablas siguen siendo la mejor / más fácil opción para diseños. Eche un vistazo a @ css-tricks.com/fluid-width-equal-height-columns para ver a qué me refiero.

— Evan Plaice

8

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.

— Dave
fuente

3

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

— sdadffdfd
fuente

3

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

— Chris Ballance
fuente

¿Por qué el voto negativo?

— Chris Ballance

0

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.

— YardenST
fuente

-3

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.

— Rodrigo Santiaborg
fuente