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.
/* 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;
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 |
Syntax
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.
Note: 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.
Note: 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.
Note: The CSS 2.1 specification notes that the CSS 2 specification described a different behavior for thetop
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.
Note: The CSS 2.1 specification notes that the CSS 2 specification described a different behavior for thebottom
value, which will be reintroduced by this value in a future specification. inherit
- The
caption-side
value defined on the parent element must be used.
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 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 | Edge | Firefox | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|---|
Basic support | 1.0 | (Yes) | 1.0 | 8.0 | 4.0 | 1.0 |
left , right , top-outside and bottom-outside |
No support | No support | (Yes) | No support | No support | No support |
top and bottom are relative to the writing-mode value |
No support | No support | 42 (42) | No support | No support | No support |
Feature | Android | Edge | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|---|
Basic support | (Yes) | (Yes) | ? | ? | ? | (Yes) |
left , right , top-outside and bottom-outside |
No support | No support | ? | No support | No support | No support |
top and bottom are relative to the writing-mode value |
No support | No support | 42.0 (42) | No support | No support | No support |
Document Tags and Contributors
Tags:
Contributors to this page:
mfluehr,
elysdir1,
arronei,
LouisLazaris,
erikadoyle,
teoli,
Sebastianz,
fscholz,
dzlabs,
jsx,
Sheppy,
kscarfone,
ethertank,
pikkapika,
grendel,
Jürgen Jeka,
Mgjbot,
BijuGC
Last updated by:
mfluehr,