¿Por qué usar tablas para el diseño de sitios web es tan malo?

Question

Soy desarrollador de motores de Winforms y empresas que usa asp.net por primera vez en más de 2 años, y en ese momento noté algunos cambios en las convenciones.

¿Cuál es la lógica detrás del movimiento anti-'tables para el diseño '?

¿Es para permitir que las clases CSS se utilicen para manejar el diseño, y si es así, si esto realmente es un problema en las páginas que está bastante seguro permanecerá estático, o simplemente se considera 'feo'?

Answer 1

Algunos puntos adicionales:

• no seas un fanático de ello. CSS no es perfecto, y hay algunas cosas que se pueden hacer mucho más fácilmente con tablas. Entonces, si es necesario, pon una pequeña mesa ahí. No te matará.

• El principal "mal" de los diseños basados ​​en tablas era el tipo de desorden profundamente anidado que solía ser la única manera de obtener un control preciso sobre la página. Tendría tablas dentro de las tablas dentro de las tablas e imágenes transparentes estratégicamente colocadas para controlar el espaciado. Creo que esto es bastante raro hoy en día, y CSS te permitirá limpiar el 90% de este lío.

• La "web semántica", donde las etiquetas están ahí para dar sentido a la página, no para describir el diseño, es un buen objetivo. Sin embargo, la versión actual de HTML no llega demasiado lejos para alcanzarla.Como resultado, SIEMPRE tendrá muchas etiquetas en sus páginas que están ahí para el diseño, sin otro significado. Eso no significa que no deba tratar de separar el contenido y el diseño tanto como sea posible; solo significa que no llegarás al 100%.

Answer 2

Existen varias razones. Una de las razones es la accesibilidad ... las tablas de diseño no agregan semántica al contenido, por lo que los lectores de pantalla tienen problemas con ellas. Entonces solo use tablas para datos tabulares.

Here son algunos puntos que responden a la pregunta con más detalles

• Tables are slow
• Tables can be inflexible
• Accessibility issues are easier with CSS
• Tables don’t degrade
• Tables don’t print as well

Answer 3

Hace que la accesibilidad sea difícil. Imagine que es un navegador de texto y desea leer en voz alta el contenido del sitio web para personas ciegas. La mayoría de los diseños basados ​​en tablas tienden a ser muy difíciles de raspar y de "entender" para una máquina.

HAY mucho elitismo/política/fanatismo en estas discusiones de Tablas vs. CSS, pero a gran escala, los Diseños CSS son más limpios que los diseños basados ​​en Table.

Teóricamente, también son más fáciles de mantener. Diga, ¿quiere mover la navegación de izquierda a derecha? Claro, solo cambia un archivo CSS y estás bien. Pero, una vez más, esto generalmente no ocurre en los sitios web más complejos donde los CSS a menudo están profundamente anidados y son tan complejos que los cambios no son fáciles, mientras que los sistemas de plantillas hacen que los diseños basados ​​en tablas no sean completamente imposibles de mantener.

Answer 4

Hay un pretty good article en el sitio que pone el diseño de una página en tablas vs css cabeza a cabeza. Es una lectura bastante interesante y resalta algunos de los principales escollos para el diseñador/desarrollador cuando se utilizan tablas como el código fuente trillado con tablas, a menudo se requiere código fuente adicional y los cambios futuros son inevitablemente complicados.

Answer 5

Honestamente, no se preocupe tanto por el uso de tablas. Incluso algunas de las mejores personas semánticamente correctas aconsejan usar tablas si es más fácil para el flujo del documento. Solo use lo que funciona, la desventaja de usar tablas no es tan buena.

Answer 6

Le recomiendo leer el libro Designing with Web Standards. Se adapta a diseñadores, desarrolladores y personas con un rol más orientado a los negocios.

Answer 7

La idea es que el marcado de la contenido/significa de la página es una cosa mejor que hacer, no sólo porque hace que sea fácilmente modificable y styleable sino también (posiblemente más importante), ya que mejora la accesibilidad, para aquellos que usan lectores de pantalla, etc. (¡y para los motores de búsqueda!). Lee Dive into Accessibility en algún momento. [Y si tiene datos tabulares, debe usar una tabla, por supuesto.]

Aunque "intente usar CSS, no tablas, para el diseño" es una regla muy importante que debe intentar seguir tanto como sea posible, en última instancia, "hacer lo correcto" tiene algún costo, y cuando es demasiado alto, debe reconsiderar sus prioridades. Ver http://giveupandusetables.com/

Answer 8

Con soporte para nuevas propiedades de visualización de CSS en IE8, este debate sobre tablas vs CSS podría finalizar pronto. Dado que es más fácil y sensato pensar en diseños en el formato de tabla/cuadrícula, la disponibilidad de la tabla , tabla-fila, tabla-celda, tabla-título, tabla-columna, tabla-fila-grupo, etc., como propiedades CSS facilitará la implementación del diseño de manera significativa.

Este article tiene una descripción detallada.

Answer 9

Vale la pena mencionar que las etiquetas < de la tabla > siguen siendo legítimamente utilizadas cuando se muestran datos tabulares. La regla de oro que uso es si estoy mostrando algo que fácilmente podría vivir en una hoja de cálculo, entonces una etiqueta de tabla es el camino a seguir.

Answer 10

• cargas lentas
• semánticamente incorrecta

Answer 11

Esto puede no ser adecuado sobre el tema, pero el problema más frecuente que tengo con diseños de CSS es que pueden ser difíciles de configurar para que siempre Estirar el nodo padre en lugar de desbordarlo. Esto se convierte en un dolor aún mayor cuando se golpea una de las no raras instancias de IE haciendo algo completamente diferente a FF. Arreglar este problema con una tabla suele ser más fácil y más compatible que varias soluciones de JS que de lo contrario se vería obligado a utilizar.

Answer 12

La mayoría de las ventajas (más rápido, no spacer.gif, accesibilidad, contenido vs marcado, etc.) ya se mencionaron, pero me sorprende que nadie mencione que css can hacen cosas que las tablas simplemente no pueden o son al menos más fáciles.

Además, solo se trata de usar la herramienta adecuada para el trabajo correcto. Las tablas son para datos tabulares y css se usa para diseñar su contenido. Lo que la gente tiende a olvidar es que también puede style your tables ...

El problema es que falta compatibilidad con el navegador. Por lo tanto, las personas usan hacks.Por lo tanto, los navegadores interpretan css de manera diferente para acomodar esos hacks. Es un circulo interminable.

Answer 13

Uno de los principales puntos de crítica de los diseños basados ​​en tablas es que son rígido. Se usaron para crear páginas perfectas en píxeles en todos los navegadores. El precio de esto es la rigidez, lo que perjudica el acceso. Un diseño de una pantalla de 800x600 píxeles puede hacer que alguien con una pantalla HD de pantalla ancha tenga que entrecerrar los ojos para leer todo. Cuando un visitante fuerza un aumento del tamaño de fuente en el navegador, rompe el diseño, a veces bastante mal.

Un diseño basado en CSS es flexible y se puede utilizar para crear un diseño que se verá bien (y similar, pero no igual) en cualquier pantalla/tamaño de fuente. La estructura interna mejorada también ayuda a los lectores de pantalla y otras herramientas de accesibilidad, así como a las plataformas/dispositivos móviles.

La etiqueta de la tabla no está obsoleta y todavía tiene un papel que desempeñar en los diseños impulsados ​​por CSS: se debe utilizar al mostrar datos tabulares (como en una hoja de cálculo). Para esto, es perfecto, pero ya no se debe usar para el diseño de página.

Answer 14

Honestamente, la multitud contra la mesa a menudo son culpables de ser simplemente nazis de las normas. El hecho es que los humanos han estado usando tablas para el diseño ya que "liderar" involucró el uso del plomo real.

El argumento principal contra las tablas es accessiblity; y ese es un tema importante. Sin embargo, CSS es solo una solución de curita para el verdadero culpable: ¡HTML es un lenguaje de marcado horrible!

Si no se suponía HTML para ser para el diseño, entonces ¿por qué tenemos <centro>, <b>, <u>, o <i>? ¿Por qué no tenemos una etiqueta de < > para agrupar semánticamente los párrafos? ¿Por qué tenemos 6 etiquetas de encabezado?

Tenemos que dejar de pretender que HTML es estrictamente semántico cuando claramente no lo es. Si bien CSS es bueno implementando la presentación, no es tan bueno definirla. Si fuera así, no necesitaríamos sopa de div para hacer un diseño de 3 columnas. Lo que realmente debería estar pasando con HTML5 (pero, por supuesto, no) es tener etiquetas de diseño con roles claros, y usar CSS para aclarar lo que hacen esas etiquetas.