The caption-side property sets the position of a table caption.
Options are the top or bottom of the table.
By default, the caption is located at the bottom.
A table with a caption at the bottom.
| Name | Position | Gender |
|---|---|---|
| Alfred Futter | Web Designer | Male |
| Nicolas Stuart | Web Designer | Male |
| Joseph McGuire | Graphic Artist | Male |
| Sarah Mitts | Video Edittor | Female |
| Michelle Ranger | Data Analyst | Female |
<style>
.tb { border-collapse: collapse; width: 400px;}
.tb th { background: aliceblue; }
.tb th, .tb td { padding: 5px 7px; border: solid 1px #e7e7e8; }
.tb caption { margin-top: 15px;
caption-side: bottom;
background: aliceblue;
color: black;
padding-left: 10px;
}
</style>
<table class="tb" cellspacing="0">
<caption>Table 1.0 Employees List</caption>
<tbody>
<tr>
<th>Name</th>
<th>Position</th>
<th>Gender</th>
</tr>
<tr>
<td>Alfred Futter</td>
<td>Web Designer</td>
<td>Male</td>
</tr>
<tr>
<td>Nicolas Stuart</td>
<td>Web Designer</td>
<td>Male</td>
</tr>
<tr>
<td>Joseph McGuire</td>
<td>Graphic Artist</td>
<td>Male</td>
</tr>
<tr>
<td>Sarah Mitts</td>
<td>Video Edittor</td>
<td>Female</td>
</tr>
<tr>
<td>Michelle Ranger</td>
<td>Data Analyst</td>
<td>Female</td>
</tr>
</tbody>
</table>
caption-side: top | bottom | initial | inherit;
| Value | Description |
|---|---|
| bottom | Default. Caption is below the table |
| top | Caption is placed above the table |
| initial | Sets the value to its default value. |
| inherit | Inherits the value from its parent element. |
Click the buttons to see the different caption-side values.
| Name | Position | Gender |
|---|---|---|
| Alfred Futter | Web Designer | Male |
| Nicolas Stuart | Web Designer | Male |
| Joseph McGuire | Graphic Artist | Male |
| Sarah Mitts | Video Edittor | Female |
| Michelle Ranger | Data Analyst | Female |
<style>
.tbl { border-collapse: collapse; width: 400px; }
.tbl th { background: aliceblue; }
.tbl th, .tbl td { padding: 5px 7px; border: solid 1px #e7e7e8; }
.tbl .caption {
margin: 15px 0;
caption-side: top;
background: aliceblue;
color: black;
padding-left: 10px;
</style>
<table class="tbl" border="1">
<caption class="caption">Table 1.0 Employees List</caption>
<tbody>
<tr>
<th>Name</th>
<th>Position</th>
<th>Gender</th>
</tr>
<tr>
<td>Alfred Futter</td>
<td>Web Designer</td>
<td>Male</td>
</tr>
<tr>
<td>Nicolas Stuart</td>
<td>Web Designer</td>
<td>Male</td>
</tr>
<tr>
<td>Joseph McGuire</td>
<td>Graphic Artist</td>
<td>Male</td>
</tr>
<tr>
<td>Sarah Mitts</td>
<td>Video Edittor</td>
<td>Female</td>
</tr>
<tr>
<td>Michelle Ranger</td>
<td>Data Analyst</td>
<td>Female</td>
</tr>
</tbody>
</table>
This table shows when caption-side support started for each browser.
 Chrome
|
1.0 | Dec 2008 |
 Firefox
|
1.0 | Nov 2004 |
 IE/Edge
|
8.0 | Mar 2009 |
 Opera
|
4.0 | Jun 2000 |
 Safari
|
1.0 | Jun 2003 |
