CSS - caption-side

Example

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

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 <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> bottom <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> block-start <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> block-end <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> inline-start <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> inline-end

Description  

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.

Browser Compatibility  

Specifications  

License