HTML DOM टेबलहेडर ऑब्जेक्ट: <th> एलिमेंट बनाना और गुण

HTML DOM टेबलहेडर ऑब्जेक्ट HTML दस्तावेज़ के <th> एलिमेंट को दर्शाता है।

टेबलहेडर ऑब्जेक्ट बनाना

सिंटैक्स

document.createElement("TH");

टेबलहेडर ऑब्जेक्ट के गुण

उदाहरण: डायनामिकली टेबलहेडर बनाना

<!DOCTYPE html>
<html>
<style>
  body { color: #000; background: lightblue; height: 100vh; text-align: center; }
  table { margin: 2rem auto; width: 400px; }
  .btn { background: #db133a; border: none; height: 2rem; border-radius: 2px; width: 40%; display: block; color: #fff; outline: none; cursor: pointer; margin: 1rem auto; }
</style>
<body>
  <h1>DOM टेबलहेडर ऑब्जेक्ट डेमो</h1>
  <table border="2">
    <thead>
      <tr class="table-header"> </tr>
    </thead>
    <tbody>
      <tr> <td>जॉन</td> <td>English</td> </tr>
      <tr> <td>एलन</td> <td>जर्मनी</td> </tr>
    </tbody>
  </table>
  <button onclick="get()" class="btn">एक टेबलहेडर बनाएं</button>
  <script>
    function get() {
      var th1 = document.createElement("TH");
      var th2 = document.createElement("TH");
      th1.innerHTML = "नाम";
      th2.innerHTML = "भाषा";
      document.querySelector('.table-header').appendChild(th1);
      document.querySelector('.table-header').appendChild(th2);
    }
  </script>
</body>
</html>

आउटपुट

1. प्रारंभ में: खाली हेडर पंक्ति वाली टेबल
2. "एक टेबलहेडर बनाएं" क्लिक: "नाम" और "भाषा" हेडर सेल्स जुड़ जाते हैं

थी (th) vs टीडी (td) अंतर

scope एट्रिब्यूट का उपयोग

<th scope="col">कॉलम हेडर</th>
<th scope="row">पंक्ति हेडर</th>
<th scope="colgroup">कॉलम समूह हेडर</th>
<th scope="rowgroup">पंक्ति समूह हेडर</th>