CSS 2: Tablas

Nota: En las hojas de estilo de los ejemplos que se muestran en esta página se ha añadido bordes a las celdas y a las tablas mediante las siguientes reglas:

table {
  border: #b2b2b2 1px solid;
}
td {
  border: black 1px solid;
}

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

caption {
}
ERROR (no puede mostrarse el objeto)
Enlace externo
caption {
  caption-side: top;
}
ERROR (no puede mostrarse el objeto)
Enlace externo
caption {
  caption-side: bottom;
}
ERROR (no puede mostrarse el objeto)
Enlace externo

En la recomendación CCS 2 la propiedad caption-side podía tomar también los valores right (derecha) y left (izquierda), pero en la recomendación CSS 2.1 se eliminaron esos valores, que tampoco aparecen en la futura recomendación CSS 3: Tablas, actualmente (octubre de 2018) en fase de borrador.

Firefox aplica los valores left y right de la propiedad caption-side que Chrome y Edge no aplican. Pero como la recomendación vigente no permite esos valores, se tiene que considerar que Firefox lo está haciendo incorrectamente.

Correcto en Chrome Incorrecto en Firefox Correcto en Edge
caption {
  caption-side: left;
}
ERROR (no puede mostrarse el objeto)
Enlace externo
Correcto en Chrome Incorrecto en Firefox Correcto en Edge
caption {
  caption-side: right;
}
ERROR (no puede mostrarse el objeto)
Enlace externo

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;
}
ERROR (no puede mostrarse el objeto)
Enlace externo

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;
}
ERROR (no puede mostrarse el objeto)
Enlace externo

Disposición de la tabla: table-layout

La propiedad table-layout permite elegir el modo en el que el navegador calcula el tamaño total de la tabla y el de cada fila o columna. Los dos valores permitidos son fixed (fijo) y auto (automático).

En el modo fijo (fixed), el tamaño de las tablas y de las celdas depende de las propiedades width y height.

En el modo fijo (auto), el tamaño de las tablas y de las celdas depende de su contenido (y si es posible, de las propiedades width y height).

Por completar con ejemplos

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 {
}
ERROR (no puede mostrarse el objeto)
Enlace externo
table {
  border-collapse: separate;
}
ERROR (no puede mostrarse el objeto)
Enlace externo
table {
  border-collapse: collapse;
}
ERROR (no puede mostrarse el objeto)
Enlace externo

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

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 {
}
ERROR (no puede mostrarse el objeto)
Enlace externo
table {
  empty-cells: show;
}
ERROR (no puede mostrarse el objeto)
Enlace externo
table {
  empty-cells: hide;
}
ERROR (no puede mostrarse el objeto)
Enlace externo

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 */
}
ERROR (no puede mostrarse el objeto)
Enlace externo

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;
}
ERROR (no puede mostrarse el objeto)
Enlace externo
table {
  border-spacing: 30px 10px;
}
ERROR (no puede mostrarse el objeto)
Enlace externo

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

table {
}
ERROR (no puede mostrarse el objeto)
Enlace externo
table {
  border-spacing: 2px;
}
ERROR (no puede mostrarse el objeto)
Enlace externo

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 */
}
ERROR (no puede mostrarse el objeto)
Enlace externo