In this section, we will learn what the caption-side property is and how to use it in CSS.
CSS caption-side Property Definition and Usage
The CSS `caption-side` property is used to set the position of the caption of a table in an HTML document.
By default, this caption is set on top of a table, but using this property, we can change the location to bottom of a table if we needed.
CSS caption-side Property Syntax
caption-side: top|bottom|initial|inherit;
CSS caption-side Property Value
- top: This is the default value and, if used, the caption of a table will be put on top of that table.
- bottom: this value means put the caption of a table at its bottom.
Note: the two global values “initial” and “inherit” could also be used for this property.
Example: caption-side property in CSS
See the Pen caption-side property in CSS by Enjoy Tutorials (@enjoytutorials) on CodePen.
How Does CSS caption-side Property Work?
In this example, the value of the `caption-side` property is set to “bottom” and, as you can see, the caption of this table is now appeared below the table itself.