W3cubDocs

caption-side

The caption-side CSS property puts 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;

The caption-side property is specified as one of the keyword values listed below.

Values

top: The caption box should be positioned above the table.
bottom: The caption box should be positioned below the table.
left: The caption box should be positioned on the left side of the table.; This value was proposed for CSS 2, but removed from the final CSS 2.1 specification. It is non-standard.
right: The caption box should be positioned on the right side of the table.; This value was proposed for CSS 2, but removed from the final CSS 2.1 specification. It is non-standard.
top-outside: 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.; 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: 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.; 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.

Formal syntax

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

Example

HTML

<table class="top">
  <caption>Caption ABOVE the table</caption>
  <tr>
    <td>Some data</td>
    <td>Some more data</td>
  </tr>
</table>

<br>

<table class="bottom">
  <caption>Caption BELOW the table</caption>
  <tr>
    <td>Some data</td>
    <td>Some more data</td>
  </tr>
</table>

CSS

.top caption {
  caption-side: top;
}

.bottom caption {
  caption-side: bottom;
}

table {
  border: 1px solid red;
}

td {
  border: 1px solid blue;
}

Result

Specifications

Specification	Status	Comment
CSS Logical Properties and Values 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.

Initial value	`top`
Applies to	table-caption elements
Inherited	yes
Media	visual
Computed value	as specified
Animation type	discrete
Canonical order	the unique non-ambiguous order defined by the formal grammar

Browser compatibilityUpdate compatibility data on GitHub

	Desktop
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari
Basic support	1	12	1	8	4	1
Non-standard values `left`, `right`, `top-outside`, and `bottom-outside`	No	No	Yes	No	No	No
`top` and `bottom` are relative to the `writing-mode` value	No	No	42	No	No	No

	Mobile
	Android webview	Chrome for Android	Edge Mobile	Firefox for Android	Opera for Android	iOS Safari	Samsung Internet
Basic support	Yes	?	Yes	4	?	Yes	?
Non-standard values `left`, `right`, `top-outside`, and `bottom-outside`	No	?	No	Yes	No	No	No
`top` and `bottom` are relative to the `writing-mode` value	No	?	No	42	No	No	No

Edit this page on MDN

© 2005–2018 Mozilla Developer Network and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/caption-side