The CSS caption-side property defines the placement of a table caption.
Demo:
Click the button to change the caption-side property of the caption element:
| Name | Job Title | |
|---|---|---|
| Adam White | IT Coordinator | white@example.com |
| Tom Brown | Web Developer | brown@example.com |
| Matt Smith | Network Administrator | matt@example.com |
Syntax:
caption-side: top|bottom;top (default) – puts the caption above the table.
bottom – puts the caption under the table.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border-collapse: collapse;
}
#example1 {
caption-side: bottom;
}
#example2 {
caption-side: top;
}
</style>
</head>
<body>
<h4>caption-side: bottom;</h4>
<table id="example1" border="1">
<caption id="caption">List of employees</caption>
<tr>
<th>Name</th>
<th>Job Title</th>
<th>e-mail</th>
</tr>
<tr>
<td>Adam White</td>
<td>IT Coordinator</td>
<td>white@example.com</td>
</tr>
<tr>
<td>Tom Brown</td>
<td>Web Developer</td>
<td>brown@example.com</td>
</tr>
<tr>
<td>Matt Smith</td>
<td>Network Administrator</td>
<td>matt@example.com</td>
</tr>
</table>
<h4>caption-side: top;</h4>
<table id="example2" border="1">
<caption id="caption">List of employees</caption>
<tr>
<th>Name</th>
<th>Job Title</th>
<th>e-mail</th>
</tr>
<tr>
<td>Adam White</td>
<td>IT Coordinator</td>
<td>white@example.com</td>
</tr>
<tr>
<td>Tom Brown</td>
<td>Web Developer</td>
<td>brown@example.com</td>
</tr>
<tr>
<td>Matt Smith</td>
<td>Network Administrator</td>
<td>matt@example.com</td>
</tr>
</table>
</body>
</html>Output:
caption-side: bottom;
| Name | Job Title | |
|---|---|---|
| Adam White | IT Coordinator | white@example.com |
| Tom Brown | Web Developer | brown@example.com |
| Matt Smith | Network Administrator | matt@example.com |
caption-side: top;
| Name | Job Title | |
|---|---|---|
| Adam White | IT Coordinator | white@example.com |
| Tom Brown | Web Developer | brown@example.com |
| Matt Smith | Network Administrator | matt@example.com |
Enjoy coding!
Read also:
HTML tbody tag, thead tag & tfoot tag