665 votos

¿Por qué no utilice tablas para maquetar en HTML?

Parece ser la opinión general de que las tablas no debe ser utilizado para el diseño en HTML.

¿Por qué?

Yo nunca (o rara vez, para ser honesto) visto buenos argumentos para ello. Las respuestas habituales son:

  • Es bueno separar el contenido del diseño
    Pero esto es una falacia de argumento; el Patrón de Pensamiento. Supongo que es cierto que el uso de la tabla de elemento para el diseño tiene poco que ver con los datos tabulares. Entonces, ¿qué? ¿Mi jefe de atención? ¿Mi usuario?

    Tal vez a mí o a mis compañeros de los desarrolladores que tienen que mantener una página web de atención... Es una tabla menos mantenible? Creo que el uso de una tabla es más fácil de usar divs y CSS.

    Por cierto... ¿por qué usar un div o un span de una buena separación de contenido del diseño y una mesa no? Conseguir un buen diseño con sólo divs menudo requiere una gran cantidad de divs anidados.

  • La legibilidad del código
    Creo que es al revés. La mayoría de las personas entienden HTML, que muy pocos entienden de CSS.

  • Es mejor para el SEO no utilizar tablas
    ¿Por qué? ¿Alguien puede mostrar alguna evidencia de que es? O una declaración de parte de Google de que las tablas que están desalentados desde una perspectiva de SEO?

  • Las tablas son más lentos.
    Un extra tbody elemento se inserta. Esta es una miseria para los navegadores web modernos. Me muestran algunos puntos de referencia en donde el uso de una tabla reduce significativamente una página.

  • Un esquema de revisión es más fácil, sin tablas, vea css Zen Garden.
    La mayoría de los sitios web que necesitan de una actualización necesidad de nuevos contenidos (HTML). Escenarios donde una nueva versión de un sitio web sólo se necesita un nuevo archivo CSS no es muy probable. El Jardín Zen es un buen sitio web, pero un poco teórico. Por no hablar de su mal uso de CSS.

De verdad estoy muy interesada en buenos argumentos para el uso de divs + CSS en lugar de tablas.

496voto

Konrad Rudolph Puntos 231505

Voy a ir a través de sus argumentos, uno tras otro y tratar de mostrar los errores en los mismos.

Es bueno separar el contenido del diseño Pero esto es una falacia de argumento; el Cliché de Pensamiento.

No es una falacia, porque de todos HTML fue diseñado intencionalmente. El uso indebido de un elemento puede no ser completamente fuera de la cuestión (después de todo, los nuevos modismos han desarrollado en otros idiomas, así) pero posibles consecuencias negativas tienen que ser compensadas. Además, incluso si no hay argumentos contra el uso indebido de la <table> elemento día de hoy, podría ser mañana, porque de la forma en que los fabricantes de los navegadores aplicar tratamiento especial para el elemento. Después de todo, ellos saben que "<table> elementos para tabular datos", y podría utilizar este hecho para mejorar el motor de renderizado, en el proceso sutilmente cambiando la forma <table>s comportarse, y por lo tanto romper los casos en los que anteriormente estaba mal.

Entonces, ¿qué? ¿Mi jefe de atención? ¿Mi usuario?

Depende. Es su jefe puntiagudo pelo? Entonces él no podría atención. Si es competente, luego ella le importa, porque los usuarios se.

Tal vez a mí o a mis compañeros de los desarrolladores que tienen que mantener una página web de atención... Es una tabla menos mantenible? Creo que el uso de una tabla es más fácil que usar divs y css.

La mayoría de los desarrolladores web profesionales parecen oponerse[cita requerida]. Que las mesas son de hecho menos mantenible debería ser obvio. El uso de tablas para maquetar, significa que cambiar el corporativo de diseño será, de hecho, significa cambiando a cada página. Esto puede ser muy caro. Por otro lado, el uso juicioso de semánticamente significativas HTML combinado con CSS puede confinar dichos cambios en el CSS y las imágenes que se utilizan.

Por cierto... ¿por qué usar un div o un span de una buena separación de contenido del diseño y una mesa no? Conseguir un buen diseño con sólo divs menudo requiere una gran cantidad de divs anidados.

Profundamente anidadas <div>s es un anti-patrón así como los diseños de tabla. Buenos diseñadores web no necesitas muchos de ellos. Por otro lado, incluso tal profunda divs anidados no tienen muchos de los problemas de los diseños de tabla. De hecho, se puede incluso contribuir a una estructura semántica por, lógicamente, dividiendo el contenido en partes.

La legibilidad del código Creo que es al revés. La mayoría de las personas entienden html, poco se entiende de css. Es más simple.

"La mayoría de la gente" no importa. Los profesionales de la materia. Para los profesionales, los diseños de tabla crear muchos más problemas de HTML + CSS. Esto es como decir que no debería usar GVim o Emacs porque el Bloc de notas es más sencillo para la mayoría de la gente. O que no debo usar Látex debido a MS Word es más sencillo para la mayoría de la gente.

Es mejor para el SEO no utilizar tablas

No sé si esto es cierto y no utilizar esto como un argumento, pero sería lógico. De búsqueda de los motores de búsqueda relevantes de los datos. Si bien los datos tabulares podría, por supuesto, ser relevantes, es muy raro lo que los usuarios buscan. Los usuarios buscar términos utilizados en el título de la página o, de manera similar a posiciones prominentes. Por lo tanto, sería lógico excluir tabular contenido de filtrado y disminuyendo así el tiempo de procesamiento (y el costo!) por un gran factor.

Las tablas son más lentos. Un extra tbody elemento se inserta. Esta es una miseria para los navegadores web modernos.

El elemento adicional tiene nada que ver con las tablas de ser más lento. Por otro lado, el algoritmo de diseño de tablas es mucho más difícil, el navegador a menudo tiene que esperar a que toda la tabla a carga antes de comenzar a maquetar el contenido. Además, el almacenamiento en caché de el diseño no funciona (CSS puede ser fácilmente almacenado en caché). Todo esto ha sido mencionado antes.

Me muestran algunos puntos de referencia en donde el uso de una tabla reduce significativamente una página.

Por desgracia, no tengo ningún punto de referencia de los datos. Yo estaría interesado en mí mismo, porque es justo que este argumento carece de un cierto rigor científico.

La mayoría de los sitios web que necesitan de una actualización necesidad de nuevos contenidos (html). Escenarios donde una nueva versión de un sitio web sólo se necesita un nuevo archivo css no es muy probable.

No, en absoluto. He trabajado en varios casos donde cambiar el diseño se ha simplificado por una separación de contenido y diseño. Es a menudo necesario para cambiar un código HTML, pero los cambios siempre va a ser mucho más limitado. Además, los cambios de diseño debe ser, en ocasiones, realizan dinámicamente. Considere la posibilidad de plantilla de los motores como el que utiliza el sistema de blogs WordPress. Los diseños de tabla, literalmente, matar a este sistema. He trabajado en un caso similar de un software comercial. Ser capaz de cambiar el diseño sin cambiar el código HTML fue uno de los requerimientos de la empresa.

Otra cosa. Disposición de mesa de hace automatizados de análisis de sitios web (screen scraping) mucho más difícil. Esto puede sonar trivial porque, después de todo, ¿quién lo hace? Me sorprendí a mí mismo. Pantalla de raspado puede ayudar mucho si el servicio en cuestión no ofrece un Servicio alternativo para acceder a sus datos. Estoy trabajando en bioinformática, donde esta es una triste realidad. Modernas técnicas de web y WebServices no han alcanzado la mayoría de los desarrolladores y, a menudo, screen scraping es la única manera de automatizar el proceso de obtención de datos. No es de extrañar que muchos biólogos aún realizar tareas de forma manual. Para miles de conjuntos de datos.

290voto

Carl Camera Puntos 4284

Aquí está mi programador de la respuesta de un simliar hilo

La semántica 101

Tomar primero un vistazo a este código y pensar acerca de lo que está mal aquí...

class car {
    int wheels = 4;
    string engine;
}

car mybike = new car();
mybike.wheels = 2;
mybike.engine = null;

El problema, claro, es que una moto no es un coche. La clase de coche es una manera inadecuada de clase para la moto instancia. El código es libre de errores, pero es semánticamente incorrecto. Se refleja mal en el programador.

La semántica 102

Ahora aplica esto para el marcado de documentos. Si necesita el documento para presentar datos tabulares, entonces la etiqueta <table>. Si usted realiza la navegación en una tabla sin embargo, entonces usted está haciendo mal uso de la finalidad de la <table> elemento. En el segundo caso, no está de presentar datos tabulares -- está (mal)uso de la <table> elemento para lograr una presentación objetivo.

Conclusión

Se notan los visitantes? No. ¿Su jefe de atención? Tal vez. Qué hay veces que cortar las esquinas como programadores? Seguro. Pero, ¿debemos? No. ¿Quién se beneficia si el uso de marcado semántico? Usted (y su reputación profesional. Ahora ve y haz lo correcto.

104voto

erlando Puntos 5802

Respuesta obvia: Ver CSS Zen Garden. Si usted me dice que usted puede fácilmente hacer lo mismo con una tabla basada en el diseño (recuerde - el código HTML no cambia), a continuación, por todos los medios el uso de tablas para maquetar.

Otros dos aspectos importantes que son la accesibilidad y SEO.

Tanto importa en qué orden se presenta la información. Usted puede presentar fácilmente en su navegación en la parte superior de la página si tu basada en la mesa de diseño, se coloca en el 3er celda de la fila 2 de la 2ª tabla anidada en la página.

Así que sus respuestas son la facilidad de mantenimiento, accesibilidad y SEO.

No sea perezoso. Hacer las cosas bien y de forma correcta, incluso si son un poco más difícil de aprender.

91voto

Joel Coehoorn Puntos 190579

Ver esta pregunta duplicada.

Una de las cosas que estamos olvidando de que hay accesibilidad. Tabla basada en los diseños de no traducir, así que si usted necesita usar un lector de pantalla, por ejemplo. Y si trabajan para el gobierno, de apoyo accesibles a los navegadores, como los lectores de pantalla pueden ser necesarios.

Yo también creo que subestimar el impacto de algunas de las cosas que se mencionan en la pregunta. Por ejemplo, si usted es el diseñador y el programador, usted no puede tener una apreciación completa de lo bien que separa la presentación del contenido. Pero una vez que usted entra en una tienda en donde son dos funciones distintas de las ventajas comienzan a hacerse más clara.

Si usted sabe lo que está haciendo y tener buenas herramientas, CSS realmente tiene ventajas significativas sobre las tablas para el diseño. Y aunque cada elemento por sí misma no puede justificar el abandono de las tablas, tomados en conjunto es generalmente bueno.

54voto

James Curran Puntos 55356

Por desgracia, CSS Zen Garden no puede ser utilizado como un ejemplo de buena HTML/CSS diseño. Prácticamente la totalidad de sus últimos diseños gráficos para el encabezado de la sección. Estos archivos gráficos son especificados en la CSS.

Por lo tanto, un sitio web cuyo propósito es mostrar la ventaja de mantener el diseño de contenidos que de forma regular se compromete por los INDECIBLES PECADOS de poner el contenido en el diseño. (Si el encabezado de sección en el archivo HTML se fueron a cambiar, el encabezado de sección muestra no).

Que sólo va a demostrar que incluso aquellos que abogan por el estricto DIV Y CSS de la religión, no puede seguir sus propias reglas. Usted puede usar eso como una guía de cómo de cerca les sigue.

Iteramos.com

Iteramos es una comunidad de desarrolladores que busca expandir el conocimiento de la programación mas allá del inglés.
Tenemos una gran cantidad de contenido, y también puedes hacer tus propias preguntas o resolver las de los demás.

Powered by:

X