HTML DOM कैप्शनसाइड प्रॉपर्टी का उपयोग टेबल कैप्शन पोजीशन प्राप्त करने या सेट करने के लिए किया जाता है। टेबल कैप्शन केवल वर्टिकल पोजीशन यानी ऊपर और नीचे सेट होता है।
−
. के लिए वाक्य रचना निम्नलिखित हैकैप्शन साइड प्रॉपर्टी सेट करना -
object.style.captionSide = "top|bottom|initial|inherit"
उपरोक्त गुणों को इस प्रकार समझाया गया है:
| मान | <वें शैली ="पाठ-संरेखण:केंद्र;">विवरण|
|---|---|
| शीर्ष | तालिका कैप्शन को तालिका के ऊपर रखने के लिए। यह व्यतिक्रम मूल्य है। |
| नीचे | तालिका के नीचे तालिका शीर्षक की स्थिति के लिए। |
| प्रारंभिक | इस गुण को प्रारंभिक मान पर सेट करने के लिए। |
| उत्तराधिकारी | मूल संपत्ति मूल्य प्राप्त करने के लिए |
आइए कैप्शन साइड प्रॉपर्टी के लिए एक उदाहरण देखें -
उदाहरण
<!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> आउटपुट
“कैप्शन स्थिति बदलें . पर क्लिक करने पर "बटन
