| 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 | w3.org/TR/CSS21/tables.html#propdef-caption-side |
Ejemplos de uso
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>.