HTML DOM captionSide प्रॉपर्टी का उपयोग टेबल कैप्शन की स्थिति को प्राप्त या सेट करने के लिए किया जाता है। टेबल कैप्शन केवल ऊर्ध्वाधर स्थिति यानी ऊपर और नीचे पर सेट होता है।
सिंटैक्स निम्नलिखित है:
captionSide प्रॉपर्टी सेट करना:
object.style.captionSide = "top|bottom|initial|inherit"
उपरोक्त प्रॉपर्टी निम्नलिखित हैं:
| मान | विवरण |
|---|---|
| top | टेबल कैप्शन को टेबल के ऊपर स्थित करने के लिए। यह डिफ़ॉल्ट मान है। |
| bottom | टेबल कैप्शन को टेबल के नीचे स्थित करने के लिए। |
| initial | इस प्रॉपर्टी को प्रारंभिक मान पर सेट करने के लिए। |
| inherit | मूल तत्व के प्रॉपर्टी मान को विरासत में लेने के लिए। |
आइए captionSide प्रॉपर्टी के लिए एक उदाहरण देखें:
उदाहरण
<!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="कैप्शन साइड अब ऊपर बदल गई है"; } </script> </head> <body> <table id="t1"> <caption>डेमो कैप्शन</caption> <tr> <th>डेमो हेड</th> <th>डेमो हेड</th> </tr> <tr> <td>वहां मेरा डेटा जाता है..</td> <td>वहां मेरा..</td> </tr> <tr> <td>वहां मेरा डेटा जाता है..</td> <td>वहां मेरा..</td> </tr> </table> <p>नीचे दिए गए बटन पर क्लिक करके उपरोक्त टेबल कैप्शन स्थिति बदलें</p> <button onclick="changeCaptionPosition()">कैप्शन स्थिति बदलें</button> <p id="Sample"></p> </body> </html>आउटपुट
कैप्शन स्थिति बदलें बटन पर क्लिक करने पर:
