Tablas

En esta lección aprenderás las propiedades que se pueden aplicar a una tabla:

Posición de la leyenda: caption-side

La propiedad caption-side permite elegir la posición de la leyenda (<caption>) con respecto a la tabla. Internet Explorer no es capaz de interpretar esta propiedad.

Nota: En la recomendación CSS 2.1 (actualmente -octubre de 2007- en fase de borrador) se han eliminado los valores right y left.

	caption { caption-side: top; }	Esto es la leyenda Casilla 1 Casilla 2 Casilla 3 Casilla 4
	caption { caption-side: bottom; }	Esto es la leyenda Casilla 1 Casilla 2 Casilla 3 Casilla 4
	caption { caption-side: left; }	Esto es la leyenda Casilla 1 Casilla 2 Casilla 3 Casilla 4
	caption { caption-side: right; }	Esto es la leyenda Casilla 1 Casilla 2 Casilla 3 Casilla 4

Volver al índice

Centrar una tabla

Nota: Internet Explorer 6 no reconocía estas propiedades, como se explica en la página de diferencias IE6/IE7.

Para centrar una tabla horizontalmente en la página, se deben establecer las dos propiedades margin-left y margin-right con el valor auto.

table { margin-left: auto; margin-right: auto; }

Casilla 1, con más texto Casilla 2 Casilla 3 Casilla 4, con más texto

(Para mirar): Creo haber leido en algún sitio que para centrar una tabla también se podían poner dos valores iguales en las dos propiedades margin-left y margin-right, pero parece que no es cierto:

table { margin-left: 1px; margin-right: 1px; }

Casilla 1, con más texto Casilla 2 Casilla 3 Casilla 4, con más texto

En Firefox, para centrar la leyenda hace falta establecer también las propiedades margin-left y margin-right para la leyenda.

	table { margin-left: auto; margin-right: auto; } caption { background-color: lightblue; }	Esto es la leyenda Casilla 1, con más texto Casilla 2 Casilla 3 Casilla 4, con más texto
	table { margin-left: auto; margin-right: auto; } caption { margin-left: auto; margin-right: auto;     background-color: lightblue; }	Esto es la leyenda Casilla 1, con más texto Casilla 2 Casilla 3 Casilla 4, con más texto

La alineación del contenido de la leyenda se interpreta dentro del espacio que ocupa la leyenda (que suele coincidir con el ancho de la tabla).

	table { margin-left: auto; margin-right: auto; } caption { text-align: right; background-color: lightblue; }	Esto es la leyenda Casilla 1, con más texto Casilla 2 Casilla 3 Casilla 4, con más texto
	table { margin-left: auto; margin-right: auto; } caption { margin-left: auto; margin-right: auto;     text-align: right; background-color: lightblue; }	Esto es la leyenda Casilla 1, con más texto Casilla 2 Casilla 3 Casilla 4, con más texto

Volver al índice

Modos de bordes: border-collapse

Las tablas tienen dos modos de presentación de los bordes que se selecciona con la propiedad border-collapse: separado (separate) y colapsado (collapse). En el modo separado existe un hueco entre los bordes de cada casilla, mientras que en el modo colapsado los bordes se superponen. Si no se establece el modo de presentación, ambos navegadores aplican el modo separado.

	table { }	Esto es la leyenda Casilla 1 Casilla 2 Casilla 3 Casilla 4
	table { border-collapse: collapse; }	Esto es la leyenda Casilla 1 Casilla 2 Casilla 3 Casilla 4
	table { border-collapse: separate; }	Esto es la leyenda Casilla 1 Casilla 2 Casilla 3 Casilla 4

En la página de Modos de bordes de tablas se explican con detalle estos modos de funcionamiento.

Volver al índice

Bordes de casillas vacías: empty-cells

La propiedad empty-cells permite establecer si se muestran o no los bordes de las casillas vacías cuando se utiliza el modo de bordes separado. Internet Explorer no es capaz de interpretar esta propiedad y no muestra nunca los bordes de las casilla vacías. Ni Firefox ni Internet Explorer aplican la propiedad cuando el modo de bordes es colapsado.

	table { empty-cells: show; }	Esto es la leyenda Casilla 1 Casilla 4
	table { empty-cells: hide; }	Esto es la leyenda Casilla 1 Casilla 4
	table { empty-cells: hide; border-collapse: collapse;}	Esto es la leyenda Casilla 1 Casilla 4

Si se han escrito espacios duros en la celda (en Amaya, mediante el atajo de teclado Ctrl+espacio) para que Internet Explorer muestre el borde de las celdas, la propiedad empty-cells no tiene efecto, ya que la celda no está vacía.

table { empty-cells: hide; }

La celda de la derecha no está vacía, tiene un espacio duro   La celda de la izquierda sí que está vacía

Volver al índice

Separación entre casillas: border-spacing

La propiedad border-spacing permite establecer una separación entre las casillas cuando se utiliza el modo de bordes separado. Se puede escribir un único valor, que se aplicaría a los cuatro lados, o dos valores, que se aplicarían en horizontal (a derecha e izquierda) y en vertical (arriba y abajo), respectivamente. Internet Explorer no es capaz de interpretar esta propiedad. Ni Firefox ni Internet Explorer aplican la propiedad cuando el modo de bordes es colapsado.

	table { border-collapse: collapse; border-spacing: 20px; }	Esto es la leyenda Casilla 1 Casilla 2 Casilla 3 Casilla 4
	table { border-collapse: separate; border-spacing: 20px; }	Esto es la leyenda Casilla 1 Casilla 2 Casilla 3 Casilla 4
	table { border-collapse: separate; border-spacing: 30px 10px; }	Esto es la leyenda Casilla 1 Casilla 2 Casilla 3 Casilla 4

Volver al índice