कई कॉलमों की तुलना में HTML <th> तालिका कक्ष के लिए उपयोग करने के लिए सही दायरा मूल्य क्या है?

Question

कहें कि आपके पास एक HTML तालिका है, जिसमें <th> सेल है जो कई कॉलम फैलाता है, उदा।

<table> 
    <tr> 
     <th colspan="3" scope="?">Scores</th> 
     <!-- ...more headings here... --> 
    </tr> 
    <tr> 
     <th scope="col">English</th> 
     <th scope="col">Maths</th> 
     <th scope="col">Science</th> 
     <!-- ...more sub-headings here... --> 
    </tr> 
    <tr> 
     <td>12</td> 
     <td>16</td> 
     <td>20</td> 
     <!-- ...more cells here... --> 
    </tr> 
</table> 

स्पैनिंग हेडर सेल के लिए स्कोप विशेषता के लिए सही मूल्य क्या है? col गलत लगता है क्योंकि यह कई स्तंभों का शीर्षक है, लेकिन colgroup सही नहीं लगता है अगर मेरे पास वास्तव में कोई colgroup टैग नहीं है।

Answer 1

एचटीएमएल स्पेक में दूसरी उदाहरण तालिका के अनुसार, यह colgroup टैग की कमी के बावजूद colgroup है।

http://www.w3.org/TR/html4/struct/tables.html#h-11.4.1

Answer 2

WebAIM (मन में वेब पहुंच) समूह creating accessible data tables पर एक बड़ा लेख है। कुल मिलाकर, वे स्पैन की गई पंक्तियों या स्तंभों से परहेज करने की सलाह देते हैं, क्योंकि स्क्रीन पाठक विश्वसनीय रूप से मार्कअप की व्याख्या नहीं कर सकते हैं।

स्पैन किए गए कॉलम से पूरी तरह से बचने के लिए, मुझे स्कोप विशेषता के साथ संयोजन में आईडी/शीर्षलेख विशेषताओं का उपयोग करके वास्तव में अच्छी किस्मत मिली है। यद्यपि मार्कअप अधिक वर्बोज़ है, लेकिन यह जैव के लिए चीजों को सरल बनाना प्रतीत होता है, और इसके परिणामस्वरूप डेटा को समझने में कम परेशानी होती है।

<table> 
    <tr> 
     <th id="scores" colspan="3">Scores</th> 
    </tr> 
    <tr> 
     <th id="english" scope="col">English</th> 
     <th id="maths" scope="col">Maths</th> 
     <th id="science" scope="col">Science</th> 
    </tr> 
    <tr> 
     <td headers="scores english">12</td> 
     <td headers="scores maths">16</td> 
     <td headers="scores science">20</td> 
    </tr> 
</table> 

Answer 3

शायद शीर्षक सुविधा बेहतर आप के लिए अनुकूल हो सकता है ...

<table> 
    <caption>Scores</caption> 
    <thead> 
    <tr> 
     <th scope="col">English</th> 
     <th scope="col">Maths</th> 
     <th scope="col">Science</th> 
    </tr> 
    </thead> 
    <tbody> 
    <tr> 
     <td>12</td> 
     <td>16</td> 
     <td>20</td> 
    </tr> 
    </tbody> 
</table> 

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/caption