CSS caption-side Property

Description

The caption-side property determines the position of the table header, which is set using the <caption> element, relative to the table itself. The caption-side property displays the title before or after the table, and text alignment to the right or left is set via the text-align property.

Initial value: top
Applies to: Tables with a caption
Inherited: Yes
Media: Visual
Computed value: As specified
Animatable: No
CSS Version: CSS2, CSS3
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