The DOM Style captionSide property is used to set or return the position of the caption in a table.
Syntax:
- To get the captionSide Property
object.style.captionSide
- To set the captionSide Property
object.style.captionSide = "bottom | top | initial | inherit"
Return Values: It returns a string value, which represents the position of the table caption.
Property Values:
1. bottom: This is used to position the caption on the bottom.
Example-1:
<!DOCTYPE html>
<html>
<head>
<title>
DOM Style captionSide Property
</title>
<style>
th,td {
border: 2px solid black;
padding: 10px;
margin: 10px;
}
</style>
</head>
<body>
<h1 style="color: green">
GeeksforGeeks
</h1>
<b>
DOM Style captionSide Property
</b>
<table>
<caption id="caption1">
List of books
</caption>
<tr>
<th>Book</th>
<th>Author</th>
<th>Price</th>
</tr>
<tr>
<td>Head First Java</td>
<td>Bert Bates, Kathy Sierra</td>
<td>500</td>
</tr>
<tr>
<td>Introduction to Algorithms</td>
<td>CLRS</td>
<td>1000</td>
</tr>
</table>
<button onclick="setCaptionSide()"
style="margin-top: 10px">
Set captionSide
</button>
<!-- Script to set captionSide to bottom -->
<script>
function setCaptionSide() {
elem = document.querySelector('#caption1');
elem.style.captionSide = 'bottom';
}
</script>
</body>
</html>
Output:
Before clicking the button:
After clicking the button:
2. top: This is used to position the caption on the top. This is the default value.
Example-2:
<!DOCTYPE html>
<html>
<head>
<title>
DOM Style captionSide Property
</title>
<style>
th,td {
border: 2px solid black;
padding: 10px;
margin: 10px;
}
#caption1 {
caption-side: bottom;
}
</style>
</head>
<body>
<h1 style="color: green">
GeeksforGeeks
</h1>
<b>
DOM Style captionSide Property
</b>
<table>
<caption id="caption1">
List of books
</caption>
<tr>
<th>Book</th>
<th>Author</th>
<th>Price</th>
</tr>
<tr>
<td>Head First Java</td>
<td>Bert Bates, Kathy Sierra</td>
<td>500</td>
</tr>
<tr>
<td>Introduction to Algorithms</td>
<td>CLRS</td>
<td>1000</td>
</tr>
</table>
<button onclick="setCaptionSide()"
style="margin-top: 10px">
Set captionSide
</button>
<!-- Script to set captionSide to top -->
<script>
function setCaptionSide() {
elem = document.querySelector('#caption1');
elem.style.captionSide = 'top';
}
</script>
</body>
</html>
Output:
Before clicking the button:
After clicking the button:
3. initial: This is used to set this property to its default value.
Example-3:
<!DOCTYPE html>
<html>
<head>
<title>
DOM Style captionSide Property
</title>
<style>
th,td {
border: 2px solid black;
padding: 10px;
margin: 10px;
}
#caption1 {
caption-side: bottom;
}
</style>
</head>
<body>
<h1 style="color: green">
GeeksforGeeks
</h1>
<b>
DOM Style captionSide Property
</b>
<table>
<caption id="caption1">
List of books
</caption>
<tr>
<th>Book</th>
<th>Author</th>
<th>Price</th>
</tr>
<tr>
<td>Head First Java</td>
<td>Bert Bates, Kathy Sierra</td>
<td>500</td>
</tr>
<tr>
<td>Introduction to Algorithms</td>
<td>CLRS</td>
<td>1000</td>
</tr>
</table>
<button onclick="setCaptionSide()"
style="margin-top: 10px">
Set captionSide
</button>
<!-- Script to set captionSide to initial -->
<script>
function setCaptionSide() {
elem = document.querySelector('#caption1');
elem.style.captionSide = 'initial';
}
</script>
</body>
</html>
Output:
Before clicking the button:
After clicking the button:
4. inherit: This inherits the property from its parent.
Example-4:
<!DOCTYPE html>
<html>
<head>
<title>
DOM Style captionSide Property
</title>
<style>
th,td {
border: 2px solid black;
padding: 10px;
margin: 10px;
}
#parent {
caption-side: bottom;
}
</style>
</head>
<body>
<h1 style="color: green">
GeeksforGeeks
</h1>
<b>
DOM Style captionSide Property
</b>
<div id="parent">
<table>
<caption id="caption1"
style="caption-side: top">
List of books
</caption>
<tr>
<th>Book</th>
<th>Author</th>
<th>Price</th>
</tr>
<tr>
<td>Head First Java</td>
<td>Bert Bates, Kathy Sierra</td>
<td>500</td>
</tr>
<tr>
<td>Introduction to Algorithms</td>
<td>CLRS</td>
<td>1000</td>
</tr>
</table>
</div>
<button onclick="setCaptionSide()"
style="margin-top: 10px">
Set captionSide
</button>
<!-- Script to set captionSide to inherit -->
<script>
function setCaptionSide() {
elem = document.querySelector('#caption1');
elem.style.captionSide = 'inherit';
}
</script>
</body>
</html>
Output:
Before clicking the button:
After clicking the button:
Supported Browsers: The browser supported by captionSide property are listed below:
- Google Chrome 1 and above
- Edge 12 and above
- Internet Explorer 8 and above
- Firefox 1 and above
- Opera 4 and above
- Apple Safari 1 and above
