Tablas

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

• posición de la leyenda
• centrar una tabla
• borde de casillas vacías
• modos de bordes
• separación entre casillas

Posición de la leyenda

La leyenda (<caption>) de una tabla puede mostrarse en cualquiera de los cuatro lados de la tabla.

	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

Centrar una tabla

La recomendación CSS dice que la manera de centrar una tabla en la página web es establecer las propiedades margin-left y margin-right con los mismos valores (normalmente, auto).

He leído en varios sitios que Internet Explorer 6.0 entiende esta propiedad, pero yo no lo tengo tan claro.

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

Casilla 1 Casilla 2 Casilla 3 Casilla 4

Bordes de casillas vacías

Puedes establecer si se muestran o no los bordes de las casillas vacías con la propiedad empty-cells. Para variar, Internet Explorer no es capaz de interpretar esta propiedad.

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

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

Separación entre casillas

Puedes establecer una separación entre casillas, con la propiedad border-spacing. Internet Explorer no entiende esta propiedad. Mozilla no la aplica 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

Autor: Bartolomé Sintes Marco
Última modificación: 15 de noviembre de 2003