Tablas

Tabla de contenidos

1. border-collapse
2. border-spacing
3. caption-side
4. display (tablas)
5. empty-cells
6. table-layout

border-collapse

Descripción

Indica el modelo de borde de celdas.

Valores posibles

• collapse: Las celdas adyacentes pierden la separación entre ellas, por lo que comparten sus bordes.
• separate: Aplica a las celdas una separación, por lo que los bordes de estas son independientes.
• inherit: El elemento hereda el valor del elemento padre para esta propiedad.

Valor por defecto

separate.

Aplicable a

Elemento table, y a cualquier elemento al que se haya aplicado display con un valor de table o inline-table.

¿Heredada?

Sí.

Ver ejemplos de los valores de border-collapse.

border-spacing

Descripción

Indica el espacio de relleno entre celdas de una tabla cuando se ha escogido el modelo de bordes separados.

Valores posibles

• Una medida absoluta o relativa. El valor no puede ser negativo.
• inherit: El elemento hereda el valor del elemento padre para esta propiedad.

Valor por defecto

0.

Aplicable a

Elemento table, y a cualquier elemento al que se haya aplicado display con un valor de table o inline-table.

¿Heredada?:

Sí.

Notas

Sólo es aplicable cuando se ha elegido el modelo de borde de celdas separado, es decir, cuando el valor de border-collapse es separate.

Se puede especificar un valor o dos valores separados por un espacio. En el primer caso, la medida se emplea como separación horizontal y vertical. En el segundo, el primer valor se aplica a la separación horizontal, y el segundo a la vertical.

Ver ejemplos de los valores de border-spacing.

caption-side

Descripción

Indica la posición del título de una tabla con respecto a ésta.

Valores posibles

• top: Especifica que el contenido del elemento caption debe aparecer en la parte superior de la tabla.
• bottom: Especifica que el contenido del elemento caption debe aparecer en la parte inferior de la tabla.
• inherit: El elemento hereda el valor del elemento padre para esta propiedad.

Valor por defecto

top

Aplicable a

Elemento caption, o a otro elemento al que se haya aplicado display:table-caption.

¿Heredada?

Sí.

Ver ejemplos de los valores de caption-side.

display (tablas)

En esta sección recojo los valores de display que se refieren a tablas. Faltan los valores relacionados con propiedades generales de cajas y con listas.

Descripción

Aplica a un elemento estilos que hacen que se represente como diversos elementos de una tabla.

Valores posibles

• table: El elemento se representa como una tabla.
• inline-table: El elemento se representa como una tabla, pero en lugar de comportarse como un elemento de bloque se comporta como un elemento en línea.
• table-row-group: El elemento se representa como un grupo de filas.
• table-header-group: El elemento se representa como una cabecera de tabla.
• table-footer-group: El elemento se representa como un pie de tabla.
• table-row: El elemento se representa como una fila de tabla.
• table-column-group: El elemento se representa como un grupo de columnas.
• table-column: : El elemento se representa como una columna de tabla.
• table-cell: El elemento se representa como una celda de tabla.
• table-caption: El elemento se representa como el título de una tabla.

Aplicable a

Todos los elementos.

¿Heredada?

No.

Notas

Como para el caso de display:list-item, el sentido de estas propiedades no es el de sustituir el marcado semántico de un documento HTML o XHTML, sino permitir que se aplique un estilo a elementos de otros lenguajes de marcado, como XML.

Ver un ejemplo de las diversas propiedades de display relacionadas con tablas.

El ejemplo es un archivo .xml con una hoja de estilo asociada, por lo que es posible que los navegadores antiguos no lo interpreten y traten de descargarlo.

empty-cells

Descripción

Indica cómo se deben representar las celdas vacías de una tabla.

Valores posibles

• show: El fondo y los bordes de las celdas vacías deben ser visibles.
• hide: El fondo y los bordes de las celdas vacías deben ser invisibles.
• inherit: El elemento hereda el valor del elemento padre para esta propiedad.

Valor por defecto

show.

Aplicable a

Celdas de tabla, y a elementos a los que se haya aplicado display:table-cell.

¿Heredada?

Sí.

Notas

Según la especificación (inglés), sólo puede aplicarse si se ha elegido border-collapse:separate para la tabla.

Ver ejemplos de los valores de empty-cells.

table-layout

Descripción

Especifica la forma en la que el navegador debe representar las celdas, filas y columnas de una tabla.

Valores posibles

• auto: El agente de usuario emplea su propio algoritmo para calcular los anchos de los elementos de una tabla, una vez que ha cargado todo su contenido.
• fixed: El agente de usuario emplea el algoritmo fijo de representación de tablas descrito por el W3C.
• inherit: El elemento hereda el valor del elemento padre para esta propiedad.

Valor por defecto

auto.

Aplicable a

Elemento table, y a cualquier elemento al que se haya aplicado display con un valor de table o inline-table.

¿Heredada?

No.

Notas

El objetivo de esta propiedad es agilizar el dibujo de una tabla en el agente de usuario. Con el algoritmo fijo, la tabla se dibuja dependiendo del ancho de tabla y de las columnas de su primera celda, independientemente de su contenido. Si se emplea el algoritmo automático del agente de usuario, éste debe esperar a cargar todo el contenido de la tabla para calcular cómo debe dibujarla.

En el algoritmo fijo, el ancho de una tabla se calcula de la siguiente forma:

1. Los anchos definidos para las columnas que no sean auto establecen los anchos de las mismas.
2. Si no se han definido columnas, las celdas de la primera fila con una anchura específica determinan los anchos de las columnas. Si alguna se expande por más de una columna, su ancho total se divide entre el número de columnas, y determina así el ancho de las mismas.
3. Si después de esto quedan columnas a las que no se ha asignado ancho, la diferencia entre el ancho de tabla y el de la suma de las columnas ya asignadas se divide entre las columnas restantes, y esa es su anchura.

Tras todo esto, se calcula el ancho de la tabla:

• Si la suma del ancho de columnas es superior al ancho asignado a la tabla —si éste ha sido especificado—, el ancho de la tabla se amplía hasta que sea el de la suma de las columnas.
• Si el ancho de la tabla es superior al de la suma de los anchos de las columnas, la diferencia se reparte por igual entre las columnas.

Así, el agente de usuario sólo necesita recibir los datos de la primera fila de la tabla para dibujarla. Sin embargo, por ello, hay dos detalle a tener en cuenta:

1. Si en filas posteriores hay más columnas que las que se definen en la primera fila, éstas no se representan.
2. Las celdas no se expanden para abarcar el contenido de las celdas, por lo que cómo se represente éste dependerá del valor asignado a la propiedad overflow de las mismas.

En lo que respecta al algoritmo automático, lo que aparece en la especificación no se considera normativo, pero puede servirnos para hacernos una idea de cómo funcionan los cálculos para una tabla en los navegadores, y orientarnos un poco cuando comprobemos que nuestra hoja de estilo no se aplica como esperamos…:

1. Para cada celda se calculan lo que serían los anchos máximo —el que necesitaría el contenido sin añadir saltos de línea no explícitos en el código— y mínimo —el resultante de distribuir el contenido en varias filas, siendo este ancho el del elemento (por ejemplo, una palabra) que más espacio necesite para mostrarse completo— necesarios. Si la celda tiene asignado un ancho específico, éste se considera el mínimo, pero sólo si es superior al calculado en base al contenido.
2. Para las columnas de la tabla, se asignan también mínimos y máximos. El mínimo es el ancho mayor de los mínimos de las celdas, y el máximo, el mayor de los máximos de las mismas.
3. Si alguna celda ocupa varias columnas —es decir, tiene el atributo span—, el mínimo de la columna correspondiente debe espandirse hasta el mínimo de esa celda.
4. Si existe un colgroup con un ancho específico mayor que el de la suma de los mínimos de las columnas que lo componen, la diferencia se reparte entre esas mismas columnas.

Con todo esto, el cncho de la tabla se establece de la siguiente manera:

• Si la tabla tiene un ancho específico, y éste es menor que la suma de los mínimos de las columnas que la componen, su ancho se amplía hasta igualar ésta. Si el ancho de la tabla es mayor, la diferencia se reparte entre las columnas.
• Si el ancho de la tabla es auto, se emplea como ancho el que sea mayor de los siguientes valores: o bien la suma de los mínimos de las columnas, o bien el ancho del elemento contenedor de la tabla. Si ocurre que la suma de los máximos necesarios para las columnas es menor que el ancho del contenedor, esta suma es el ancho total de la tabla.

Y ya está.

Ver ejemplos de los valores de table-layout.