Propiedad CSS caption-side

La propiedad caption-side define la ubicación del elemento HTML <caption> dentro de una tabla HTML. La etiqueta <caption> se utiliza para dar un título a una tabla. El título (caption) de la tabla puede colocarse en la parte inferior o en la parte superior de la tabla.

Esta propiedad tiene dos valores estandarizados: top y bottom. El valor top define que el cuadro de título debe colocarse encima de la tabla. El valor bottom define que el cuadro de título debe colocarse debajo de la tabla.

Existen otros cuatro valores que no están estandarizados: left, right, top-outside y bottom-outside. Estos valores se propusieron en CSS 2 pero no se incluyeron en CSS 2.1. Actualmente están obsoletos y solo son compatibles con Firefox. No se recomienda su uso en producción.

La propiedad caption-side también puede aplicarse a cualquier elemento cuya propiedad display esté configurada como table-caption.

Valor inicial	top
Se aplica a	Elementos table-caption.
Heredable	No.
Animable	Discreto.
Versión	CSS 2.1
Sintaxis DOM	object.style.captionSide = "top";

Propiedad caption-side para un título de tabla

Utiliza un título de tabla para establecer un encabezado corto que describa la tabla, algo parecido a una breve descripción de su estructura. El elemento <caption> debe usarse para este propósito. Debe colocarse inmediatamente después de la etiqueta de apertura <table>, convirtiéndolo en el primer hijo de la tabla. (Nota: el atributo summary en la etiqueta <table> está obsoleto en HTML5 y no debe usarse.) Con la ayuda de la propiedad caption-side, puedes cambiar la posición del título.

Sintaxis

Sintaxis de la propiedad CSS caption-side

caption-side: top | bottom | left | right | top-outside | bottom-outside | initial | inherit;

A continuación se muestra un ejemplo donde se aplica el valor "top". Coloca el título encima de la tabla.

Ejemplo de la propiedad CSS caption-side:

Ejemplo de la propiedad CSS caption-side con el valor top

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      caption {
        background: #1c87c9;
        color: #fff;
      }
      .top caption {
        caption-side: top;
      }
      table,
      th,
      td {
        border: 1px solid #1c87c9;
        padding: 3px;
      }
      td {
        background-color: #ccc;
        color: #666;
      }
    </style>
  </head>
  <body>
    <h2>Caption-side property example</h2>
    <p>Here the caption-side is set to "top":</p>
    <table class="top">
      <caption>Some title here</caption>
      <tr>
        <td>Some text</td>
        <td>Some text</td>
      </tr>
    </table>
  </body>
</html>

Pruébalo tú mismo »

Resultado

![Propiedad CSS caption-side](/uploads/media/default/0001/03/273b1e51c9d5a4a9ee88f0aa85c7a0958ae2d787.png "CSS caption-side property with top value" =420x)

Ejemplo de la propiedad caption-side con dos valores:

Ejemplo de la propiedad CSS caption-side con los valores top y bottom

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      caption {
        background: #ccc;
      }
      .top caption {
        caption-side: top;
      }
      .bottom caption {
        caption-side: bottom;
      }
      table,
      th,
      td {
        border: 1px solid #cccccc;
        padding: 3px;
      }
      td {
        background-color: #1c87c9;
        color: #ffffff;
      }
    </style>
  </head>
  <body>
    <h2>Caption-side property example</h2>
    <p>Here the caption-side is set to "top":</p>
    <table class="top">
      <caption>ABOVE</caption>
      <tr>
        <td>Some text</td>
        <td>Some text</td>
      </tr>
    </table>
    <br />
    <p>And here the caption-side is set to "bottom":</p>
    <table class="bottom">
      <caption>BELOW</caption>
      <tr>
        <td>Some text</td>
        <td>Some text</td>
      </tr>
    </table>
  </body>
</html>

Pruébalo tú mismo »

Cuándo usar caption-side

De forma predeterminada, el título aparece encima de la tabla (caption-side: top), que es el lugar convencional para un título de tabla. Establécelo en bottom cuando el título se lea más como una nota al pie o una fuente de datos; por ejemplo, "Figura 1: Ingresos trimestrales (en miles)" colocado debajo de una tabla tipo gráfico. La elección es puramente visual; el elemento <caption> permanece como el primer hijo de la tabla en el marcado de todas formas, por lo que los lectores de pantalla lo anuncian como el nombre accesible de la tabla independientemente de dónde se pinte.

Aspectos a tener en cuenta

La posición en el marcado es fija, la representación visual no. Incluso cuando usas caption-side: bottom, el elemento <caption> debe permanecer como el primer hijo de <table>. CSS solo mueve dónde se dibuja el cuadro, no dónde vive el elemento en el DOM.
Usa solo top y bottom. Los valores left, right, top-outside y bottom-outside fueron eliminados de CSS 2.1 y solo son reconocidos en Firefox. En todos los demás navegadores se ignoran y vuelven a top, así que evítalos en producción.
No es heredable. Aunque la propiedad se aplica a los cuadros table-caption, no se hereda, por lo que establecerla en un contenedor no afecta a las tablas anidadas a menos que apuntes directamente a sus títulos.
No tiene su propio cuadro de diseño para dimensionar. caption-side no puede cambiar el ancho ni la alineación del texto del título; usa text-align y width en el elemento <caption> para eso.

Compatibilidad con navegadores

Los valores estandarizados top y bottom son compatibles con todos los navegadores modernos, incluido Internet Explorer 8 y versiones posteriores. Los valores no estándar solo son compatibles con Firefox.

Valores

Valor	Descripción	Pruébalo
top	Coloca el título encima de la tabla. Este es el valor predeterminado de esta propiedad.	Pruébalo »
bottom	Coloca el título debajo de la tabla.	Pruébalo »
left	Coloca el título a la izquierda de la tabla. Un valor no estándar compatible solo con Firefox.
right	Coloca el título a la derecha de la tabla. Un valor no estándar compatible solo con Firefox.
top-outside	Coloca el título encima de la tabla. El ancho y el comportamiento de alineación horizontal no están vinculados al diseño horizontal de la tabla. Un valor no estándar compatible solo con Firefox.
bottom-outside	Coloca el título debajo de la tabla, mientras que el ancho y el comportamiento de alineación horizontal no están vinculados al diseño horizontal de la tabla. Un valor no estándar compatible solo con Firefox.
initial	Establece la propiedad en su valor predeterminado.	Pruébalo »
inherit	Hereda la propiedad de su elemento padre.

Práctica

¿Qué hace la propiedad 'caption-side' en CSS?

Establece la posición del título en la parte superior de la tabla.Establece la posición del título en la parte inferior de la tabla.Aplica estilo al título con un color de fuente específico.Aumenta el tamaño del texto del título.

Propiedades relacionadas para el estilo de tablas

border-collapse — elige si los bordes de la tabla se fusionan en una sola línea o se mantienen separados.
empty-cells — controla si los bordes y fondos se renderizan en celdas vacías.
table-layout — cambia entre algoritmos de ancho de columna automático y fijo.
text-align — alinea el texto del título dentro de su cuadro.