CSS caption-side Property Tutorial

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.

Leave a Reply