Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
HTML DOM Style captionSide Property
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
Updated on: 23-Oct-2019
22 Views
Advertisements