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.

Initial valuetop
Applies totable-caption elements
Inheritedyes
Mediavisual
Computed valueas specified
Animatableno
Canonical orderthe unique non-ambiguous order defined by the formal grammar

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

Specification Status Comment
CSS Logical Properties Level 1
The definition of 'caption-side' in that specification.
Editor's Draft Defines the top and bottom values as relative to the writing-mode value
CSS Level 2 (Revision 1)
The definition of 'caption-side' in that specification.
Recommendation Initial definition

Browser compatibility

Feature Chrome Firefox Internet Explorer Opera Safari
Basic support 1.0 1.0 8.0 4.0 1.0
left, right, top-outside and bottom-outside Not supported (Yes) Not supported Not supported Not supported
top and bottom are relative to the writing-mode value Not supported 42 (42) Not supported Not supported Not supported
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support ? ? ? ? ?
left, right, top-outside and bottom-outside Not supported ? Not supported Not supported Not supported
top and bottom are relative to the writing-mode value Not supported 42.0 (42) Not supported Not supported Not supported

Document Tags and Contributors

 Last updated by: teoli,