th, scope और caption तत्व
तालिका को शीर्षक और उचित शीर्षक-कोष्ठक दें।
th, scope और caption तत्व, CoddyKit पर Web Accessibility Academy का एक निःशुल्क पाठ है। यह 4 में से 1वाँ पाठ है। आप नीचे पूरा पाठ निःशुल्क पढ़ सकते हैं—फिर अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर के साथ ब्राउज़र में इसका व्यावहारिक अभ्यास कर सकते हैं। यह Web Accessibility Academy सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। Web Accessibility Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।
डेटा तालिकाएँ अर्थ पहुँचाती हैं
एक वास्तविक डेटा तालिका पंक्तियों और स्तंभों के बीच संबंध दिखाती है। इसे सही ढंग से चिह्नित करने पर स्क्रीन रीडर बता सकता है कि हर मान किस शीर्षक से संबंधित है।
साधारण तालिका भ्रमित करती है
यदि हर सेल केवल td हो, तो स्क्रीन रीडर संख्याएँ बिना संदर्भ के पढ़ता है। उपयोगकर्ता मान तो सुनता है, लेकिन उनका अर्थ नहीं समझ पाता।
<table>
<tr><td>Name</td><td>Score</td></tr>
<tr><td>Ada</td><td>92</td></tr>
</table>शीर्षक सेल में th का उपयोग करें
शीर्षक सेल को td से बदलकर th करें। अब ब्राउज़र समझता है कि ये सेल डेटा रखने के बजाय उसका नाम बताते हैं और इन्हें शीर्षक के रूप में उपलब्ध कराता है।
<tr><th>Name</th><th>Score</th></tr>th सब कुछ क्यों बदल देता है
th तत्व को शीर्षक के रूप में पढ़ा जाता है और इसे उन सेल से जोड़ा जा सकता है जिनका यह वर्णन करता है। यही संबंध अलग-थलग संख्याओं को अर्थ देता है।
scope विशेषता
हर th में scope जोड़कर बताएँ कि वह किन सेल पर लागू होता है। किसी स्तंभ के शीर्षक के लिए मान col और किसी पंक्ति के शीर्षक के लिए row होता है।
<th scope="col">Score</th>ऊपरी शीर्षकों के लिए scope=col
स्तंभ के ऊपर दिए गए शीर्षक पर scope=col का उपयोग करें। उपयोगकर्ता नीचे की ओर बढ़ता है तो हर सेल को यह शीर्षक संदर्भ के रूप में मिलता रहता है।
<th scope="col">City</th>बगल के शीर्षकों के लिए scope=row
जब किसी पंक्ति का पहला सेल उस पंक्ति का नाम बताता हो, जैसे बाएँ किनारे पर कोई व्यक्ति या तारीख, तब उस पर scope=row का उपयोग करें।
<th scope="row">Ada</th>caption तालिका का नाम बताता है
caption तत्व पूरी तालिका को एक शीर्षक देता है। स्क्रीन रीडर उपयोगकर्ता इसे पहले सुनते हैं, इसलिए उन्हें पता रहता है कि वे क्या देखने वाले हैं।
<table>
<caption>Quiz scores by student</caption>
</table>caption सबसे पहले होना चाहिए
तालिका के खुलने वाले टैग के ठीक बाद, उसके अंदर सबसे पहले caption रखें। कोई अन्य स्थान अमान्य है और उसे अनदेखा किया जा सकता है।
caption शीर्षक से बेहतर है
पास का h2 पर्याप्त नहीं है। caption प्रोग्राम के माध्यम से तालिका से जुड़ा होता है, इसलिए तालिका से तालिका पर जाने पर भी उपयोगकर्ताओं को शीर्षक मिलता है।
एक पूर्ण सरल तालिका
caption, scope वाले th की शीर्षक-पंक्ति, फिर डेटा-पंक्तियाँ। यह आधार अधिकांश सरल तालिकाओं को बिना किसी ARIA के पूरी तरह अभिगम्य बना देता है।
<table>
<caption>Scores</caption>
<tr><th scope="col">Name</th><th scope="col">Score</th></tr>
<tr><th scope="row">Ada</th><td>92</td></tr>
</table>त्वरित जाँच
आप तालिका के सबसे ऊपर दिए गए स्तंभ शीर्षक को चिह्नित कर रहे हैं।
पुनरावलोकन: तीन आधारभूत घटक
आपने अभिगम्य तालिकाओं के तीन घटक सीखे: शीर्षकों के लिए th, उन्हें लक्ष्य करने के लिए scope और तालिका का नाम बताने के लिए caption। अधिकांश काम यहीं पूरा हो जाता है।
एआई शिक्षक के साथ HTML सीखें — निःशुल्क
अपने ब्राउज़र में वास्तविक कोड लिखें और चलाएँ, चौबीसों घंटे एआई शिक्षक से तुरंत सहायता पाएँ, और वेब या ऐप पर वहीं से शुरू करें जहाँ आपने छोड़ा था।
- पाठ्यक्रम
- 30
- पाठ
- 120
अक्सर पूछे जाने वाले प्रश्न
क्या “th, scope और caption तत्व” पाठ निःशुल्क है?
हाँ—“th, scope और caption तत्व” का पूरा पाठ यहाँ वेब पर निःशुल्क पढ़ा जा सकता है। इंटरैक्टिव अभ्यास (अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर) करने और Web Accessibility Academy पाठ्यक्रम का बाकी हिस्सा अनलॉक करने के लिए CoddyKit PRO लें। Web Accessibility Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।
“th, scope और caption तत्व” में मैं क्या सीखूँगा?
तालिका को शीर्षक और उचित शीर्षक-कोष्ठक दें। आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ Web Accessibility Academy का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।
क्या Web Accessibility Academy शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?
पहले के अनुभव की आवश्यकता नहीं है। CoddyKit पर Web Accessibility Academy शुरुआती से लेकर उन्नत शिक्षार्थियों तक सभी के लिए व्यवस्थित किया गया है, इसलिए आप यहीं से या शुरुआत से सीखना शुरू कर सकते हैं और अपनी गति से आगे बढ़ सकते हैं। यह 4 में से 1वाँ पाठ है।
“th, scope और caption तत्व” पाठ पूरा करने में कितना समय लगता है?
CoddyKit का अधिकांश पाठ लगभग 5–10 मिनट में पूरा हो जाता है। हर पाठ छोटा और संवादात्मक है, इसलिए आप लगातार प्रगति करते हैं और वेब या ऐप पर वहीं से सीखना जारी रख सकते हैं जहाँ आपने छोड़ा था।
क्या मैं इस Web Accessibility Academy पाठ में कोड लिख और चला सकता हूँ?
हाँ। हर Web Accessibility Academy पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।
इस पाठ्यक्रम के सभी पाठ
- th, scope और caption तत्व
- पंक्ति और स्तंभ शीर्षक सही तरीके से
- जटिल तालिकाएँ: headers और id का युग्मन
- लेआउट तालिकाएँ एक जाल हैं