CSS caption-side Property

Description

The caption-side CSS property is used to determine the placement of a table's caption element in relation to the table itself. This property can take one of three values: "top," "bottom," or "inherit." When set to "top," the caption appears above the table, while "bottom" places it below the table. The "inherit" value allows the caption's placement to inherit its positioning from its parent element. This property is particularly useful for controlling the visual layout of tables and ensuring that captions are displayed where they best complement the content and design of the table.

Initial value
top
Applies to
Tables with a caption
Inherited
Yes
Computed value
As specified
Animatable
No
JavaScript syntax
object.style.captionSide

Interactive Demo

Grocery Prices
Bananas5 Dollars
Apples10 Dollars
Oranges2 Dollars
Grapes3 Dollars

Syntax

caption-side: top | bottom | inherit

Values

  • topPositions the caption box above the table box.
  • bottomPositions the caption box below the table box.

Example

<table class="test"> 
<caption>Table Title</caption>
<tr>
<td>Bananas</td><td>5 Dollars</td>
</tr>
<tr>
<td>Apples</td><td>10 Dollars</td>
</tr>
</table>
<table class="test2">
<caption>Table Title</caption>
<tr>
<th>Name</th><th>Price</th>
</tr>
<tr>
<td>Bananas</td><td>5 Dollars</td>
</tr>
<tr>
<td>Apples</td><td>10 Dollars</td>
</tr>
</table>
table { 
   width: 100%;
   border-collapse: collapse;
   margin-bottom: 20px;
}
td, th {
   border: 1px solid; 
}
.test {
   caption-side: top;
}
.test2 {
   caption-side: bottom;
}

Browser Support

The following table will show you the current browser support for the CSS caption-side property.

Desktop
Edge Chrome Firefox Opera Safari
121141
Tablets / Mobile
Chrome Firefox Opera Safari Samsung Webview
184141137

Last updated by CSSPortal on: 1st January 2024