caption-side

The caption-side property in CSS allows you to define where to position HTML's <caption> element, used on HTML tables. This property can also apply to any element whose display property is set to caption-side.

table {
  caption-side: top;
}

Values

  • 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

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.

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:

See the Pen Demo of caption-side property by Louis Lazaris (@impressivewebs) on CodePen.

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:

See the Pen Demo of caption-side property with different writing-mode by Louis Lazaris (@impressivewebs) on CodePen.

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 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 Firefox-only demo of caption-side property by Louis Lazaris (@impressivewebs) on CodePen.

New Standard Values

In the latest drafts of the CSS specification, the caption-side property is part of CSS Logical Properties Level 1 and includes the values block-start, block-end, inline-start, and inline-end. The latter two correspond to the non-standard left and right values, and are only required to be supported by user agents that support those non-standard values.

More Information

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 top, bottom, top-outside, and bottom-outside values. There is no browser support for the new block-start, block-end, inline-start, and inline-end values.

This comment thread is closed. If you have important information to share, please contact us.
icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag