HTML DOM टेबलडेटा headers प्रॉपर्टी: एक्सेसिबिलिटी के लिए हेडर जोड़ना

HTML DOM टेबलडेटा headers प्रॉपर्टी HTML दस्तावेज़ में टेबल के headers एट्रिब्यूट का मान लौटाती और संशोधित करती है। यह एट्रिब्यूट डेटा सेल्स को उनके संबंधित हेडर सेल्स से जोड़ता है, जो एक्सेसिबिलिटी के लिए महत्वपूर्ण है।

सिंटैक्स

1. headers प्राप्त करना:

object.headers

2. headers सेट करना:

object.headers = "headers_ids"

उदाहरण: headers मान दिखाना

<!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; }
  .show { font-size: 1.2rem; }
</style>
<body>
  <h1>DOM टेबलडेटा headers प्रॉपर्टी डेमो</h1>
  <table border="2">
    <thead>
      <tr> <th>नाम</th> <th>रोल नं.</th> </tr>
    </thead>
    <tbody>
      <tr>
        <td headers="Name">जॉन</td>
        <td headers="Rollno">071717</td>
      </tr>
      <tr>
        <td headers="Name: Jane" id="jane-data">जेन</td>
        <td headers="Rollno">031717</td>
      </tr>
    </tbody>
  </table>
  <button onclick="get()" class="btn">हेडर्स मान दिखाएं</button>
  <div class="show"></div>
  <script>
    function get() {
      document.querySelector(".show").innerHTML = document.querySelector('#jane-data').headers;
    }
  </script>
</body>
</html>

आउटपुट

1. प्रारंभ में: दो डेटा पंक्तियों वाली टेबल
2. "हेडर्स मान दिखाएं" क्लिक: "Name: Jane" प्रदर्शित होता है (जेन सेल का headers एट्रिब्यूट)

headers एट्रिब्यूट का महत्व

• एक्सेसिबिलिटी: स्क्रीन रीडर्स प्रत्येक डेटा सेल के लिए संबंधित हेडर घोषित कर सकते हैं
• जटिल टेबल्स: जब हेडर्स स्पष्ट नहीं होते (मल्टी-लेवल हेडर्स)
• ID संदर्भ: स्पेस-सेपरेटेड हेडर IDs की सूची
• WCAG अनुपालन: सुलभ टेबल्स के लिए आवश्यक

उचित headers उपयोग

<table>
  <thead>
    <tr>
      <th id="h1">उत्पाद</th>
      <th id="h2">Q1</th>
      <th id="h3">Q2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th id="r1">उत्पाद A</th>
      <td headers="h2 r1">100</td>
      <td headers="h3 r1">150</td>
    </tr>
  </tbody>
</table>

scope vs headers