Propiedad caption-side

DefiniciónEstablece la posición vertical del título o leyenda de una tabla
Valores
permitidos
Uno y sólo uno de los siguientes valores:
Valor inicialtop
Se aplica aLos elementos de tipo tabla que tengan un título o leyenda
Válida enmedios visuales
Se heredasi
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:

Título 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:

Título 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

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:

Título 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

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>.