Pie de foto - Trucos CSS

La caption-sidepropiedad en CSS le permite definir dónde colocar los HTML

elemento, utilizado en tablas HTML. Esta propiedad también se puede aplicar a cualquier elemento cuya displaypropiedad esté establecida en caption-side.

table ( caption-side: top; )

Valores

• top: el valor por defecto. Coloca el título en la parte superior de la mesa.
• bottom: coloca el título en la parte inferior de la tabla.
• inherit: indica que el valor se hereda del caption-sidevalor de su padre

La caption-sidepropiedad se puede aplicar a la


element or the

display table-caption text-align

Tenga en cuenta que los valores anteriores para caption-sideson relativos al modo de escritura de la tabla. Por ejemplo, si una tabla está configurada en modo de escritura vertical, los valores topy bottomserán relativos a la dirección de la tabla.

La siguiente demostración incluye un botón de "alternar" que alterna la caption-sidepropiedad de la tabla entre topy bottom, para que pueda ver la diferencia usando una tabla con muchas filas de datos:

Vea la
demostración de lápiz de la propiedad del lado del título de CSS-Tricks (@ css-tricks)
en CodePen.

En la siguiente demostración, writing-modepara la tabla se establece en vertical-rl. Como se demuestra al alternar con el botón, los valores topy bottomson relativos al modo de escritura de la tabla:

Vea la
demostración de lápiz de la propiedad del lado del título con diferentes modos de escritura de CSS-Tricks (@ css-tricks)
en CodePen.

Valores no estándar solo para Firefox

Firefox ha admitido durante mucho tiempo, y aún admite, cuatro valores no estándar para caption-side:

• left: coloca el título a la izquierda de la tabla.
• right: coloca el título a la derecha de la tabla.
• top-outside: coloca el título en la parte superior de la mesa, con sus dimensiones independientes de la mesa
• bottom-outside: coloca el título en la parte inferior de la tabla, con sus dimensiones independientes de la tabla

La siguiente demostración funciona solo en Firefox y le permite usar cuatro botones para establecer los diferentes valores no estándar:

Vea la
demostración exclusiva de Pen Firefox de la propiedad caption-side de CSS-Tricks (@ css-tricks)
en CodePen.

Nuevos valores estándar

En los últimos borradores de la especificación CSS, la caption-sidepropiedad es parte de CSS lógico Propiedades de nivel 1 e incluye los valores block-start, block-end, inline-start, y inline-end. Los dos últimos corresponden a los valores no estándar lefty right, y solo deben ser admitidos por agentes de usuario que admitan esos valores no estándar.

Más información

• propiedad del lado del título en la especificación CSS2.1
• propiedad del lado del título en la especificación CSS2.2
• lado del título en Propiedades lógicas CSS 1

Soporte del navegador

elemento, con el mismo efecto. Si bien esta propiedad afectará la posición del cuadro de título como un todo (el valor de un título se computa), no afectará la alineación del texto dentro del cuadro. El texto dentro del cuadro se puede alinear usando la propiedad.

Cromo	Safari	Firefox	Ópera	ES DECIR	Androide	iOS
1+	1+	1+	9.2+	8+	2.1+	3.2+

El soporte en la tabla anterior se refiere al soporte básico para el estándar topy los bottomvalores. Firefox también soporta adicionalmente la no estándar left, right, top-outside, y bottom-outsidevalores. No hay soporte para los nuevos navegador block-start, block-end, inline-start, y inline-endvalores.