Definición | Establece la posición vertical del título o leyenda de una tabla |
---|---|
Valores permitidos | Uno y sólo uno de los siguientes valores:
|
Valor inicial | top |
Se aplica a | Los elementos de tipo tabla que tengan un título o leyenda |
Válida en | medios visuales |
Se hereda | si |
Definición en el estándar | http://www.w3.org/TR/CSS21/tables.html#propdef-caption-side |
La propiedad caption-side
establece la posición vertical del título o leyenda de una tabla. Las tablas XHTML indican su título mediante la etiqueta <caption>
, que siempre se incluye en el interior de la etiqueta <table>
:
<table summary="Descripción de la tabla y su contenido"> <caption>Título de la tabla</caption> <tbody> <tr> <td>Celda 1 - 1</td> <td>Celda 1 - 2</td> <td>Celda 1 - 3</td> </tr> <tr> <td>Celda 2 - 1</td> <td>Celda 2 - 2</td> <td>Celda 2 - 3</td> </tr> <tr> <td>Celda 3 - 1</td> <td>Celda 3 - 2</td> <td>Celda 3 - 3</td> </tr> </tbody> </table>
Por defecto, el título siempre se muestra en la parte superior de la tabla:
Celda 1 - 1 | Celda 1 - 2 | Celda 1 - 3 |
Celda 2 - 1 | Celda 2 - 2 | Celda 2 - 3 |
Celda 3 - 1 | Celda 3 - 2 | Celda 3 - 3 |
La propiedad caption-side
dispone de dos valores para controlar la posición vertical del título de la tabla: top
es el valor por defecto y muestra el título antes de la tabla, mientras que bottom
muestra el título después de la tabla.
El siguiente ejemplo es el resultado de aplicar la propiedad caption-side: bottom
a la tabla del ejemplo anterior:
Celda 1 - 1 | Celda 1 - 2 | Celda 1 - 3 |
Celda 2 - 1 | Celda 2 - 2 | Celda 2 - 3 |
Celda 3 - 1 | Celda 3 - 2 | Celda 3 - 3 |
Si utilizas el navegador Internet Explorer 7 o alguna de sus versiones anteriores, el título de la tabla sigue apareciendo en la parte superior, ya que ese navegador no soporta la propiedad caption-side
.
La posición horizontal del título se controla mediante la propiedad text-align sobre el elemento <caption>
. El siguiente código se emplea para mostrar el título de la tabla centrado en su parte inferior:
<table style="caption-side: bottom" summary="Descripción de la tabla y su contenido"> <caption style="text-align: center">Título de la tabla</caption> <thead> ... ... </table>
A continuación se muestra cómo visualizan los navegadores el ejemplo anterior:
Celda 1 - 1 | Celda 1 - 2 | Celda 1 - 3 |
Celda 2 - 1 | Celda 2 - 2 | Celda 2 - 3 |
Celda 3 - 1 | Celda 3 - 2 | Celda 3 - 3 |
El estándar CSS 2.1 establece que los navegadores agrupan cada tabla y su título mediante un elemento invisible. Por ello, cuando se establecen las propiedades position
, float
, cualquier propiedad margin
, top
, right
, bottom
y left
sobre la tabla, el elemento <caption>
también se ve afectado porque en realidad esas propiedades se aplican sobre el elemento invisible que encierra a la tabla y su título.
Además, los navegadores fusionan de forma automática los márgenes verticales de la tabla y su título. Si el título se encuentra en la parte superior de la tabla, se fusionan los margin-top
de los elementos <table>
y <caption>
. Si el título se encuentra en la parte inferior de la tabla, se fusionan los margin-bottom
de los elementos <table>
y <caption>
.