Controlling the Position of Table Caption using CSS

CSS Web Development Front End Technology

The CSS caption-side property is used to vertically position the table caption box. It can take top and bottom as values. By default, table caption is placed at the top.

Syntax

The syntax of CSS list-style property is as follows−

Selector {
   caption-side: /*value*/
}

Example

The following examples illustrate the CSS caption-side property.

Live Demo

<!DOCTYPE html>
<html>
<head>
<style>
table * {
   border: ridge skyblue;
   padding: 0.5rem;
}
table {
   margin: 20px;
   box-shadow: 0 0 6px 3px indianred;
   empty-cells: show;
}
caption {
   border-top-style: none;
   caption-side: bottom;
   border-color: darkkhaki;
   border-radius: 50%;
}
</style>
</head>
<body>
<table id="demo">
<caption>Demo</caption>
<tr>
<th colspan="3">Table</th>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>

Output

This gives the following output −

Example

Live Demo

<!DOCTYPE html>
<html>
<head>
<style>
table {
   margin: auto;
   border: double black 13px;
   border-radius: 6px;
}
td, th {
   border-left: 1px solid black;
   border-top: 1px solid black;
}
th {
   background-color: lightblue;
   border-top: none;
}
td:first-child, th:first-child {
   border-left: none;
}
caption {
   margin-top: 3px;
   background-color: purple;
   caption-side: bottom;
   color: white;
   border-radius: 20%;
}
</style>
</head>
<body>
<h2>Demo Table</h2>
<table>
<caption>Demo</caption>
<tr>
<th colspan="4">Table</th>
</tr>
<tr>
<td>One...</td>
<td>Two...</td>
<td>Three</td>
<td>Four</td>
</tr>
<tr>
<td>Five</td>
<td>Six</td>
<td>Seven</td>
<td>Eight</td>
</tr>
</table>
</body>
</html>