Maquetación sin tablas

A estas alturas no hará falta explicar la importancia de crear páginas web semánticamente correctas. La utilización de tablas para maquetar es una técnica muy extendida porque visualmente permite situar los elementos de una página web cómodamente, pero semánticamente es totalmente incorrecto usarlas para ese fin.

¿Por qué el uso de tablas para maquetar es un error?

La marca <table> (enlace en inglés) sirve para marcar información tabular, es decir, datos desplegados en tablas, como por ejemplo, los registros de una tabla de una base de datos, o unas estadísticas:

No es correcto, por tanto, marcar como tabla toda una página web para situar elementos, ya que los agentes de usuario interpretarán mal la información cuando necesiten trabajar sobre su significado.

Por ejemplo, un lector de pantalla trata de comunicar con el mayor detalle posible la información que su usuario puede ver. En el caso de la figura 1, el lector diría algo así como: Figura 1. Estadísticas de navegadores. 2005, junio; ie 6 60.7%; ie 5, 2.8%; firefox, 26.3%; 2005, mayo; ie 6, 61.7%; ie 5, 3.1%; firefox, 25.0%. En este caso el agente de usuario interpreta bien la información y el usuario lo entiende. Si esta tabla se utilizara para marcar columnas de una maqueta de una página web, se intuye que los resultados serían bastante imprevisibles y se confundiría al usuario.

Ventajas y desventajas de la maquetación sin tablas

Ventajas

• Reduce el tamaño de los archivos: Cualquier desarrollador sabe que maquetar con tablas llena el documento de marcas table, td, rowspan y colspan. Esto hace crecer el tamaño del archivo más de lo que parece. Fíjate en este comparación de tamaños de archivos (enlace en inglés) hecha por Ed Halloran en su web.
• Agiliza la navegación: El hecho de obtener archivos HTML o XHTML (enlace en inglés) más pequeños, mejora la descarga de la página en el navegador del usuario. Además, como la maquetación sin tablas se hace con archivos CSS, y éstos quedan cacheados, no hace falta descargar esta información en cada página.
• Facilita el mantenimiento: Es más fácil cambiar datos en una página limpia, que una llena de tables, td, rowspan y colspan. Además, la actualización de archivos vía FTP es más rápida.
• Mejora la indexación por los buscadores: Las páginas maquetadas sin tablas son más limpias y fáciles de leer por los buscadores. Esto repercute en una lectura más profunda del documento y una mejor indexación.
• Mejora la accesibilidad: La página sin tablas puede ser leída y comprendida por más usuarios y es más independiente del dispositivo (impresoras, ordenadores antiguos, monitores pequeños, PDA, y otros dispositivos).
• Aumenta la semántica: como se explicó anteriormente, utilizar tablas para lo que no fueron pensadas disminuye la semántica y puede confundir al agente de usuario. Por tanto, no usarlas, aumenta la semántica.

Desventajas

• Implica aprender CSS: Necesitamos aprender este lenguaje para saber cómo situar los elementos en la página.
• Supuesta maquetación más difícil: En realidad maquetar con CSS no es difícil, es muy fácil. El problema hoy en día es que el navegador más popular, Internet Explorer, interpreta mal los estándares y esto complica en ocasiones la maquetación. Existen varias webs especializadas en lidiar lor problemas CSS de Internet Explorer, como por ejemplo, Explorer Exposed! de Position is Everything. Solo la variedad de navegadores - y no el monopolio de Microsoft -, y de sistemas logrará subsanar este problema de compatibilidad y estandarización, y será más fácil maquetar con CSS en el futuro. Por ello, te invito a probar Firefox u Opera.

Si te sientes animado a cambiar y quieres comenzar a maquetar tus páginas web sin tablas, aquí tienes unos enlaces para empezar:

• Diseñorama: Buena página en español.
• Tutorial CSS W3Schools: Tutorial corto y bueno, en inglés.
• Position is Everything: con soluciones a problemas típicos, en inglés.
• Quirksmode para lidiar con problemas típicos, en inglés.
• Listutorial: Maquetación de listas, en inglés.
• Kinkamono y www.pmob.co.uk: Plantillas CSS de maquetaciones típicas con tablas, en inglés.
• A List Apart, en inglés.
• Ovillo en del.icio.us: recopilación de enlaces aportados por la lista de distribución de Ovillo.
• My del.icio.us: mis enlaces en del.icio.us sobre CSS.

Actualización: Como podéis ver en los comentarios, corsaria anota otro enlace a otra página de plantillas CSS.

servido por gigo 9 comentarios compártelo