Distribución del espacio en tablas

Las tablas en HTML siempre se dibujarán tan angostas como el contenido de cada celda lo permita. Esta regla siempre se cumplirá mientras no establezcamos un ancho especifico para las celdas o para la tabla en general. Si establecemos un ancho para la tabla entonces cada columna contará con espacio extra. Pero... ¿cómo se divide éste espacio extra?, ¿cuánto espacio le toca a cada columna de la tabla?. Para ejemplificar, comencemos con el siguiente código, que dibuja una tabla con tres columnas y en cada una de las celdas se colocaron imágenes, de 10, 20 y 30 pixeles. Los estilos de colores sólo nos servirán para diferenciar el espacio dedicado a la tabla y a cada celda.

<table> <tr> <td> <img src="cuadro10px.gif" /></td> <td> <img src="cuadro20px.gif" /></td> <td> <img src="cuadro30px.gif" /></td> </tr> </table> <style> table { background-color: #99CCFF; } td { background-color: #FFFFCC; } </style>

En prácticamente los tres principales navegadores el resultado es exactamente el mismo: una tabla con tres celdas, donde cada celda se ensancha justo lo suficiente para presentar el ancho de la imagen que contiene. La suma del ancho de las tres imágenes nos daría 60 pixeles, pero la tabla mide 74 pixeles debido a las propiedades por default que le pone el navegador a la tabla (ver el artículo de por qué el ancho de una tabla no es la suma de los anchos de cada celda).

Sabemos entonces que el ancho mínimo que podríamos darle a nuestra tabla serían 74 pixeles. Ahora vamos a sumarle a esos 74 pixeles, unos 120 pixeles más para ver cómo se distribuyen esos 120 pixeles extras entre las tres celdas. Entonces el ancho de la tabla lo vamos a poner como 74px + 120px = 194px.

Antes de ver el ejemplo de qué es lo que pasa al poner un ancho de 194 pixeles, es muy importante recalcar que el modo en el que la tabla distribuya esos 120 pixeles va a depender del "modo de layout" de la tabla, es decir en el valor de la propiedad table-layout que tenga la tabla.

table-layout

La propiedad table-layout puede tener dos posibles valores:

• auto - Este es el valor por default. En este modo la tabla usa un algoritmo para establecer el ancho de cada una de las columnas dependiendo del contenido de las celdas en las columnas.
• fixed -En este modo, la tabla calcula el ancho de cada columna dependiendo del ancho especificado a la tabla, o sumando los anchos de sus celdas. Aquí NO importa el contenido de las celdas.

table-layout: auto;

Veamos primero el valor por default. Según la definición, los 120 pixeles de espacio sobrante se distribuirán tomando en cuenta el contenido de cada celda. Si nuestras celdas tienen imagenes de 10, 20 y 30 pixeles, podemos pensar entonces que los 120 pixeles se dividirán proporcionalmente, es decir 1/6 para la primer celda, 2/6 para la segunda celda y 3/6 para la tercer celda.

En el siguiente ejemplo estoy estableciendo el ancho de la tabla a los 194 pixeles que comentamos antes y además estoy explícitamente poniendo el table-layout en modo 'auto'. Ésto último no es necesario, pues 'auto' es el valor por default.

<table> <tr> <td> <img src="cuadro10px.gif" /></td> <td> <img src="cuadro20px.gif" /></td> <td> <img src="cuadro30px.gif" /></td> </tr> </table> <style> table { background-color: #99CCFF; table-layout: auto; width: 194px; } td { background-color: #FFFFCC; } </style>

¡¿Qué pasó?!... se supone que el espacio sobrante tendría que haberse distribuido proporcionalmente al ancho de cada celda. Resulta que tenemos más espacio en la celda con el cuadro de 10 pixeles y menos de los 60 que esperabamos en la celda con el cuadro de 30 pixeles. La celda del medio parece haber cumplido con nuestras expectativas.

Para serles sincero, a mi también me tomó por sorpresa esta variación en las medidas, y estudiando un poco más sobre los algoritmos que calculan los anchos en las columnas me dí cuenta que mi acercamiento fué demasiado simplista. El ancho de cada columna se calcula más bien siguiendo una fórmula que toma en cuenta el porcentaje que representa el contenido de la celda (incluyendo el padding) en relación a la suma total de los anchos de todas las columnas. Este porcentaje es el porcentaje de espacio que se lleva la celda a la hora de la repartición de espacio extra.

Primero sumamos el ancho mínimo que requiere cada celda para presentarse con su contenido: 12 + 22 + 32 = 66 pixeles. Éstos 66 pixeles son el 100 % del ancho de todas las columnas. Después sacamos el porcentaje de estos 66 px que representa el ancho de cada celda.

El espacio disponible se reparte de acuerdo a los porcentajes que nos representó cada celda. El navegador redondea automáticamente los pixeles para que el ajuste sea exacto.

Por último, el espacio se le añade a cada una de las celdas que corresponda. Ahora sí nos coincide la distribución de los 120 pixeles extras con la proporción con la que el navegador los repartió. 

Ya mencionamos que el modo 'auto' toma en cuenta el contenido de las celdas para calcular los anchos de columna, y por ésta misma razón, el navegador requiere que se descargue toda la tabla para empezar a renderizarla. El navegador no puede saber qué ancho tendrá cada columna, mientras no conozca el contenido de TODAS las celdas de la tabla. Con tablas pequeñas, ésto no representará mayor problema, pero con tablas muy grandes, es posible que el navegador se tarde algo de tiempo en presentarlas.

table-layout: fixed;

La distribución del espacio extra cuando el modo de la tabla esta en 'fixed' es mucho más directa: simplemente el espacio disponible se divide de forma que cada celda termine con el mismo ancho. En este modo, los 120 pixeles sobrantes de nuestro ejemplo se repartirán de forma que todas las celdas terminen de 60 pixeles de ancho. Esto es lo mismo que decir que al ancho de la tabla: 194 px; le restamos los 14 pixeles que requiere el cellpadding y el cellspacing: 180 px;  y luego lo dividimos entre las tres celdas: 60 px c/u.

En ocasiones, la división no podrá ser exacta, entonces el navegador reparte el residuo de la división entre las celdas.

<table> <tr> <td> <img src="cuadro10px.gif" /></td> <td> <img src="cuadro20px.gif" /></td> <td> <img src="cuadro30px.gif" /></td> </tr> </table> <style> table { background-color: #99CCFF; table-layout: fixed; width: 194px; } td { background-color: #FFFFCC; } </style>

En esta modalidad, el ancho de la tabla se calcula de la siguiente forma:

1. Si la tabla no especifica ancho, pero existen elementos <col> en la tabla que si lo hagan, entonces las columnas tomarán el ancho especificado en su correspondiente elemento <col>.
2. Si la tabla no especifica ancho, pero las celdas de la primer línea tienen algún ancho, entonces toda la columna toma el ancho especificado en esta primer celda.
3. Si la tabla tiene ancho especificado y las celdas no, entonces el ancho de la tabla se respeta y se divide de forma equitativa para cada columna. Si hay alguna celda que contenga imagenes o cadenas de texto cuyo ancho sea mayor que la columna, entonces el contenido de esa celda se desbordará según la propiedad 'overflow' que tengan las celdas.

Con el modo 'fixed', el navegador no necesita descargar el contenido de las celdas para comenzar a renderizarse. Con sólo saber las propiedades de la tabla y leyendo la primer línea de celdas, el navegador ya es capaz de comenzar a dibujar la tabla. Por este motivo se recomienda esta opción para tablas con muchas líneas.

El objetivo de este artículo es entender la distribución que se hace del espacio en las tablas, así que lo de los elementos <col> y lo de la propiedad 'overflow' lo dejaremos para otro artículo. A lo mejor en un futuro extenderé este artículo con ejemplos que presenten tablas conteniendo texto en lugar de imágenes. Sin embargo, para fines ilustrativos, el ejemplo de las imagenes era mucho más claro. Ahora podemos hacernos una idea de que tan anchas quedarán las columnas de nuestras tablas.