Controlling the Position of Table Caption using CSS

CSSWeb DevelopmentFront 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>

Output

This gives the following output −

raja
Published on 06-Jan-2020 10:07:09
Advertisements