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
Explorer Edge Chrome Firefox Opera Safari
8121141
Tablets / Mobile
Android Chrome Firefox Opera Safari Samsung
≤37184X1X

Last updated by CSSPortal on: 26th October 2019