The HTML DOM captionSide property is used for getting or setting the table caption position.The table caption is only set on vertical position i.e top and bottom.
Following is the syntax for −
Setting the captionSide property −
object.style.captionSide = "top|bottom|initial|inherit"
The above properties are explained as follows:
| Value | Description |
|---|---|
| top | For positioning the table caption above the table. This is the default value. |
| bottom | For positioning the table caption below the table. |
| initial | For setting this property to initial value. |
| inherit | To inherit the parent property value |
Let us look at an example for the captionSide property −
Example
<!DOCTYPE html>
<html>
<head>
<style>
#t1{
caption-side: bottom;
border: 2px dashed black;
}
td {
border: 2px solid blue;
}
caption {
font-size: 24px;
font-weight: bold;
}
</style>
<script>
function changeCaptionPosition(){
document.getElementById("t1").style.captionSide="top";
document.getElementById("Sample").innerHTML="The caption side is now changed to top ";
}
</script>
</head>
<body>
<table id="t1">
<caption>Demo Caption</caption>
<tr>
<th>demo head</th>
<th>demo head</th>
</tr>
<tr>
<td>there goes my data..</td>
<td>there goes my..</td>
</tr>
<tr>
<td>there goes my data..</td>
<td>there goes my..</td>
</tr>
</table>
<p>Change the above table caption position by clicking the below button</p>
<button onclick="changeCaptionPosition()">Change Caption Position</button>
<p id="Sample"></p>
</body>
</html>Output
On clicking the “Change Caption Position” button
