# 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

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