Tablas y divisiones en HTML y CSS

[2002-11-10]

Tablas como estructura

Las tablas (elementos table y subsidiarios de HTML) no fueron pensadas para la presentación estructural, sino para el concepto propio de tabla en el sentido de edición de documentos, es decir, series de datos dispuestos en filas y columnas (las series pueden ser grandes o no, pero lo normal es que los datos, o sea, los contenidos de las celdas, sean reducidos): una tabla de distancias a playas paradisíacas, una tabla de temperaturas medias en Vladivostok y cosas por el estilo. Venga, va, para un ejemplo me decanto por la primera:

Aprovecho para presumir un rato: he estado en todas. Puedes leer mis comentarios (y ver todas las imágenes juntas) en el apartado de la página de fotos. Las distancias son aproximadas en línea recta (¿recta?), y se han calculado con ayuda de este sitio.

¿Cuál es el problema de usar el elemento table de forma degenerada para estructurar el contenido? Pues que normalmente, o por lo menos hace no mucho tiempo, los navegadores no presentan una tabla hasta que la han obtenido completamente. Por ejemplo, lo que estás leyendo ahora es una casilla de la tabla que llamaba "cuerpo". Como tengo mucho rollo, el contenido de esta casilla resulta ser bastante grande.

Si la conexión a la red de redes no es muy potable, el navegador va recogiendo poco a poco este contenido, pero aunque tenga un porcentaje grande, no podrá mostrarlo hasta que lo tenga todo, solo vale el cien por cien. Como resultado, el lector se queda esperando ante una pantalla casi vacía, sin posibilidad de ir leyendo lo que ya se ha recogido. Y esto la verdad es que hace años era efectivamente una auténtica pesadez, me cabreaba muchísimo. Creo que ahora los navegadores usan algún otro método para la presentación de tablas que mitiga este problema, pero solo es una impresión intuitiva, me gustaría que alguien me lo ratificara o refutara.

En este artículo de Apple Internet Developer puedes encontrar algunas otras razones, junto con numerosas soluciones usando divisiones (que desarrollo luego) y hojas de estilo. Este otro artículo también comenta algo del tema. En resumidas cuentas, las alternativas disponibles son dos, marcos y divisiones, que examinamos a continuación.

[2002-11-10]

Marcos o frames

Los marcos o frames constituyen posiblemente el elemento de HTML que más visceralmente odio.

El problema principal con los marcos es que no son "transparentes". ¿Te has preguntado por qué en algunos sitios pinchas y pinchas y te cansas de pinchar, y sin embargo la dirección que te marca el navegador es siempre la misma? Pues ya sabes la razón. Ahora, intenta guardar en tu lista de direcciones una página a la que has llegado después de, pongamos, ocho pinchazos. ¿Cuál te guarda? La principal. La siguiente vez que vayas, otra vez a seguir los ocho enlaces (10 minutos y las telefónicas haciendo el agosto contigo).

Vale, encuentras un método para finalmente conseguir el enlace de la página que te interesaba, pero cuando lo recuperas pueden ocurrir dos cosas: o no te deja verlo sin más o no te muestra el resto de marcos, que por ejemplo, tenían una barra de navegación que te interesa seguir después de acabar con esta página. Total, otra vez a soltar más euros.

[2002-11-10]

Divisiones

Las divisiones (elemento div de HTML) intentan resolver este problema. En la estructura que te contado antes de mis páginas, cada parte sería una división. Ahora, con la ayuda de las hojas de estilo CSS uno puede, en teoría, colocar las divisiones en el lugar adecuado (encabezado, izquierda, derecha, abajo).

La explicación de las formas de posicionamiento de elementos (el llamado box model) en el documento original de CSS 2 es uno de los más crípticos de todo el estándar. Este otro documento puede ser mejor digerido, creo yo.

Por otro lado, he visitado varias páginas con numerosos ejemplos de estructuras, que incluyen las especificaciones de estilo necesarias para conseguirlas:

• Tableless layout HOWTO (Dominique Hazaël-Massieux)
• Climb to the Stars! (Stephzilla's website) - Coding (CSS layouts: tearing out the tables)
• glish.com : CSS layout techniques
• the noodle incident: box lessons
• The Layout Reservoir - BlueRobot

Total, intenté alguna de estas soluciones para ver si se podía adaptar a mi estructura. A primera vista, parecía que no iba a ser difícil, pero el caso es que debo ser un tanto paquete, porque no conseguí exactamente lo que yo quería. Pero de todas maneras, aunque sigo pensando que es cierto que las tablas no deberían ser usadas para estructurar una página, me parece que la solución que aporta el binomio divisiones y hojas de estilo sufre ciertas dificultades.

Veamos la estructura de Climb to the Stars! (Stephzilla's website). Parece que la mía es un calco: hay un encabezado, un cuerpo (con tres columnas) y un pie. Sin embargo, hay un detalle importante, si uno revisa su hoja de estilo: la altura de la división de encabezado es fija (concretamente 70 px, o sea, 70 pixels). Generalmente, dar valores absolutos para cualquier cosa en una hoja de estilos solo significa una cosa: problemas. Usa tu navegador en la página anterior para que el cuerpo de la letra (o sea, el tamaño) sea muy grande, pero vamos, enorme (yo lo pongo al 300 por ciento, por ejemplo). ¿Ves qué pasa con el encabezado? Pues o bien no ves todo el texto o bien se desborda por abajo, con lo que se mezcla con el contenido. Ahora haz lo mismo con mi página. No hay desbordamiento, todo está en su sitio.

Debería haber una forma de indicar que las divisiones de contenido se colocaran debajo de la división de encabezado, independientemente de lo que ocupara esta en altura. Con tablas esto es tirado, como ves, y desde el punto de vista logíco, debería ser igual de fácil con divisiones. Pues yo no he encontrado nadie que me diga cómo hacerlo, y sin poder asegurarlo científicamente, pienso que hoy por hoy no es posible. Por lo tanto, de momento lo considero un gran defecto de esta solución, y por eso sigo con tablas.

Otra manera de examinar lo bueno o malo que es un diseño es disminuyendo progresivamente el tamaño de la ventana del navegador (más o menos es como probar una resolución de pantalla más baja, porque no todo el mundo tiene la pantalla de 32 pulgadas con 2478 por 1892 pixels que tengo yo). Yo creo que mis páginas no se comportan mal en esta prueba, ¿no? Hay que decir que, esta vez, en el sitio Climb to the Stars! (Stephzilla's website), esto sí funciona bastante bien, precisamente porque el tamaño de las columnas no se ha dado de forma absoluta, sino en porcentajes: de esa manera, según el tamaño de la ventana, el navegador es capaz de calcular el ancho de cada columna y no perder lateralmente (hasta una anchura mínima, claro) ninguna de ellas.

[2002-11-10]

El futuro

El problema anterior no es, a mi modo de ver, más que un síntoma de que hay algo que no va bien en las hojas de estilo CSS 2, por lo menos en el tema de posicionamiento de divisiones.

Hay que darse cuenta que, con las tablas, lo que se hace por defecto es muchas veces lo que mejor funciona. Mira la tabla con el encabezado de mi página: tiene una fila y dos columnas, la primera para la imagen con mi anagrama, y la segunda para el título y los enlaces locales. ¿Tengo que dar una anchura, aunque sea relativa, para cada columna? No: cuando el navegador obtiene el contenido de las celdas, calcula lo que ocupan, y ajusta el tamaño de las celdas a ese contenido, automáticamente. De esta forma, cualquiera que sea el cuerpo de la letra o la anchura de la ventana del navegador, se ve todo.

Con esta solución, la especificación de estilo es mínima. Pienso que cualquier alternativa para evitar las tablas como estructura tiene que cumplir, para empezar, este requisito: simplicidad. Si no, la solución de las tablas seguirá imperando.

En el W3C parece que hay actividad sobre este tema, tanto en lo referente al lenguaje de marcado como en lo relativo a los estilos. En el caso de XHTML 2.0 parece que hay ya alguna novedad (elementos section y h), aunque no sé si van en el camino comentado. En cualquier caso, la mala noticia es que no parece que vaya a haber una recomendación definitiva antes de dos años, así que mejor no confiar mucho en el tema.

En cuanto a los estilos, sin embargo, hay una novedad que yo creo que es significativa, que es la presentación en columnas. Tengo que leerlo con más detenimiento, pero a primera vista parece que puede ser una solución a las dificultades que he planteado. Confío en que no haya que esperar mucho para ver este asunto.