El diseño web sin tablas (o diseño web sin tablas ) es un método de diseño web que evita el uso de tablas HTML con fines de control del diseño de la página . En lugar de tablas HTML, se utilizan lenguajes de hojas de estilo como las hojas de estilo en cascada (CSS) para organizar elementos y texto en una página web .
HTML es un lenguaje de marcado cuya presentación visual inicialmente se dejaba a criterio del usuario. Sin embargo, a medida que Internet se expandió desde el mundo académico y de investigación hacia la corriente principal a mediados de la década de 1990 y se volvió más orientada a los medios, los diseñadores gráficos buscaron formas de controlar la apariencia visual de sus páginas web. Como lo popularizó especialmente el diseñador David Siegel en su libro Creando sitios web increíbles , se utilizaron tablas y espaciadores (generalmente imágenes GIF transparentes de un solo píxel con ancho, alto o márgenes explícitamente especificados) para crear y mantener diseños de página. [1]
A finales de la década de 1990 llegaron al mercado los primeros editores WYSIWYG razonablemente potentes, lo que significó que los diseñadores web ya no necesitaban conocimientos técnicos de HTML para crear páginas web. [2] Dichos editores fomentaron indirectamente el uso extensivo de tablas anidadas para posicionar elementos de diseño. A medida que los diseñadores editaban sus documentos en estos editores, se agregaban al documento código innecesario y elementos vacíos. Además, era probable que los diseñadores no cualificados utilizaran más tablas de las necesarias cuando utilizaban un editor WYSIWYG. Esta práctica con frecuencia generaba muchas tablas anidadas dentro de tablas, así como tablas con filas y columnas innecesarias. El uso de editores gráficos con herramientas de corte que generan HTML e imágenes directamente también promovió un código deficiente con tablas que a menudo tenían muchas filas de 1 píxel de alto o ancho. A veces se utilizaban muchas más líneas de código para representar el contenido que el contenido real.
La dependencia de tablas para fines de diseño causó una serie de problemas. Muchas páginas web se diseñaron con tablas anidadas dentro de tablas, lo que dio como resultado documentos HTML de gran tamaño que utilizan más ancho de banda que los documentos con un formato más simple. Además, cuando se linealiza un diseño basado en tablas, por ejemplo cuando lo analiza un lector de pantalla o un motor de búsqueda, el orden resultante del contenido puede ser algo confuso y confuso.
Las hojas de estilo en cascada (CSS) se desarrollaron para mejorar la separación entre diseño y contenido , y volver a una organización semántica del contenido en la Web. El término "diseño sin tablas" implica el uso de CSS en lugar de tablas de diseño para colocar elementos HTML en la página. Las tablas HTML todavía tienen su lugar legítimo al presentar información tabular dentro de las páginas web, [3] y, a veces, también se siguen utilizando como dispositivos de diseño. en situaciones en las que el soporte de CSS es deficiente o problemático, como centrar verticalmente un elemento. Otra área donde todavía se utilizan tablas son los correos electrónicos, porque muchos clientes de correo electrónico populares no se han mantenido al día con la representación HTML y CSS moderna. Los correos electrónicos complejos pierden parte de su alineación estructural y creativa.
La especificación CSS1 fue publicada en diciembre de 1996 por el W3C [4] con el objetivo de mejorar la accesibilidad web y enfatizar la separación de los detalles de presentación en las hojas de estilo del contenido semántico en los documentos HTML . CSS2 en mayo de 1998 (posteriormente revisado en CSS 2.1 y CSS 2.2) amplió CSS1 con funciones de posicionamiento y diseño de tablas.
La preferencia por utilizar tablas HTML en lugar de CSS para controlar el diseño de páginas web completas se debió a varias razones:
Los hitos en la adopción de diseños basados en CSS incluyen la campaña de actualización del navegador del Web Standards Project de febrero de 2001 y el rediseño simultáneo de la revista de diseño web A List Apart , seguido del rediseño de Wired en 2002. [5] The CSS Zen Garden Al sitio web, lanzado en 2003, se le atribuye la popularización de los diseños sin tablas. [6]
El propósito previsto y semántico de las tablas HTML radica en presentar datos tabulares [3] [7] en lugar de diseñar páginas. [8]
Los beneficios de usar CSS para el diseño de páginas incluyen una mejor accesibilidad de la información a una variedad más amplia de usuarios, utilizando una amplia variedad de agentes de usuario . Se ahorra ancho de banda debido a que un gran número de etiquetas semánticamente sin significado se <table>eliminan de docenas de páginas, dejando menos encabezados, párrafos y listas, pero más significativos. Las instrucciones de diseño se transfieren a hojas de estilo CSS para todo el sitio, que se pueden descargar una vez y almacenar en caché para su reutilización mientras cada visitante navega por el sitio. Los sitios pueden volverse más fáciles de mantener ya que se puede cambiar el estilo o la marca de todo el sitio en una sola pasada simplemente alterando el marcado del CSS específico, afectando a todas las páginas que dependen de esa hoja de estilo. Se puede agregar nuevo contenido HTML de tal manera que el CSS existente le aplique inmediatamente reglas de diseño consistentes sin ningún esfuerzo adicional.<tr><td>
Debido al rápido crecimiento de Internet, la ampliación de la legislación sobre discriminación por discapacidad y el creciente uso de teléfonos móviles y PDA , es necesario que el contenido web sea accesible para los usuarios que utilizan una amplia variedad de dispositivos más allá del ecosistema relativamente uniforme de computadoras de escritorio y monitores CRT. la web se hizo popular por primera vez en. El diseño web sin tablas mejora considerablemente la accesibilidad web a este respecto, ya que las tablas demasiado anchas para una pantalla deben desplazarse hacia los lados para leerlas en su totalidad, mientras que el texto puede moverse.
Los lectores de pantalla y los dispositivos braille tienen menos problemas con los diseños sin mesa porque siguen una estructura lógica. Lo mismo se aplica a los rastreadores web de los motores de búsqueda , los agentes de software que la mayoría de los editores de sitios web esperan que encuentren sus páginas, las clasifiquen con precisión y así permitan a los usuarios potenciales encontrarlas fácilmente en las búsquedas adecuadas.
Como resultado de la separación de diseño (CSS) y estructura (HTML), también es posible proporcionar diferentes diseños para diferentes dispositivos, por ejemplo, dispositivos portátiles , teléfonos móviles, etc. También es posible especificar una hoja de estilo diferente para impresión. por ejemplo, para ocultar o modificar la apariencia de anuncios o elementos de navegación que sean irrelevantes y molestos en la versión imprimible de la página.
La directriz no. 3 establece "use marcas y hojas de estilo y hágalo correctamente". [9] El punto de control 3.3 de la directriz, un punto de control de prioridad 2, dice "use hojas de estilo para controlar el diseño y la presentación". [10]
El diseño sin tablas produce páginas web con menos etiquetas HTML utilizadas únicamente para posicionar el contenido. Esto normalmente significa que las páginas mismas se vuelven más pequeñas para descargar. La filosofía implica que todas las instrucciones relativas al diseño y la ubicación se trasladen a hojas de estilo externas. De acuerdo con las capacidades básicas de HTTP , como rara vez cambian y se aplican en común a muchas páginas web, se almacenarán en caché y se reutilizarán después de la primera descarga. Esto reduce aún más el ancho de banda y los tiempos de descarga en todo el sitio. [11] [12]
El mantenimiento de un sitio web puede requerir cambios frecuentes, tanto pequeños como grandes, en el estilo visual de un sitio web, según el propósito del sitio. En el diseño basado en tablas, el diseño es parte del propio HTML. Como tal, sin la ayuda de editores visuales basados en plantillas, como los editores HTML , cambiar el diseño posicional de los elementos en un sitio completo puede requerir un gran esfuerzo, dependiendo de la cantidad de cambios repetitivos necesarios. Incluso el empleo de sed o utilidades globales similares de búsqueda y reemplazo no puede aliviar el problema por completo.
En el diseño sin tablas que utiliza CSS, la información de diseño puede residir en un documento CSS. Debido a que la información de diseño puede estar centralizada, es posible que estos cambios se puedan realizar de forma rápida y global de forma predeterminada. Es posible que no sea necesario ajustar los archivos HTML al realizar cambios en el diseño.
Además, debido a que la información de diseño puede almacenarse externamente al HTML, puede ser bastante fácil agregar contenido nuevo en un diseño sin tablas, ya sea modificando una página existente o agregando una página nueva. Por el contrario, sin dicho diseño, el diseño de cada página puede requerir un cambio manual de cada instancia que requiere más tiempo o el uso de utilidades globales de búsqueda y reemplazo. Sin embargo, los propietarios de sitios a menudo quieren que determinadas páginas sean diferentes de otras del sitio, ya sea por un período corto o largo. Esto a menudo requerirá el desarrollo de una hoja de estilo separada para esa página. Sin embargo, el contenido de la página (o plantilla) normalmente puede permanecer inalterado, lo que no ocurre en un diseño basado en tablas.
Microsoft Office FrontPage se lanzó como un paquete de la versión 1997 de Microsoft Office, fue la primera vez que un editor y editor HTML WYSIWYG comercial y robusto estuvo disponible para que lo usara cada persona... Cuando una página web construida a partir de el software WYSIWYG MS FrontPage se ejecutaría con un FPSE backend instalado y disfrutaría de toda la potencia que un tecnólogo podría desarrollar escribiendo código HTML desde cero. Los diseñadores web ya no necesitaban conocimientos técnicos de HTML para crear páginas web.
Directriz 3. Utilice marcas y hojas de estilo y hágalo correctamente.
Utilice hojas de estilo para controlar el diseño y la presentación.
...además de las ventajas organizativas descritas anteriormente, el navegador tiene menos código para descargar. En sitios muy diseñados o con cientos de páginas o más, este tiempo de descarga reducido puede tener un impacto significativo tanto en la experiencia del usuario como en los costos de ancho de banda.