Tablas

En esta página se tratan las propiedades que se pueden aplicar a una tabla:

Posición de la leyenda: caption-side
Centrar una tabla
Modos de bordes: border-collapse
Bordes de celdas vacías: empty-cells
Separación entre celdas: border-spacing

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. Los cuatro valores permitidos son top (arriba), right (derecha), bottom (abajo) y left (izquierda). Si no se establece la posición de la leyenda, los navegadores aplican el valor top.

Nota: En la recomendación CSS 2.1 se han eliminado los valores right y left. Actualmente (diciembre de 2011) todavía no se ha publicado ningún borrador de la futura recomendación CSS 3: Tablas.

Nota: Firefox aplica los valores left y right de la propiedad caption-side que Internet Explorer y Chrome no aplican, como se comenta en la página de diferencias entre Firefox e Internet Explorer.

caption { 
}

Esto es la leyenda
Celda 1	Celda 2
Celda 3	Celda 4

caption { 
  caption-side: top; 
}

Esto es la leyenda
Celda 1	Celda 2
Celda 3	Celda 4

caption { 
  caption-side: bottom; 
}

Esto es la leyenda
Celda 1	Celda 2
Celda 3	Celda 4

caption { 
  caption-side: left; 
}

Esto es la leyenda
Celda 1	Celda 2
Celda 3	Celda 4

caption { 
  caption-side: right; 
}

Esto es la leyenda
Celda 1	Celda 2
Celda 3	Celda 4

Nota: Internet Explorer 8 muestra correctamente el valor bottom. Las versiones anteriores lo hacían incorrectamente, como se comenta en la página de diferencias entre IE8 e IE7.

Volver al principio de la página

Centrar una tabla

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

Esto es la leyenda
Celda 1, con más texto	Celda 2
Celda 3	Celda 4, con más texto

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

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

caption { 
  background-color: lightblue; 
  text-align: right; 
}

Esto es la leyenda
Celda 1, con más texto	Celda 2
Celda 3	Celda 4, con más texto

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

Nota: En Firefox 2, para centrar la leyenda hacía falta establecer también las propiedades margin-left y margin-right para la leyenda, como se comenta en la página de diferencias entre versiones de Firefox.

Volver al principio de la página

Modos de bordes: border-collapse

La propiedad border-collapse permite elegir el modo de presentación de los bordes de las celdas y de la tabla. Los dos valores permitidos son separate (separado) y collapse (colapsado). En el modo separado existe un hueco entre los bordes de cada celda, mientras que en el modo colapsado los bordes se superponen. Si no se establece el modo de presentación, los navegadores aplican el valor separate.

table { 
}

Esto es la leyenda
Celda 1	Celda 2
Celda 3	Celda 4

table { 
  border-collapse: separate; 
}

Esto es la leyenda
Celda 1	Celda 2
Celda 3	Celda 4

table { 
  border-collapse: collapse; 
}

Esto es la leyenda
Celda 1	Celda 2
Celda 3	Celda 4

En la página de bordes, márgenes y fondos en las tablas se explican con detalle estos modos de funcionamiento.

Nota: Antes de Firefox 7, si en una página hay varias tablas y la primera tabla está en modo colapsado, las tablas siguientes perdían los bordes de las casillas, como se comenta en la página de diferencias entre versiones de Firefox.

Volver al principio de la página

Bordes de celdas vacías: empty-cells

La propiedad empty-cells permite establecer si se muestran o no los bordes de las celdas vacías, en el modo de bordes separado. Los dos valores permitidos son show (mostrar) y hide (ocultar). Si no se establece la propiedad, los navegadores aplican el valor show.

table { 
}

Esto es la leyenda
Celda 1
	Celda 4

table { 
  empty-cells: show; 
}

Esto es la leyenda
Celda 1
	Celda 4

table { 
  empty-cells: hide; 
}

Esto es la leyenda
Celda 1
	Celda 4

Nota: Internet Explorer 7 no reconocía esta propiedad, como se comenta en la página de diferencias entre IE8 e IE7.

En el modo de bordes colapsado, no se aplica la propiedad empty-cells.

table { 
  border-collapse: collapse;
  empty-cells: hide;
/* En el modo colapsado empty-cells no hace nada */
}

Esto es la leyenda
Celda A1	Celda A2	Celda A3	Celda A4
Celda B1			Celda B4
Celda C1			Celda C4
Celda D1	Celda D2	Celda D3	Celda D4

Volver al principio de la página

Separación entre celdas: border-spacing

La propiedad border-spacing permite establecer una separación entre las celdas 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. Los valores no se pueden expresar en porcentajes, pero sí en cualquier otra unidad (px, em, etc).

table { 
  border-spacing: 20px; 
}

Esto es la leyenda
Celda 1	Celda 2
Celda 3	Celda 4

table { 
  border-spacing: 30px 10px; 
}

Esto es la leyenda
Celda 1	Celda 2
Celda 3	Celda 4

Si no se establece la propiedad, los navegadores aplican el valor 2px.

table { 
}

Esto es la leyenda
Celda 1	Celda 2
Celda 3	Celda 4

table { 
  border-spacing: 2px; 
}

Esto es la leyenda
Celda 1	Celda 2
Celda 3	Celda 4

En el modo de bordes colapsado, no se aplica la propiedad border-spacing.

table { 
  border-collapse: collapse; 
  border-spacing: 20px; 
/* En el modo colapsado border-spacing no hace nada */
}

Esto es la leyenda
Celda 1	Celda 2
Celda 3	Celda 4

Volver al principio de la página

Esta página forma parte del curso "Páginas web HTML / XHTML y hojas de estilo CSS" disponible en http://www.mclibre.org
Autor: Bartolomé Sintes Marco
Última modificación: 22 de diciembre de 2011

Esta obra está bajo una licencia de Creative Commons Reconocimiento-CompartirIgual 3.0 España.