Tablas: Posición del título de la tabla

Tal y como se estudió en el apartado de XHTML, el título de las tablas se establece mediante el elemento <caption>, que por defecto se muestra encima de los contenidos de la tabla.

La propiedad caption-side permite controlar la posición del título de la tabla.

Los posibles valores para dicha propiedad se definen a continuación:

- caption-side: top: valor por defecto

- caption-side: bottom: el título de la tabla se mostrará después de los contenidos de la tabla.

En caso de querer alinear de forma diferente la posición del texto de la tabla, se hará con la propiedad text-align.

Sirva el siguiente código a modo de ejemplo, donde el título de la tabla se mostraría una vez impresa la tabla:

.especial {
caption-side: bottom;
}

<table class="especial" summary="Tabla genérica">
<caption>Tabla 2.- Título especial</caption>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
...
</table>

Opera 9 (y versiones anteriores) y el navegador Internet Explorer 6 (y versiones anteriores), a diferencia de Firefox, no soportan esta propiedad y muestran el título de la tabla siempre encima de sus contenidos.

Ejercicio propuesto


REFERENCIA

CSS

SELECTORES

COLORES

BOX MODEL

FONDOS

POSICIONAMIENTO

VISUALIZACIÓN

TIPOGRAFÍA

TEXTO

ENLACES

IMÁGENES

LISTAS

TABLAS

FORMULARIOS

LAYOUT

Ejercicios

ANEXO