Tables

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

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

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

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

<table> के अंदर, आपको टेबल हेडर (<thead>), टेबल बॉडी (<tbody>), और टेबल फ़ुटर (<tfoot>) मिलेंगे. हालांकि, टेबल फ़ुटर का इस्तेमाल करना ज़रूरी नहीं है. इनमें से हर एक में टेबल लाइनें (<tr>) होती हैं. लाइनों में टेबल हेडर (<th>) और टेबल डेटा (<td>) सेल होते हैं. इनमें पूरा डेटा होता है. इन सबसे पहले, आपको DOM में दो और सुविधाएं मिल सकती हैं: टेबल कैप्शन (<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> एलिमेंट में, एलिमेंट के हिसाब से कोई एट्रिब्यूट नहीं है.

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

सेल मर्ज करें

MS Excel, Google Sheets, और Numbers की तरह ही, कई सेल को एक सेल में जोड़ा जा सकता है. इसके लिए, एचटीएमएल colspan और rowspan एट्रिब्यूट का इस्तेमाल किया जा सकता है:

• colspan एक ही लाइन में मौजूद दो या उससे ज़्यादा सेल को मर्ज करता है.
• rowspan को मर्ज की गई पहली लाइन की सेल में जोड़ने पर, यह सभी लाइनों की सेल को मर्ज कर देता है.

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

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

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

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

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

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

टेबल की स्टाइल बदलना

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

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

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

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

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

<td> और <th> से जुड़ी स्टाइल, <col> स्टाइल को बदल देती हैं. CodePen में, हमने टेबल की कुछ लाइनों को मर्ज करने के लिए colspan सेट किया है, लेकिन सभी को नहीं. अगर nth-child सीएसएस सिलेक्टर को <tr> पर लागू किया जाता है, तो मर्ज की गई पंक्ति या कॉलम के आधार पर, स्टाइल पर असर पड़ सकता है.

माफ़ करें, सिर्फ़ कुछ प्रॉपर्टी के साथ काम किया जा सकता है. स्टाइल, सेल में इनहेरिट नहीं की जाती हैं. साथ ही, <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> का इस्तेमाल करें. अगर आपको Google Slides या PowerPoint जैसे प्रज़ेंटेशन सॉफ़्टवेयर में उपलब्ध सुविधाओं का इस्तेमाल करना है, तो आपको शायद ब्यौरे वाली सूची की ज़रूरत होगी.

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

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

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

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