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

<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

Desktop
8	12	1	1	4	1
Tablets / Mobile
≤37	18	4	14	1	1.0

Last updated by CSSPortal on: 26th October 2019