Como podéis ver en la especificación de CSS2, existe una propiedad CSS llamada table-layout que nos permite especificar al user agent (que para el 99% de nosotros es el navegador, para qué nos vamos a engañar) qué algoritmo debe utilizar a la hora de calcular el tamaño de una tabla para mostrarla. Los posibles valores para esta propiedad son fixed y auto.

table-layout: fixed

Cuando se especifica fixed el navegador deberá utilizar un algoritmo rápido, que calcula el ancho de la tabla basándose en el ancho de las celdas de la primera fila. De este modo, llega con que esta primera fila esté cargada: en ese momento el navegador ya puede determinar el layout de la tabla y pintar sus contenidos.

table-layout: auto

En este caso el navegador puede utilizar cualquier algoritmo, siendo lo más normal que emplee uno que determina el layout de la tabla en función del ancho de sus columnas (de toda la columna, no sólo de las celdas de la primera fila, como en el caso del algorito fixed). En este caso, hasta que no dispone de todo el contenido de la tabla, el navegador no puede determinar su layout definitivo.

Y saber esto… ¿de qué me vale?

Pues para un par de cosas, al menos. La primera y más evidente tiene que ver con la eficiencia. Si tenemos que mostrar grandes tablas de datos (grandes quiere decir grandes, muy grandes, con cientos o miles de filas; ya sé que existe la paginación, pero también sé que hay gente que prefiere no darse por enterada y quiere esas gigantescas tablas en sus aplicaciones), cambiar el algoritmo de auto (su valor por defecto) a fixed puede suponer la diferencia entre que el navegador se cuelgue o podamos ver la tabla.

La segunda ya no es tan evidente, pero en algunas ocasiones puede ser incluso más importante, y tiene que ver con la carga de los datos y su presentación al usuario. En nuestro caso concreto, acordarnos de la existencia de la propiedad table-layout resultó de gran utilidad mientras trabajábamos en la vista de Mendeleweb . Si visitáis la página podréis ver que lo primero que se muestra es una tabla periódica en la que cada celda contiene una foto de algún personaje (“elemento” en la jerga de Mendeleweb). Ahora mismo cada imagen se carga correctamente en su celda, posicionada en el lugar que le corresponde sobre la imagen de fondo, que representa los bordes de la tabla. Pero en las etapas iniciales del desarrollo las imágenes iban apareciendo a medida que se iban cargando y se iban colocando como un acordeón, hasta posicionarse correctamente en su lugar sólo cuando toda la tabla estaba cargada. Evidentemente, esto nos dio una pista muy buena e hizo que la propiedad table-layout viniese a nuestra memoria :o). Con sólo añadir esta propiedad y establecer su valor a fixed en las CSS conseguimos que los “elementos” de la tabla periódica apareciesen desde un primer momento en el lugar que Mendeleiev les asignó.

Lo sentimos, pero los comentarios están cerrados