Propiedad caption-side de CSS

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 (leyenda) de la tabla se puede colocar 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 la caja de la leyenda debe colocarse encima de la tabla. El valor bottom define que la caja de la leyenda debe colocarse debajo de la tabla.

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

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

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

Propiedad caption-side para la leyenda de una tabla

Utilice una leyenda de tabla para establecer un encabezado corto para la tabla, algo así como una breve descripción. Esto describirá la estructura de una tabla. El elemento <caption> debe utilizarse 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 utilizarse.) Con la ayuda de la propiedad caption-side, puede cambiar la posición de la leyenda.

Sintaxis

Sintaxis de la propiedad caption-side de CSS

css

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 la leyenda encima de la tabla.

Ejemplo de la propiedad caption-side de CSS:

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

html

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

Try it Yourself »

Resultado

CSS caption-side Property

Ejemplo de la propiedad caption-side con dos valores:

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

html

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

Try it Yourself »

Valores

Valor	Descripción	Pruébalo
top	Coloca la leyenda encima de la tabla. Este es el valor predeterminado de esta propiedad.	Pruébalo »
bottom	Coloca la leyenda debajo de la tabla.	Pruébalo »
left	Coloca la leyenda en el lado izquierdo de la tabla. Un valor no estándar compatible solo con Firefox.
right	Coloca la leyenda en el lado derecho de la tabla. Un valor no estándar compatible solo con Firefox.
top-outside	Coloca la leyenda 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 la leyenda 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 principal.

Práctica

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

Establece la posición de la leyenda en la parte superior de la tabla.Establece la posición de la leyenda en la parte inferior de la tabla.Estiliza la leyenda con un color de fuente específico.Aumenta el tamaño del texto de la leyenda.

Propiedad caption-side de CSS ​

Propiedad caption-side para la leyenda de una tabla ​

Sintaxis ​

Ejemplo de la propiedad caption-side de CSS: ​

Resultado ​

Ejemplo de la propiedad caption-side con dos valores: ​

Valores ​

Práctica ​