The caption-side property in CSS allows you to define where to position HTML’s <caption> element, used on HTML table headers. This property can also apply to any element whose display property is set to caption-side.
table {
caption-side: top;
}Syntax
caption-side: top | bottom | block-start | block-end | inline-start | inline-end- Initial value:
top - Applies to: table-caption elements
- Inherited: yes
- Computed value: as specified
- Animation type: discrete
Values
/* Directional values */
caption-side: top;
caption-side: bottom;
/* Logical values */
caption-side: block-start;
caption-side: block-end;
caption-side: inline-start;
caption-side: inline-end;
/* Global values */
caption-side: inherit;
caption-side: initial;
caption-side: revert;
caption-side: unset;top: the default. Positions the caption at the top of the table.bottom: Positions the caption at the bottom of the table.block-start: Positions the caption at the table’s starting edge in the block direction.block-end: Positions the caption at the table’s starting edge in the block direction.inline-start: Positions the caption at the table’s starting edge in the inline direction.inline-end: Positions the caption at the table’s starting edge in the inline direction.inherit: Indicates that the value is inherited from thecaption-sidevalue of its parent
The caption-side property can be applied either to the <table> element or the <caption> element, with the same effect. While this property will affect the position of the caption box as a whole (a caption’s display value computes to table-caption), it will not affect the alignment of text inside the box. Text inside the box may be aligned using the text-align property.
Note that the above values for caption-side are relative to the table’s writing-mode. For example, if a table is set to a vertical writing mode, then the top and bottom values will be relative to the direction of the table.
Examples of caption-side
The demo below includes a “toggle” button that toggles the table’s caption-side property between top and bottom, so you can see the difference using a table with many rows of data:
In the next demo, the writing-mode for the table is set to vertical-rl. As demonstrated by toggling using the button, the top and bottom values are relative to the table’s writing-mode:
Non-standard Firefox-only values
Firefox has long supported, and still supports, four non-standard values for caption-side:
left: positions the caption to the left of the table.right: positions the caption to the right of the table.top-outside: positions the caption at the top of the table, with its dimensions independent of the tablebottom-outside: positions the caption at the bottom of the table, with its dimensions independent of the table
The demo below works only in Firefox, and allows you to use four buttons to set the different non-standard values:
Browser support
| Chrome | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| 1+ | 1+ | 1+ | 9.2+ | 8+ | 2.1+ | 3.2+ |
Support in the table above refers to basic support for the standard top and bottom values. Firefox also additionally supports the non-standard left, right, top-outside, and bottom-outside values. There is no browser support for the new block-start, block-end, inline-start, and inline-end values.
