Web Accessibility Academy · पाठ

पंक्ति और स्तंभ शीर्षक सही तरीके से

हर कोष्ठक को सही शीर्षकों से संबद्ध करें।

पाठ 2, कुल 4 में से13 चरण

पंक्ति और स्तंभ शीर्षक सही तरीके से, CoddyKit पर Web Accessibility Academy का एक निःशुल्क पाठ है। यह 4 में से 2वाँ पाठ है। आप नीचे पूरा पाठ निःशुल्क पढ़ सकते हैं—फिर अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर के साथ ब्राउज़र में इसका व्यावहारिक अभ्यास कर सकते हैं। यह Web Accessibility Academy सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। Web Accessibility Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

अधिकांश तालिकाओं में दो प्रकार के शीर्षक होते हैं

वास्तविक डेटा में आम तौर पर ऊपर और बगल में शीर्षक होते हैं। हर डेटा सेल एक स्तंभ शीर्षक और एक पंक्ति शीर्षक के मिलन-बिंदु पर स्थित होता है।

हर सेल को दोनों की आवश्यकता होती है

92 का मान अकेले बहुत कम अर्थ रखता है। उसे Ada और Score से जोड़ने पर यह Ada, Score, 92 बन जाता है। यही जोड़ी वह संबंध है जिसे आप बना रहे हैं।

ऊपर स्तंभ शीर्षक

पहली पंक्ति में scope=col वाले शीर्षक होते हैं। उपयोगकर्ता किसी स्तंभ में नीचे की ओर तीर दबाता है, तो स्क्रीन रीडर संदर्भ के लिए उस स्तंभ का शीर्षक दोहराता रहता है।

<tr>
  <th scope="col">Student</th>
  <th scope="col">Score</th>
</tr>

बगल में पंक्ति शीर्षक

मुख्य भाग की हर पंक्ति का पहला सेल scope=row वाला शीर्षक बन जाता है। यह पंक्ति का नाम बताता है, जिससे उपयोगकर्ता के पढ़ते समय मानों को कोई व्यक्ति या समय-संदर्भ मिलता है।

<tr>
  <th scope="row">Ada</th>
  <td>92</td>
</tr>

कोने का सेल

ऊपर-बाएँ का सेल अक्सर पंक्ति शीर्षकों के ऊपर और स्तंभ शीर्षकों के बगल में होता है। उसे खाली th छोड़ना ठीक है और इससे तालिका की संरचना स्पष्ट रहती है।

<tr><th></th><th scope="col">Score</th></tr>

डिफ़ॉल्ट scope एक जाल है

ब्राउज़र scope का अनुमान लगाने की कोशिश करते हैं, लेकिन सबसे सरल तालिका से आगे यह अनुमान भरोसेमंद नहीं रहता। निश्चित होने के लिए हमेशा scope स्वयं सेट करें।

thead और tbody का उपयोग करें

शीर्षक-पंक्तियों को thead में और डेटा-पंक्तियों को tbody में रखें। इससे सहायक तकनीक के लिए संरचना स्पष्ट होती है और आपका मार्कअप पढ़ना बहुत आसान हो जाता है।

<thead>
  <tr><th scope="col">Name</th></tr>
</thead>
<tbody>
  <tr><th scope="row">Ada</th></tr>
</tbody>

स्क्रीन रीडर इसे कैसे पढ़ता है

किसी डेटा सेल पर जाएँ, तो उपयोगकर्ता पहले पंक्ति शीर्षक, फिर स्तंभ शीर्षक और उसके बाद मान सुनता है। अच्छा scope ही इस घोषणा को सटीक बनाता है।

एक शीर्षक सेल, एक काम

एक th को एक ही भूमिका तक सीमित रखें: स्तंभ शीर्षक या पंक्ति शीर्षक। एक ही सेल में डेटा और नाम मिलाने से सभी के लिए संबंध अस्पष्ट हो जाता है।

एक सेल पढ़कर जाँचें

किसी भी डेटा सेल को चुनकर पूछें: क्या उसके शीर्षक उसका पूरा अर्थ समझाते हैं? यदि उसके शीर्षकों से संख्या का अर्थ स्पष्ट नहीं होता, तो आपका scope गलत है।

दो अक्षों का उदाहरण

ऊपर स्तंभ शीर्षक, बाईं ओर पंक्ति शीर्षक और बीच में डेटा। यह मैट्रिक्स आकार आपके द्वारा बनाई जाने वाली अधिकांश तालिकाओं के लिए पर्याप्त है।

<tr><th scope="row">Ada</th><td>92</td><td>88</td></tr>

त्वरित जाँच

उपयोगकर्ता अच्छी तरह चिह्नित तालिका के भीतर किसी डेटा सेल तक तीर दबाकर पहुँचता है।

इंटरैक्टिव पाठ में इसका उत्तर दें

पुनरावलोकन: दो अक्ष, दो scope

स्तंभ शीर्षक के लिए scope=col, पंक्ति शीर्षक के लिए scope=row का उपयोग करें, और हर डेटा सेल वहाँ स्थित होता है जहाँ दोनों मिलते हैं। scope स्वयं सेट करें और अनुमान पर कभी भरोसा न करें।

शुरुआत निःशुल्क

एआई शिक्षक के साथ HTML सीखें — निःशुल्क

अपने ब्राउज़र में वास्तविक कोड लिखें और चलाएँ, चौबीसों घंटे एआई शिक्षक से तुरंत सहायता पाएँ, और वेब या ऐप पर वहीं से शुरू करें जहाँ आपने छोड़ा था।

पाठ्यक्रम: 30
पाठ: 120

निःशुल्क सीखना शुरू करें पूरा पाठ्यक्रम देखें

अक्सर पूछे जाने वाले प्रश्न

क्या “पंक्ति और स्तंभ शीर्षक सही तरीके से” पाठ निःशुल्क है?

हाँ—“पंक्ति और स्तंभ शीर्षक सही तरीके से” का पूरा पाठ यहाँ वेब पर निःशुल्क पढ़ा जा सकता है। इंटरैक्टिव अभ्यास (अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर) करने और Web Accessibility Academy पाठ्यक्रम का बाकी हिस्सा अनलॉक करने के लिए CoddyKit PRO लें। Web Accessibility Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

“पंक्ति और स्तंभ शीर्षक सही तरीके से” में मैं क्या सीखूँगा?

हर कोष्ठक को सही शीर्षकों से संबद्ध करें। आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ Web Accessibility Academy का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।

क्या Web Accessibility Academy शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?

पहले के अनुभव की आवश्यकता नहीं है। CoddyKit पर Web Accessibility Academy शुरुआती से लेकर उन्नत शिक्षार्थियों तक सभी के लिए व्यवस्थित किया गया है, इसलिए आप यहीं से या शुरुआत से सीखना शुरू कर सकते हैं और अपनी गति से आगे बढ़ सकते हैं। यह 4 में से 2वाँ पाठ है।

“पंक्ति और स्तंभ शीर्षक सही तरीके से” पाठ पूरा करने में कितना समय लगता है?

CoddyKit का अधिकांश पाठ लगभग 5–10 मिनट में पूरा हो जाता है। हर पाठ छोटा और संवादात्मक है, इसलिए आप लगातार प्रगति करते हैं और वेब या ऐप पर वहीं से सीखना जारी रख सकते हैं जहाँ आपने छोड़ा था।

क्या मैं इस Web Accessibility Academy पाठ में कोड लिख और चला सकता हूँ?

हाँ। हर Web Accessibility Academy पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।

इस पाठ्यक्रम के सभी पाठ

← Web Accessibility Academy पर वापस जाएँ