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

Syntax

caption-side: top | bottom | inherit

Values

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

Example

HTML

<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>

CSS

table { 
   width: 100%;
   border-collapse: collapse;
   margin-bottom: 20px;
}
td, th {
   border: 1px solid; 
}
.test {
   caption-side: top;
}
.test2 {
   caption-side: bottom;
}

Result