caption-side property in CSS allows you to define where to position HTML’s
element, used on HTML tables. This property can also apply to any element whose
display property is set to
top: the default. Positions the caption at the top of the table.
bottom: positions the caption at the bottom of the table.
inherit: indicates that the value is inherited from the
caption-side value of its parent
caption-side property can be applied either to the
element or the <code>
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
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
bottom values will be relative to the direction of the table.
The demo below includes a “toggle” button that toggles the table’s
caption-side property between
bottom, so you can see the difference using a table with many rows of data:
See the Pen
Demo of caption-side property by CSS-Tricks (@css-tricks)
In the next demo, the
writing-mode for the table is set to
vertical-rl. As demonstrated by toggling using the button, the
bottom values are relative to the table’s writing-mode:
See the Pen
Non-standard Firefox-only Values
Demo of caption-side property with different writing-mode by CSS-Tricks (@css-tricks)
Firefox has long supported, and still supports, four non-standard values for
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 table
bottom-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:
See the Pen
New Standard Values
Firefox-only demo of caption-side property by CSS-Tricks (@css-tricks)
In the latest drafts of the CSS specification, the
caption-side property is part of CSS Logical Properties Level 1 and includes the values
inline-end. The latter two correspond to the non-standard
right values, and are only required to be supported by user agents that support those non-standard values.
Support in the table above refers to basic support for the standard
bottom values. Firefox also additionally supports the non-standard
bottom-outside values. There is no browser support for the new