caption-side

Summary

The caption-side CSS property positions the content of a table's <caption> on the specified side.

The values are relative to the writing-mode of the table.

Syntax

/* Directional values */ 
caption-side: top; 
caption-side: bottom; 

/* Warning: non-standard values */ 
caption-side: left; 
caption-side: right; 
caption-side: top-outside; 
caption-side: bottom-outside; 

/* Global values */ 
caption-side: inherit; 
caption-side: initial; 
caption-side: unset;

Values

top

Is a keyword indicating that the caption box should be positioned above the table.

bottom

Is a keyword indicating that the caption box should be positioned below the table.

left

Is a keyword indicating that the caption box should be positioned on the left side of the table.

Note: This value was proposed for CSS 2, but removed from the final CSS 2.1 specification. It is non-standard.

right

Is a keyword indicating that the caption box should be positioned on the right side of the table.

Note: This value was proposed for CSS 2, but removed from the final CSS 2.1 specification. It is non-standard.

top-outside

Is a keyword indicating that the caption box should be positioned above the table, while the width and horizontal alignment behavior are not bound to the table's horizontal layout.

Note: The CSS 2.1 specification notes that the CSS 2 specification described a different behavior for the top value, which will be reintroduced by this value in a future specification.

bottom-outside

Is a keyword indicating that the caption box should be positioned below the table, while the width and horizontal alignment behavior are not bound to the table's horizontal layout.

Note: The CSS 2.1 specification notes that the CSS 2 specification described a different behavior for the bottom value, which will be reintroduced by this value in a future specification.

inherit

Is a keyword indicating that the caption-side value defined on the parent's element must be used.

Formal syntax

top | bottom | block-start | block-end | inline-start | inline-end

Examples

.contentbox table-caption {
  caption-side: bottom;
}

Specifications

Browser compatibility