mozilla

caption-side

This article is in need of a technical review.

This article is in need of an editorial review.

Summary

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

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;

/* Logical values */
caption-side: block-start;
caption-side: block-end;
caption-side: inline-start;
caption-side: inline-end;

/* Warning: non-standard values */
caption-side: block-start-outside;
caption-side: block-end-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.
block-start
Is a keyword indicating that the caption box should be positioned at the start of the block, which reflects either the top or the bottom of the table depending on the writing mode.
block-end
Is a keyword indicating that the caption box should be positioned at the end of the block, which reflects either the top or the bottom of the table depending on the writing mode.
inline-start
Is a keyword indicating that the caption box should be positioned at the inline start, which reflects either the left or the right side of the table depending on the writing mode.
inline-end
Is a keyword indicating that the caption box should be positioned at the inline end, which reflects either the left or the right side of the table depending on the writing mode.
block-start-outside
Is a keyword indicating that the caption box should be positioned at the start of the block, which reflects either the top or the bottom of the table depending on the writing mode, while the width and horizontal alignment resp. the height and vertical alignment are not bound to the table's layout.
block-end-outside
Is a keyword indicating that the caption box should be positioned at the end of the block, which reflects either the top or the bottom of the table depending on the writing mode, while the width and horizontal alignment resp. the height and vertical alignment are not bound to the table's layout.
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 Adds the logical values block-start, block-end, inline-start and inline-end.
CSS Level 2 (Revision 1)
The definition of 'caption-side' in that specification.
Recommendation Initial specification

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
block-start, block-end, inline-start and inline-end ? ? ? ? ?
block-start-outside and block-end-outside Not supported (Yes) 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
block-start, block-end, inline-start and inline-end ? ? ? ? ?
block-start-outside and block-end-outside Not supported ? Not supported Not supported Not supported

See also

Document Tags and Contributors

Last updated by: Sebastianz,