HTML DOM टेबल tHead प्रॉपर्टी: टेबल हेडर एक्सेस करना

HTML DOM टेबल tHead प्रॉपर्टी HTML दस्तावेज़ में टेबल के <thead> एलिमेंट को लौटाती है।

सिंटैक्स

object.tHead

उदाहरण: tHead दिखाना

<!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 टेबल tHead प्रॉपर्टी डेमो</h1>
  <table border="2">
    <thead>
      <tr> <th>नाम</th> <th>रोल नं.</th> </tr>
    </thead>
    <tbody>
      <tr> <td>जॉन</td> <td>071717</td> </tr>
      <tr> <td>जेन</td> <td>031717</td> </tr>
    </tbody>
    <tfoot>
      <tr> <td colspan="2">टेबल फुटर</td> </tr>
    </tfoot>
  </table>
  <button onclick="get()" class="btn">tHead दिखाएं</button>
  <div class="show"></div>
  <script>
    function get() {
      var tableHeader = document.querySelector('table').tHead;
      document.querySelector(".show").innerHTML = tableHeader.innerHTML;
    }
  </script>
</body>
</html>

आउटपुट

1. प्रारंभ में: टेबल हेडर, बॉडी, फुटर के साथ दिखती है
2. "tHead दिखाएं" क्लिक: हेडर का HTML कंटेंट ("<tr><th>नाम</th><th>रोल नं.</th></tr>") प्रदर्शित होता है

tHead प्रॉपर्टी के उपयोग

• पढ़ना: मौजूदा हेडर कंटेंट प्राप्त करना
• संशोधित करना: table.tHead.innerHTML = "..."
• स्टाइलिंग: table.tHead.style.background = "#eee"
• जांचना: if (table.tHead) { ... } - हेडर मौजूद है या नहीं

tHead vs createTHead()

संबंधित प्रॉपर्टीज

• tFoot - <tfoot> एलिमेंट
• caption - <caption> एलिमेंट
• rows - सभी <tr> कलेक्शन
• tBodies - सभी <tbody> कलेक्शन