sencilla - pagina web html codigo
¿Por qué el uso de tablas para el diseño del sitio web es tan malvado? (14)
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 cuadrícula / tabla, la disponibilidad de table, table-row, table-cell, table-caption, table-column, table-row-group, etc., como propiedades de CSS facilitará implementación de diseño significativamente.
Este artículo tiene una descripción detallada.
Soy un desarrollador de motores Winforms y de negocios 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 de CSS se utilicen para manejar el diseño, y si es así, debería ser realmente un problema en las páginas que está bastante seguro de que permanecerán estáticas, o simplemente se considera ''feo''?
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.
Existe una gran cantidad de 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.
En teoría, 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.
Hay un artículo bastante bueno en Sitepoint 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.
Honestamente, la multitud anti-mesa a menudo es culpable de ser simplemente nazis estándares. 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 nunca se supuso que HTML fuera para el diseño, ¿por qué tenemos <center>, <b>, <u> o <i>? ¿Por qué no tenemos una etiqueta <story> 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.
Honestamente, no te preocupes tanto por usar 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.
La idea es marcar el contenido / significado de la página es una mejor opción, no solo porque hace que sea fácilmente modificable y editable, sino también (posiblemente más importante) porque mejora la accesibilidad, para quienes utilizan lectores de pantalla, etc. (y para los motores de búsqueda!). Lee Sumérgete en la accesibilidad en algún momento. [Y si tiene datos tabulares, debe usar una tabla, por supuesto.]
Aunque "intentar usar CSS, no tablas, para el diseño" es una regla muy importante que debes tratar de seguir tanto como sea posible, en última instancia, "hacer lo correcto" tiene algún costo, y cuando es demasiado alto, deberías reconsidera tus prioridades Ver http://giveupandusetables.com/
La mayoría de las ventajas (más rápido, no spacer.gif, accesibilidad, contenido frente a marcado, etc.) ya se mencionaron, pero me sorprende que nadie mencione que CSS puede hacer cosas que las tablas simplemente no pueden o al menos son 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 puedes diseñar tus mesas ...
El problema es que falta soporte en 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.
Puede que esto no sea el correcto en el tema, pero el problema más frecuente que tengo con los diseños de CSS es que pueden ser difíciles de configurar para que siempre estiren el nodo principal en lugar de simplemente 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.
Recomiendo leer el libro Diseño con estándares web . Se adapta a diseñadores, desarrolladores y personas con un rol más orientado a los negocios.
Uno de los principales puntos de crítica de los diseños basados en tablas es que son rígidos . 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 podría 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 usar para crear un diseño que se verá bien (y similar, pero no igual) en cualquier tamaño de pantalla / 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 aún tiene un papel que desempeñar en los diseños impulsados por CSS: se debe usar 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.
Vale la pena mencionar que las etiquetas <table> todavía se usan legítimamente 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.
- Carga más lenta
- Semánticamente incorrecto
Hay un número de 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.
Aquí hay algunos puntos que responden la pregunta con más detalle
Algunos puntos adicionales:
No seas fanático al respecto. 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 desastre profundamente anidado que solía ser la única forma 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 allí 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%.