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

caption-side: top;

caption-side: bottom;

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
12	1	1	4	1

Tablets / Mobile
18	4	14	1	1	37

Last updated by CSSPortal on: 1st January 2024