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> एलिमेंट में नेस्ट किया गया पहला एलिमेंट होना चाहिए. इसे शामिल करने से सभी उपयोगकर्ताओं को आस-पास के टेक्स्ट को पढ़े बिना टेबल का मकसद तुरंत तय करना होता है. इसके अलावा, aria-label या aria-labelledby इस्तेमाल किया जा सकता है <table> पर कैप्शन के रूप में एक ऐक्सेस किया जा सकने वाला नाम दें. <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-spacing की मदद से प्रॉपर्टी भी दी गई हैं. अगर border-collapse: collapse को सेट किया गया है, तो Border-spacing का कोई असर नहीं होगा. अगर border-collapse: separate; सेट है, तो empty-cells: hide; की मदद से खाली सेल को पूरी तरह से छिपाया जा सकता है. स्टाइलिंग टेबल के बारे में ज़्यादा जानने के लिए, यहां टेबल से मिलती-जुलती सीएसएस स्टाइल का इंटरैक्टिव स्लाइड डेक.

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

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

<th> सेल का मतलब सिमैंटिक है. इसमें कॉलमहेडर की भूमिका वाले ARIA रोल हैं या rowheader चुनें. यह टेबल की सेल के कॉलम या पंक्ति के लिए, सेल को हेडर के रूप में तय करता है, यह तय किए गए 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="2" है. इससे आस-पास की दो सेल मर्ज हो जाती हैं. पहली और आखिरी सेल में rowspan="2" शामिल है. यह सेल को सेल के साथ मर्ज कर देता है के बगल में, पंक्ति के ठीक नीचे.

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

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

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

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

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

स्टाइल टेबल

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

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

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

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

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

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

माफ़ करें, सिर्फ़ कुछ प्रॉपर्टी ही इस्तेमाल की जा सकती हैं. स्टाइल, सेल में इनहेरिट नहीं की जाती हैं. इसके अलावा, <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, तो आपको ब्यौरा सूची की ज़रूरत पड़ सकती है.

हालांकि, टेबल कॉलम को क्रम में लगाना JavaScript का अधिकार है. हालांकि, एचटीएमएल का अधिकार यह है कि आप अपने हेडर को मार्क करके उपयोगकर्ताओं को बताएं कि कॉलम में डेटा को क्रम से लगाया जा सकता है. अपने उपयोगकर्ताओं को बताएं कि टेबल के कॉलम को आइकॉनोग्राफ़ी के साथ क्रम में लगाया जा सकता है. ये कॉलम बढ़ते, घटते या बिना क्रम के दिखते हैं. फ़िलहाल, क्रम से लगाए गए कॉलम में ऐसा होना चाहिए क्रम से लगाने की दिशा की, बताई गई वैल्यू के साथ aria-sort एट्रिब्यूट को शामिल करें. <caption> aria-live और किसी डाइनैमिक रूप से अपडेट होने वाला होता है और स्क्रीन रीडर इस्तेमाल करने वाले लोगों को दिखता है. हेडर के कॉन्टेंट पर क्लिक करके, कॉलम को क्रम से लगाया जा सकता है. इसलिए, हेडर का कॉन्टेंट <button> होना चाहिए.

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

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

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

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

उन सेल को मार्क अप करने के लिए किस एलिमेंट का इस्तेमाल किया जाता है जो हेडिंग हैं?

<header>
फिर से कोशिश करें.
<caption>
फिर से कोशिश करें.
<th>
सही!

टेबल वाले लेआउट के लिए कौनसी जानकारी सही हो सकती है?

कुछ वैज्ञानिक शब्दों और उनके बारे में जानकारी.
फिर से कोशिश करें. यह <dl> के लिए बेहतर है.
जानकारी वाली एक स्प्रेडशीट, जिसमें तीसरे सेमेस्टर के छात्र-छात्राओं और उनके ग्रेड के बारे में जानकारी दी गई है.
सही!
रेसिपी बनाने में इस्तेमाल होने वाली सामग्री.
फिर से कोशिश करें. यह <ul> के लिए बेहतर है.