Tables

एचटीएमएल टेबल का इस्तेमाल, पंक्तियों और कॉलम के साथ टेबल के तौर पर डेटा दिखाने के लिए किया जाता है. <table> का इस्तेमाल करने का फ़ैसला, आपके दिखाए जा रहे कॉन्टेंट और उस कॉन्टेंट से जुड़ी उपयोगकर्ताओं की ज़रूरतों के आधार पर लिया जाना चाहिए. अगर डेटा को दिखाया जा रहा है, उसकी तुलना की जा रही है, उसे क्रम में लगाया जा रहा है, उसका हिसाब लगाया जा रहा है या उसका क्रॉस-रेफ़रंस दिया जा रहा है, तो <table> सही विकल्प है. अगर आपको टेबल के अलावा किसी दूसरे कॉन्टेंट को व्यवस्थित तरीके से दिखाना है, जैसे कि थंबनेल इमेज का बड़ा ग्रुप, तो टेबल का इस्तेमाल न करें. इसके बजाय, इमेज की सूची बनाएं और सीएसएस की मदद से ग्रिड को स्टाइल करें.

इस सेक्शन में, हम टेबल बनाने वाले सभी एलिमेंट के बारे में बात करेंगे. साथ ही, टेबल के डेटा को दिखाते समय, सुलभता और इस्तेमाल से जुड़ी कुछ सुविधाओं के बारे में भी बताएंगे. एचटीएमएल सीखना, सीएसएस के बारे में नहीं है. सीएसएस सीखने के लिए एक पूरा कोर्स है. हालांकि, हम टेबल के हिसाब से कुछ सीएसएस प्रॉपर्टी के बारे में बताएंगे.

टेबल के एलिमेंट, क्रम में

<table> टैग, टेबल के कॉन्टेंट को रैप करता है. इसमें टेबल के सभी एलिमेंट शामिल होते हैं. <table> की 'असाइन की गई ARIA भूमिका' table है. सहायक टेक्नोलॉजी को पता है कि यह एलिमेंट एक टेबल स्ट्रक्चर है, जिसमें पंक्तियों और कॉलम में व्यवस्थित किया गया डेटा होता है. अगर टेबल में चुने गए सेल की स्थिति बनी रहती है, उसमें दो-आयामी नेविगेशन होता है या उपयोगकर्ता को सेल के क्रम में बदलाव करने की अनुमति होती है, तो role="grid" सेट करें. अगर grid की पंक्तियों को बड़ा और छोटा किया जा सकता है, तो इसके बजाय role="treegrid" का इस्तेमाल करें.

<table> में, आपको टेबल हेडर (<thead>), टेबल बॉडी (<tbody>), और टेबल फ़ुटर (<tfoot>) दिखेंगे. हालांकि, टेबल फ़ुटर ज़रूरी नहीं है. इनमें से हर एक, टेबल लाइनों (<tr>) से बना होता है. लाइनों में टेबल हेडर (<th>) और टेबल डेटा (<td>) सेल होती हैं. इनमें ही पूरा डेटा होता है. डीओएम में, इनमें से किसी भी चीज़ से पहले, आपको दो और सुविधाएं मिल सकती हैं: टेबल कैप्शन (<caption>) और कॉलम ग्रुप (<colgroup>). <colgroup> में span एट्रिब्यूट होने या न होने के आधार पर, इसमें नेस्ट किए गए टेबल कॉलम (<col>) एलिमेंट हो सकते हैं.

टेबल के चाइल्ड एलिमेंट का क्रम इस तरह है:

1. <caption> एलिमेंट
2. <colgroup> एलिमेंट
3. <thead> एलिमेंट
4. <tbody> एलिमेंट
5. <tfoot> एलिमेंट

हम <table> एलिमेंट के चाइल्ड एलिमेंट के बारे में बताएंगे. इनका इस्तेमाल करना ज़रूरी नहीं है, लेकिन इनका सुझाव दिया जाता है. इसके बाद, हम पंक्तियों, टेबल हेडर सेल, और टेबल डेटा सेल के बारे में बताएंगे. <colgroup> को आखिर में कवर किया जाएगा.

टेबल का कैप्शन

<caption>, नेटिव और सेमैंटिक एलिमेंट है. इसलिए, टेबल को नाम देने के लिए, इसका इस्तेमाल करना सबसे सही तरीका है. <caption>, प्रोग्राम के हिसाब से टेबल का टाइटल देता है. यह डिफ़ॉल्ट रूप से सभी लोगों को दिखता है और सभी के लिए उपलब्ध होता है.

<caption> एलिमेंट, <table> एलिमेंट में नेस्ट किया गया पहला एलिमेंट होना चाहिए. इसे शामिल करने से, सभी उपयोगकर्ताओं को टेबल का मकसद तुरंत पता चल जाता है. इसके लिए, उन्हें आस-पास मौजूद टेक्स्ट पढ़ने की ज़रूरत नहीं पड़ती. इसके अलावा, कैप्शन के तौर पर सुलभ नाम देने के लिए, <table> पर aria-label या aria-labelledby का इस्तेमाल किया जा सकता है. <caption> एलिमेंट में, एलिमेंट के हिसाब से कोई एट्रिब्यूट नहीं होता.

कैप्शन, टेबल के बाहर दिखता है. कैप्शन की जगह को CSS caption-side प्रॉपर्टी की मदद से सेट किया जा सकता है. यह तरीका, अब काम न करने वाले align एट्रिब्यूट का इस्तेमाल करने से बेहतर है. इससे कैप्शन को सबसे ऊपर और सबसे नीचे सेट किया जा सकता है. फ़िलहाल, inline-start और inline-end का इस्तेमाल करके, बाईं और दाईं ओर सबटाइटल दिखाने की सुविधा पूरी तरह से काम नहीं करती. 'टॉप', ब्राउज़र में डिफ़ॉल्ट रूप से दिखने वाला प्रज़ेंटेशन है.

डेटा टेबल में साफ़ हेडर और कैप्शन होने चाहिए. साथ ही, वे इतनी आसान होनी चाहिए कि उनमें मौजूद जानकारी अपने-आप समझ आ जाए. ध्यान रखें कि सभी उपयोगकर्ताओं की समझने की क्षमता एक जैसी नहीं होती. जब टेबल में "कोई बात कही जा रही हो" या किसी और तरह से टेबल की व्याख्या की ज़रूरत हो, तो टेबल के मुख्य पॉइंट या फ़ंक्शन की खास जानकारी दें. समरी को कहां रखा जाए, यह इस बात पर निर्भर करता है कि वह कितनी लंबी है और उसमें दी गई जानकारी कितनी जटिल है. अगर यह छोटा है, तो इसका इस्तेमाल कैप्शन के अंदरूनी टेक्स्ट के तौर पर करें. अगर टेबल में दी गई जानकारी ज़्यादा है, तो कैप्शन में उसकी खास जानकारी दें. साथ ही, टेबल से पहले दिए गए पैराग्राफ़ में भी खास जानकारी दें. इन दोनों को aria-describedby एट्रिब्यूट से जोड़ें. टेबल को <figure> में और खास जानकारी को <figcaption> में डालना एक और विकल्प है.

डेटा सेक्शन करना

टेबल का कॉन्टेंट ज़्यादा से ज़्यादा तीन सेक्शन में होता है: शून्य या उससे ज़्यादा टेबल हेडर (<thead>), टेबल बॉडी (<tbody>), और टेबल फ़ुटर (<tfoot>). ये सभी सेक्शन ज़रूरी नहीं हैं. इनमें से किसी भी सेक्शन में शून्य या उससे ज़्यादा एलिमेंट हो सकते हैं.

ये एलिमेंट, टेबल को ऐक्सेस करने में मदद नहीं करते या उसमें रुकावट नहीं डालते. हालांकि, ये इस्तेमाल करने के लिहाज़ से काम के होते हैं. ये स्टाइलिंग हुक उपलब्ध कराते हैं. उदाहरण के लिए, हेडर कॉन्टेंट को स्टिक किया जा सकता है, जबकि <tbody> कॉन्टेंट को स्क्रोल किया जा सकता है. इन तीनों एलिमेंट में से किसी एक में नेस्ट न की गई पंक्तियों को <tbody> में रैप कर दिया जाता है. तीनों में एक ही भूमिका rowgroup है. इन तीनों एलिमेंट में, एलिमेंट के हिसाब से कोई एट्रिब्यूट नहीं है.

अब तक हमने ये काम किए हैं:

<table>
  <caption>MLW Students</caption>
  <thead></thead>
  <tbody></tbody>
  <tfoot></tfoot>
</table>

<tfoot> एलिमेंट को मूल रूप से, ऐक्सेस करने की सुविधा के लिए <thead> के ठीक बाद और <tbody> से पहले रखा गया था. इसलिए, आपको लेगसी कोडबेस में सोर्स का यह गलत क्रम दिख सकता है.

टेबल का कॉन्टेंट

टेबल को टेबल हेडर, मुख्य हिस्से, और फ़ुटर में बांटा जा सकता है. हालांकि, अगर टेबल में टेबल लाइनें, सेल, और कॉन्टेंट नहीं है, तो इनमें से कोई भी काम नहीं करता. टेबल की हर लाइन, <tr> में एक या उससे ज़्यादा सेल होती हैं. अगर कोई सेल हेडर सेल है, तो <th> का इस्तेमाल करें. इसके बजाय, <td> का इस्तेमाल करें.

यूज़र-एजेंट स्टाइलशीट, आम तौर पर <th> टेबल हेडर सेल में कॉन्टेंट को बीच में और बोल्ड करके दिखाती हैं. इन डिफ़ॉल्ट स्टाइल और सभी स्टाइल को, काम न करने वाले एट्रिब्यूट के बजाय सीएसएस की मदद से बेहतर तरीके से कंट्रोल किया जा सकता है. ये एट्रिब्यूट, अलग-अलग सेल, पंक्तियों, और <table> पर उपलब्ध होते थे.

सेल के बीच और सेल के अंदर पैडिंग जोड़ने के लिए, बॉर्डर के लिए, और टेक्स्ट अलाइनमेंट के लिए एट्रिब्यूट थे. सेलपैडिंग और सेलस्पेस, एक सेल के कॉन्टेंट और उसकी बॉर्डर के बीच के स्पेस और आस-पास की सेल की बॉर्डर के बीच के स्पेस को तय करते हैं. इन्हें सीएसएस border-collapse और border-spacing प्रॉपर्टी के साथ सेट किया जाना चाहिए. अगर border-collapse: collapse सेट है, तो Border-spacing का कोई असर नहीं होगा. अगर border-collapse: separate; सेट है, तो empty-cells: hide; की मदद से खाली सेल को पूरी तरह से छिपाया जा सकता है. टेबल को स्टाइल करने के बारे में ज़्यादा जानने के लिए, टेबल से जुड़ी सीएसएस स्टाइल का इंटरैक्टिव स्लाइडडेक यहां देखें.

उदाहरणों में, हमने टेबल और हर सेल पर सीएसएस की मदद से बॉर्डर जोड़ा है, ताकि कुछ सुविधाओं को ज़्यादा साफ़ तौर पर दिखाया जा सके:

इस उदाहरण में, हमारे पास एक कैप्शन, टेबल हेडर, और टेबल बॉडी है. हेडर में एक पंक्ति है, जिसमें तीन हेडर <th> सेल हैं. इससे तीन कॉलम बनते हैं. बॉडी में डेटा की तीन लाइनें होती हैं: पहली सेल, लाइन के लिए हेडर सेल होती है. इसलिए, हम <td> के बजाय <th> का इस्तेमाल करते हैं.

<th> सेल का सेमैनटिक मतलब है. इसमें columnheader या rowheader की ARIA भूमिकाएं शामिल हैं. यह सेल को टेबल सेल के कॉलम या पंक्ति के हेडर के तौर पर तय करता है. यह तय करने के लिए, एनोटेट किए गए scope एट्रिब्यूट की वैल्यू का इस्तेमाल किया जाता है. अगर scope को साफ़ तौर पर सेट नहीं किया जाता है, तो ब्राउज़र डिफ़ॉल्ट रूप से col या row पर सेट हो जाएगा. हमने सिमेंटिक मार्कअप का इस्तेमाल किया है, इसलिए 1956 सेल में दो हेडर हैं: साल और Lou Minious. इस असोसिएशन से हमें पता चलता है कि "Lou Minious" ने "1956" में ग्रेजुएशन किया था. इस उदाहरण में, पूरी टेबल दिख रही है. इसलिए, असोसिएशन साफ़ तौर पर दिख रहा है. <th> का इस्तेमाल करने पर, हेडर कॉलम या लाइन स्क्रोल होने के बाद भी, असोसिएशन दिखता है. हमने <th scope="col">Year</th> और <th scope="row">Lou Minious</th> को साफ़ तौर पर सेट किया जा सकता था, लेकिन इस तरह की आसान टेबल में, सूची में दी गई डिफ़ॉल्ट वैल्यू काम करती हैं. scope की अन्य वैल्यू में rowgroup और colgroup शामिल हैं. ये वैल्यू, जटिल टेबल के साथ काम की होती हैं.

सेल मर्ज करना

MS Excel, Google Sheets, और Numbers की तरह ही, एक से ज़्यादा सेल को एक सेल में जोड़ा जा सकता है. ऐसा करने के लिए, एचटीएमएल का इस्तेमाल किया जाता है! colspan एट्रिब्यूट का इस्तेमाल, एक ही पंक्ति में मौजूद दो या उससे ज़्यादा आस-पास की सेल को मर्ज करने के लिए किया जाता है. rowspan एट्रिब्यूट का इस्तेमाल, पंक्तियों में मौजूद सेल को मर्ज करने के लिए किया जाता है. इसे सबसे ऊपर वाली पंक्ति की सेल में डाला जाता है.

इस उदाहरण में, टेबल हेडर में दो लाइनें हैं. पहली हेडर लाइन में चार कॉलम में फैली तीन सेल हैं: बीच की सेल में colspan="2" है. इससे, आस-पास की दो सेल मर्ज हो जाती हैं. पहली और आखिरी सेल में rowspan="2" शामिल है. इससे, सेल को उसके ठीक नीचे वाली पंक्ति में मौजूद सेल के साथ मर्ज कर दिया जाता है.

टेबल हेडर की दूसरी पंक्ति में दो सेल होती हैं. ये सेल, दूसरी पंक्ति के दूसरे और तीसरे कॉलम की होती हैं. पहली या आखिरी कॉलम के लिए कोई सेल तय नहीं की गई है, क्योंकि पहली पंक्ति में पहले और आखिरी कॉलम की सेल दो पंक्तियों में फैली हुई है.

जिन मामलों में किसी सेल को कई हेडर सेल से जोड़ा जाता है और उनका असोसिएशन सिर्फ़ scope एट्रिब्यूट से सेट नहीं किया जा सकता, उनमें headers एट्रिब्यूट को शामिल करें. साथ ही, उससे जुड़े हेडर की सूची को स्पेस से अलग करें. यह उदाहरण एक ज़्यादा जटिल टेबल है. इसलिए, हम scope एट्रिब्यूट की मदद से, हेडर के दायरे के बारे में साफ़ तौर पर बताते हैं. इसे और भी साफ़ तौर पर समझने के लिए, हमने हर सेल में headers एट्रिब्यूट जोड़ा है.

ऐसा हो सकता है कि इस तरह के आसान इस्तेमाल के उदाहरण में, headers एट्रिब्यूट की ज़रूरत न पड़ी हो. हालांकि, टेबल के जटिल होने पर, आपके टूलबेल्ट में इन एट्रिब्यूट का होना ज़रूरी है. जटिल स्ट्रक्चर वाली टेबल, जैसे कि ऐसी टेबल जिनमें हेडर या सेल मर्ज की गई हैं या जिनमें कॉलम या पंक्ति के हेडर के दो से ज़्यादा लेवल हैं, उनमें हेडर सेल की साफ़ तौर पर पहचान की ज़रूरत होती है. ऐसी जटिल टेबल में, हर डेटा सेल को उससे जुड़ी हर हेडर सेल के साथ साफ़ तौर पर जोड़ें. साथ ही, headers एट्रिब्यूट की वैल्यू के तौर पर, उससे जुड़े सभी हेडर की id वैल्यू को स्पेस से अलग करके लिखें.

headers एट्रिब्यूट आम तौर पर <td> एलिमेंट में मिलता है. हालांकि, यह <th> पर भी मान्य है.

हालांकि, टेबल के जटिल स्ट्रक्चर को समझना, स्क्रीन रीडर का इस्तेमाल करने वाले लोगों के लिए ही नहीं, बल्कि सभी लोगों के लिए मुश्किल हो सकता है. स्क्रीन रीडर की मदद से, आसानी से समझी जा सकने वाली टेबल को समझना आसान होता है. इनमें स्कोप और हेडर जोड़े बिना भी, कुछ या बिना किसी स्पैन वाली सेल होती हैं. इन्हें मैनेज करना भी आसान है!

टेबल की स्टाइल तय करना

ऐसे दो एलिमेंट हैं जिनके बारे में कम जानकारी दी गई है: कॉलम ग्रुप, <colgroup> एलिमेंट और उसका एकमात्र डिसेंडेंट, खाली <col> कॉलम एलिमेंट. टेबल में कॉलम के ग्रुप या <col> एलिमेंट तय करने के लिए, <colgroup> एलिमेंट का इस्तेमाल किया जाता है.

अगर कॉलम ग्रुपिंग का इस्तेमाल किया जाता है, तो उसे <table> में नेस्ट किया जाना चाहिए. यह <caption> के ठीक बाद और टेबल डेटा से पहले होना चाहिए. अगर ये एक से ज़्यादा कॉलम में हैं, तो span एट्रिब्यूट का इस्तेमाल करें.

आम तौर पर, टेबल के लिए कॉन्टेंट की आउटलाइन का क्रम इस तरह होता है. इसमें <table> और <caption> ऐसे दो एलिमेंट हैं जिन्हें शामिल करना ज़रूरी है:

<table>
  <caption>Table Caption</caption>
  <colgroup>
    <col/>
  </colgroup>
  <thead>...

टेबल को ज़्यादा ऐक्सेस करने लायक बनाने के लिए, <colgroup> और <col>, दोनों का सेमैंटिक मतलब नहीं है. हालांकि, ये कॉलम के लिए सीमित स्टाइल की अनुमति देते हैं. इसमें सीएसएस की मदद से कॉलम की चौड़ाई सेट करना भी शामिल है.

<col> स्टाइल, किसी कॉलम को तब तक स्टाइल करेगा, जब तक उस स्टाइल को बदलने वाली <td> या <th> स्टाइल मौजूद न हों. उदाहरण के लिए, जब किसी टेबल की कुछ पंक्तियों की सेल को मर्ज करने के लिए <colspan> का इस्तेमाल किया जाता है, तो यह पक्का नहीं किया जा सकता कि tr > *:nth-child(8) जैसे सिलेक्टर, जो हर पंक्ति के आठवें चाइल्ड को चुनता है, वह आठवें कॉलम को पूरी तरह से हाइलाइट करेगा या कई पंक्तियों के आठवें कॉलम को हाइलाइट करेगा. हालांकि, यह इस बात पर निर्भर करता है कि किन पंक्तियों या कॉलम की सेल को मर्ज किया गया था.

माफ़ करें, सिर्फ़ कुछ प्रॉपर्टी के साथ काम करता है. स्टाइल, सेल में इनहेरिट नहीं होती हैं. साथ ही, टारगेटिंग सेल में <col> एलिमेंट का इस्तेमाल करने का एक ही तरीका है. इसके लिए, :has() रिलेशनल सिलेक्टर वाले कॉम्प्लेक्स सिलेक्टर का इस्तेमाल करना होगा.

अगर <table> और <colgroup>, दोनों का बैकग्राउंड कलर है, तो <colgroup> का background-color सबसे ऊपर दिखेगा. ड्रॉ करने का क्रम यह है: टेबल, कॉलम ग्रुप, कॉलम, पंक्ति ग्रुप, पंक्तियां, जिनमें सेल सबसे आखिर में और सबसे ऊपर होती हैं, जैसा कि टेबल लेयर के स्कीमा में दिखाया गया है. <td> और <th> एलिमेंट, <colgroup> या <col> एलिमेंट के डिसेंडेंट नहीं हैं. साथ ही, इनमें उनकी स्टाइल इनहेरिट नहीं होती.

टेबल को स्ट्रिप करने के लिए, सीएसएस स्ट्रक्चरल सिलेक्टर का इस्तेमाल किया जा सकता है. उदाहरण के लिए, tbody tr:nth-of-type(odd) {background-color: rgba(0 0 0 / 0.1);} टेबल के मुख्य हिस्से में मौजूद हर विषम लाइन में पारदर्शी काला रंग जोड़ देगा. इससे, <colgroup> पर सेट किए गए बैकग्राउंड इफ़ेक्ट दिखेंगे.

टेबल, डिफ़ॉल्ट रूप से रिस्पॉन्सिव नहीं होती हैं. इसके बजाय, इन्हें डिफ़ॉल्ट रूप से उनके कॉन्टेंट के हिसाब से साइज़ किया जाता है. टेबल के लेआउट की स्टाइल को अलग-अलग डिवाइसों पर बेहतर तरीके से काम करने के लिए, कुछ और तरीके अपनाने पड़ते हैं. अगर टेबल एलिमेंट के लिए सीएसएस डिसप्ले प्रॉपर्टी बदली जा रही है, तो ARIA role एट्रिब्यूट शामिल करें. ऐसा लग सकता है कि यह ज़रूरी नहीं है, लेकिन सीएसएस displayप्रॉपर्टी से कुछ ब्राउज़र में, सुलभता ट्री पर असर पड़ सकता है.

डेटा दिखाना

टेबल एलिमेंट के सेमैनटिक मतलब होते हैं. सहायक टेक्नोलॉजी इनका इस्तेमाल करके, पंक्तियों और कॉलम के बीच 'खोए' बिना नेविगेट करने की सुविधा देती हैं. <table> एलिमेंट का इस्तेमाल प्रज़ेंटेशन के लिए नहीं किया जाना चाहिए. अगर आपको सूची के ऊपर हेडर चाहिए, तो हेडर और सूची का इस्तेमाल करें. अगर आपको कॉन्टेंट को कई कॉलम में लेआउट करना है, तो कई कॉलम वाले लेआउट का इस्तेमाल करें. अगर आपको कॉन्टेंट को ग्रिड में लेआउट करना है, तो सीएसएस ग्रिड का इस्तेमाल करें. डेटा के लिए सिर्फ़ टेबल का इस्तेमाल करें. इस बारे में इस तरह से सोचें: अगर आपके डेटा को मीटिंग में दिखाने के लिए स्प्रेडशीट की ज़रूरत है, तो <table> का इस्तेमाल करें. अगर आपको Keynote या PowerPoint जैसे प्रज़ेंटेशन सॉफ़्टवेयर की सुविधाओं का इस्तेमाल करना है, तो आपको ब्यौरे की सूची की ज़रूरत पड़ सकती है.

अगर टेबल के तौर पर डेटा नहीं दिखाया जा रहा है, तो <table> का इस्तेमाल न करें. अगर प्रज़ेंटेशन के लिए टेबल का इस्तेमाल किया जाता है, तो role="none" सेट करें.

कई डेवलपर, फ़ॉर्म का लेआउट तय करने के लिए टेबल का इस्तेमाल करते हैं. हालांकि, ऐसा करना ज़रूरी नहीं है. हालांकि, आपको एचटीएमएल फ़ॉर्म के बारे में जानकारी होनी चाहिए. इसलिए, हम अगले लेख में इस बारे में बताएंगे.

देखें कि आपको क्या समझ आया

टेबल के बारे में अपनी जानकारी की जांच करें.