CSS caption-side property

src

CSS caption-side represents the position of caption vertically. It might be at the top of table or at the bottom of table.

Syntax

caption-side : top | bottom

Property values

topDefault: It aligns the caption at the top of table.; caption-side: top;
Try it
bottom: It aligns the caption at the bottom of table.; caption-side: bottom;
Try it

Applicable to

It applies to a table element.

Preview

Code

CSS

.element{
width:100px;
height:100px;
background-color: rgba(240,240,240,0.5);
padding:10px;
border:10px solid red;
}
table{
border-collapse:collapse;
}
table td, table th{
border:1px solid rgba(230,230,230,1);	
}

HTML

<table>
<caption class="caption">Score</caption>
<tr>
<th>Name</th>
<th>Aggregate</th>
<th>Degree</th>
</tr>
<tr>
<th>John</th>
<td>70%</td>
<td>BCS</td>
</tr>
<tr>
<th>James</th>
<td>80%</td>
<td>BIT</td>
</tr>

<tr>
<th>Chips</th>
<td>90%</td>
<td>BSE</td>
</tr>
</table>

CSS3 Properties

Syntax

Property values

Applicable to