HTML DOM टेबल createCaption() मेथड: टेबल कैप्शन बनाना

HTML DOM टेबल createCaption() मेथड एक खाली <caption> एलिमेंट जनरेट करता है और इसे HTML दस्तावेज़ में टेबल में जोड़ता है। यदि टेबल में पहले से कैप्शन है, तो यह मौजूदा कैप्शन को लौटाता है।

सिंटैक्स

object.createCaption()

उदाहरण: टेबल कैप्शन बनाना

<!DOCTYPE html>
<html>
<style>
  body { color: #000; background: lightblue; height: 100vh; text-align: center; }
  table { margin: 2rem auto; }
  caption { color: #db133a; }
  .btn { background: #db133a; border: none; height: 2rem; border-radius: 2px; width: 40%; display: block; color: #fff; outline: none; cursor: pointer; margin: 1rem auto; }
  .show { font-size: 1.2rem; }
</style>
<body>
  <h1>DOM टेबल createCaption() मेथड डेमो</h1>
  <table border="2">
    <tr> <td>नाम</td> <td>रोल नं.</td> </tr>
    <tr> <td>जॉन</td> <td>071717</td> </tr>
    <tr> <td>जेन</td> <td>031717</td> </tr>
  </table>
  <button onclick="create()" class="btn">कैप्शन बनाएं</button>
  <script>
    function create() {
      var tableCaption = document.querySelector('table').createCaption();
      tableCaption.innerHTML = "छात्र डेटा";
    }
  </script>
</body>
</html>

आउटपुट

1. प्रारंभ में: टेबल बिना कैप्शन के
2. "कैप्शन बनाएं" क्लिक: टेबल के ऊपर "छात्र डेटा" कैप्शन दिखाई देता है

कैप्शन के लिए सर्वोत्तम अभ्यास

• विवरणात्मक: टेबल का उद्देश्य स्पष्ट करें
• संक्षिप्त: 1-2 वाक्य पर्याप्त
• पहला चाइल्ड: <caption> टेबल का पहला चाइल्ड होना चाहिए
• एक्सेसिबिलिटी: स्क्रीन रीडर्स कैप्शन को टेबल शीर्षक के रूप में घोषित करते हैं

कैप्शन स्टाइलिंग

caption {
  caption-side: top; /* top या bottom */
  text-align: left;  /* या center */
  font-weight: bold;
  font-size: 1.1em;
  padding: 10px;
  color: #333;
  background: #f9f9f9;
  border-bottom: 2px solid #ddd;
}

संबंधित मेथड्स