| Definición | Establece el algoritmo utilizado para mostrar la tabla |
|---|---|
| Valores permitidos | Uno y sólo uno de los siguientes valores:
|
| Valor inicial | auto |
| Se aplica a | Los elementos de tipo tabla |
| Válida en | medios visuales |
| Se hereda | no |
| Definición en el estándar | w3.org/TR/CSS21/tables.html#propdef-table_layout |
Ejemplos de uso
La propiedad table-layout indica el algoritmo que debe utilizar el navegador para mostrar la tabla. En el estándar CSS 2.1 sólo se definen dos algoritmos: automático y fijo.
En el modelo de tabla fijo (valor fixed) la anchura de la tabla y de cada columna es independiente de su contenido. El navegador sólo tiene en cuenta las propiedades width, padding, border y border-spacing para determinar la anchura de cada columna y de la tabla completa.
En el modelo de tabla automático (valor auto) la anchura de las columnas depende de su contenido. El navegador debe disponer de todos los contenidos de la tabla entera para poder aplicar un cálculo complejo que determina la anchura de cada columna.
El siguiente ejemplo muestra dos tablas idénticas que utilizan algoritmos diferentes:
| Celda 1 - 1 | Celda 1 - 2 | Celda 1 - 3 |
| Celda 2 - 1 | Celda 2 - 2 - Esta celda tiene un contenido mucho más largo que las demás | Celda 2 - 3 |
| Celda 3 - 1 | Celda 3 - 2 | Celda 3 - 3 |
| Celda 1 - 1 | Celda 1 - 2 | Celda 1 - 3 |
| Celda 2 - 1 | Celda 2 - 2 - Esta celda tiene un contenido mucho más largo que las demás | Celda 2 - 3 |
| Celda 3 - 1 | Celda 3 - 2 | Celda 3 - 3 |
La primera tabla del ejemplo anterior sigue el algoritmo auto. Como el contenido de una celda de datos es mucho más largo que el resto, la anchura de esa columna es más grande que el resto de columnas.
Por su parte, la segunda tabla del ejemplo anterior sigue el algoritmo fixed. Como la anchura de las columnas es independiente de su contenido y como ninguna columna ha establecido explícitamente su anchura, el navegador reparte la anchura de la tabla a partes iguales entre las tres columnas. Por ese motivo, la segunda tabla presenta una estructura de rejilla mucho más regular que la primera.
El modelo fixed requiere muchos menos cálculos que el modelo auto. Además, como tampoco es necesario descargar todos los contenidos de la tabla antes de mostrarla, el modelo fixed es más rápido que el modelo auto, sobre todo en las tablas muy complejas.
En el modelo fixed, la estructura de la tabla está determinada por la estructura de su primera fila. Si las siguientes filas tienen más columnas que la primera, los navegadores ignoran todas las columnas sobrantes y no las muestran.
En el estándar CSS 2.1 se detallan los cálculos completos de cada algoritmo: