Caption-side - CSS Property
Summary of characteristics of the caption-side property
top | bottomtopDiscrète: during an animation, the caption-side property passes from one value to another without transition.Single: single value (no order).Syntax diagram of caption-side.
Description of the caption-side property.
caption-side sets the position of a table's title.
This title should be a caption tag included inside the table tag, before the tbody tag.
Example of HTML code for a table that includes the caption tag.
table
captionTable title/caption
tbody
tr
td.../td
...
/tr
/tbody
/table
Note: this property can be applied to the caption tag or the table tag.
The text-align property can be used together with 
caption-side to complete the positioning of the table title.
Language support.
The top and bottom values are actually logical values that take writing direction into account. So, the table title
can end up on the right or left if the writing direction is vertical (values vertical-lr or vertical-rl assigned to
the writing-mode property). The simulator below lets you see how this works.
topbottomValues for caption-side.
- caption-side: top;
Default value. The caption is placed at the beginning of the table. So this value is treated as if it were
block-start. If the writing mode is European, the caption will be positioned above the table, but this might not necessarily be the case in other writing modes (see the propertywriting-mode).Table title A B C A B C A B C - caption-side: bottom;
The title is positioned at the end of the table (value treated as
block-end). In European writing mode, the title is placed below the table, but in other writing modes, the title can be placed elsewhere (see thewriting-modeproperty).Table title A B C A B C A B C - caption-side: initial; (
top) caption-side: inherit; caption-side: revert; caption-side: revert-layer; caption-side: revert-rule; caption-side: unset;Common values are presented on these pages:
initial,inherit,revert,revert-layer,revert-rule,unset.
Animation of the caption-side property.
Animating caption-side is possible but, in our opinion, not very interesting.
Access the caption-side property via a program
Change the position of table titles with Javascript.
In JavaScript, here's how to change the value of caption-side. You can see that JavaScript offers a syntax with the typical CSS-style notation,
in kebab-case (a dash to separate words), and another syntax with camelCase notation (a capital letter to separate words).
let el = document.getElementById('id');
el.style['caption-side'] = 'bottom';
// or
let el = document.getElementById('id');
el.style.captionSide = 'bottom';
Read the table title position with Javascript.
The property must have been applied directly to the element itself via its style attribute, not through a CSS selector.
It will also work correctly if the property was set by the code above.
let el = document.getElementById('id');
let value = el.style['caption-side'];
// or
let el = document.getElementById('id');
let value = el.style.captionSide;
Retrieving the computed value of caption-side with JavaScript.
The computed value is the one that comes from evaluating the chain of inheritances. By default, it's the initial value. The computed value is always defined.
let el = document.getElementById('id');
let value = window.getComputedStyle(el).getPropertyValue('caption-side');
Read or change the position of titles with JQuery.
// Read the value:
$('#id').prop('caption-side');
// Write the value:
$('#id').prop('caption-side', 'bottom');
$('#id').prop('{caption-side': 'bottom'});
Retrieving the computed value of caption-side with JQuery.
let value = $('#id').css('caption-side');
Try it yourself.
The buttons below apply the entered value to the caption-side property and then show either the value as applied, or the computed value.
If the displayed applied value is empty, it means the value you entered is incorrect.
Simulator.
| January | February | March | April |
| May | June | July | August |
| September | October | November | December |
Browsers compatibility with caption-side.
The table below shows that the property caption-side is indeed recognized by browsers.
However, some points of the specification regarding logical values are not handled correctly.
caption-side property to define the position of a caption of a table.top and bottom treated as relative values to the writing mode.caption-sideproperty
caption-side(logical values)
Browsers on computers :
Mobile browsers :
Outdated or marginal browsers :
Internet Explorer
UC Browser pour Androïd
Opéra Mobile
QQ Browser
Baidu Browser
Safari
Safari sur IOS
Opéra
Chrome
Edge
Firefox
Chrome pour Androïd
Samsung Internet
Androïd Brower
Firefox pour Androïd
KaiOS Browser
Opéra mini
Historic of the caption-side property.
-
Cascading Style Sheets Level 2 - Revision 1 Specification
This level 2 of the specification describes the mechanism of cascading styles in CSS. This language is used to format HTML or XML documents. It supports media-specific style sheets so that authors can adapt the presentation of their documents for visual browsers, auditory devices, printers, braille devices, portable devices, etc.
Regardingcaption-sideInitial definition of thecaption-sideproperty.
November 04, 1997Working Draft.
March 24, 1998Proposed for recommendation.
May 11, 1998Recommendation . -
CSS Table Module Level 3
This specification module defines a table-based layout system, optimized for the rendering of tabular data. In this layout model, each cell is assigned to an intersection between a set of consecutive rows and a set of consecutive columns, which are themselves generated from the structure of the table and sized according to their content.
Regardingcaption-sideNo change regardingcaption-side.October 25, 2016Working Draft.
See also, about the tables.
The W3C specification "CSS Table Module" brings together all the definitions specifically about table formatting. There aren't actually that many, but a lot of more general properties can apply to tables: dimensions, margins, etc.
Properties: