Tablas

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

Posición de la leyenda

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 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

Para centrar una tabla horizontalmente en la página, se deben establecer las propiedades margin-left y margin-right con los mismos valores (normalmente, auto).

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

Casilla 1 Casilla 2 Casilla 3 Casilla 4

Si la tabla tiene leyenda, en Mozilla la leyenda no se centra automáticamente, pero sí lo hace si se establecen las propiedades margin-left y margin-right para la leyenda.

	table { margin-left: auto; margin-right: auto; }	Esto es la leyenda Casilla 1 Casilla 2 Casilla 3 Casilla 4
	table { margin-left: auto; margin-right: auto; } caption { margin-left: auto; margin-right: auto; }	Esto es la leyenda Casilla 1 Casilla 2 Casilla 3 Casilla 4

Esta forma de centrar la tabla no funciona en Internet Explorer si la página contiene la primera línea habitual (pero no obligatoria) en los documentos XHTML:

1  <?xml version="1.0" encoding="iso-8859-1"?>

Si se borra esa línea, entonces la tabla se centra.

Para centrar una tabla en Internet Explorer sin necesidad de borrar esa línea, hay que insertar la tabla en una división y centrar el contenido de la división. De esta manera Internet Explorer centra la tabla, pero no el contenido de la tabla. Sin embargo, con esta solución, Mozilla Firefox no centra la tabla pero sí el contenido de la tabla. Para que se vea de la misma manera en ambos navegadores, hay añadir las propiedades necesarias para centrar la tabla y para alinear el texto a la izquierda):

	div { text-align: center; } table { }	Esto es la leyenda Casilla 1, con más texto Casilla 2 Casilla 3 Casilla 4, con más texto
	div { text-align: center; } table { margin-left: auto; margin-right: auto; text-align: left; } caption { margin-left: auto; margin-right: auto; }	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

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

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 Mozilla ni Internet Explorer no 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

Volver al índice

Separación entre casillas

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 Mozilla ni Internet Explorer no 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