HTML टेबल्स पंक्तियों और स्तंभों में प्रस्तुत डेटा के समूह हैं। HTML टेबल बनाने के लिए <table> एलिमेंट का उपयोग करें। आप पंक्तियाँ बनाने के लिए <tr>, स्तंभ बनाने के लिए <td>, और टेबल हेडर बनाने के लिए <th> का उपयोग कर सकते हैं।
टेबल्स का उपयोग पंक्तियों और स्तंभों का उपयोग करके डेटा को समझने में आसान तरीके से प्रस्तुत करने के लिए किया जाता है। हम हर दिन टेबल्स का सामना करते हैं, बस टाइमटेबल से जो सवारों को बताता है कि बस कब आएगी, से लेकर हमारे द्वारा खाए जाने वाले खाद्य पदार्थों में सामग्री की टेबल तक।
HTML में, टेबल्स का उपयोग डेटा प्रस्तुत करने की एक विधि के रूप में किया जाता है। यह ट्यूटोरियल उदाहरणों के साथ, HTML टेबल्स की मूल बातें, कई स्तंभों और पंक्तियों में फैले सेल्स, और टेबल को स्टाइल कैसे करें, पर चर्चा करेगा। इस ट्यूटोरियल के अंत तक, आप HTML में टेबल्स बनाने और उनके साथ काम करने में विशेषज्ञ होंगे।
HTML टेबल बनाना
टेबल्स पंक्तियों और स्तंभों में प्रस्तुत डेटा के समूह हैं। टेबल का उपयोग करके, डेटासेट में मूल्यों के एक सेट के बीच कनेक्शन देखना आसान होता है।
HTML में, टेबल्स को <table> एलिमेंट का उपयोग करके परिभाषित किया जाता है। <table> एलिमेंट के भीतर, आप उपयोग कर सकते हैं:
<tr>पंक्तियाँ बनाने के लिए<td>स्तंभ बनाने के लिए<th>टेबल हेडर बनाने के लिए
मान लीजिए हम एक टेबल बनाना चाहते हैं जो कॉफी शॉप में बिकने वाली कॉफी को उनकी कीमतों के साथ सूचीबद्ध करती है, जैसा हमने ऊपर किया। इस टेबल में दो स्तंभ होने चाहिए, कॉफी और कीमत, और तीन पंक्तियाँ। हम HTML में इस टेबल को परिभाषित करने के लिए निम्न कोड का उपयोग कर सकते हैं:
<table> <tr> <th>कॉफी</th> <th>कीमत</th> </tr> <tr> <td>एस्प्रेसो</td> <td>$2.00</td> </tr> <tr> <td>कैपुचीनो</td> <td>$2.50</td> </tr> <tr> <td>लाटे</td> <td>$2.75</td> </tr> </table>
हमारी टेबल का परिणाम यहां है:
इस उदाहरण में, हमने एक टेबल बनाई है जिसमें हेडिंग्स की एक पंक्ति, दो स्तंभ, और टेबल डेटा की तीन पंक्तियाँ हैं। आइए हमारे कोड को समझते हैं।
81% प्रतिभागियों ने कहा कि बूटकैंप में भाग लेने के बाद वे अपनी टेक जॉब संभावनाओं के बारे में अधिक आश्वस्त महसूस करते हैं। आज ही बूटकैंप से जुड़ें।
औसत बूटकैंप ग्रेजुएट ने करियर ट्रांजिशन में छह महीने से कम समय बिताया, बूटकैंप शुरू करने से लेकर पहली नौकरी पाने तक।
सबसे पहले, हमने अपने वेब पेज को टेबल बनाने का निर्देश देने के लिए <table> HTML टैग का उपयोग किया। फिर हमने एक पंक्ति बनाने के लिए <tr> टैग का उपयोग किया, और हमारी टेबल के लिए कॉलम हेडर को परिभाषित करने के लिए <th> टैग्स का उपयोग किया। इस मामले में, हमारे कॉलम हेडर कॉफी और कीमत हैं।
इसके बाद, हमने तीन और <tr> टैग्स का उपयोग करके तीन टेबल पंक्तियाँ बनाईं जो हमारी टेबल के डेटा सेल्स में कॉफी के नाम और कीमतों को प्रदर्शित करती हैं। इनमें से प्रत्येक <tr> टैग में एक <td> टैग होता है, जिसका उपयोग टेबल में एक कॉलम सेल को दर्शाने के लिए किया जाता है। उदाहरण के लिए, td एलिमेंट का उपयोग हमारी पहली कॉफी प्रविष्टि में एस्प्रेसो और $2.00 को दर्शाने के लिए किया जाता है।
टेबल स्टाइलिंग
HTML में टेबल को स्टाइल करने के कई तरीके हैं।
बॉर्डर्स (Borders)
HTML में, टेबल्स में डिफ़ॉल्ट रूप से कोई बॉर्डर नहीं होता। इसका मतलब है कि अगर हम अपनी टेबल पर बॉर्डर दिखाना चाहते हैं, तो हमें CSS का उपयोग करना होगा। CSS बॉर्डर विशेषता का उपयोग HTML टेबल पर बॉर्डर जोड़ने के लिए किया जाता है।
मान लीजिए हम अपनी पिछली टेबल के चारों ओर एक ठोस काला बॉर्डर जोड़ना चाहते हैं। हम निम्न कोड का उपयोग करके ऐसा कर सकते हैं:
table, th, td { border: 1px solid black; }
जब हम इस स्टाइल को अपने टेबल कोड में उपयोग करते हैं, तो हमारी टेबल उसके प्रत्येक सेल के चारों ओर और टेबल के चारों ओर एक बॉर्डर शामिल करने के लिए बदल जाती है। यहां हमारी संशोधित टेबल है:
अब हमारी टेबल में एक बॉर्डर है, जो हमारी टेबल में डेटा पढ़ना आसान बनाता है। हालांकि, हमने ऊपर जो स्टाइल बनाया है वह प्रत्येक सेल के चारों ओर एक बॉर्डर रखता है और प्रत्येक बॉर्डर को अलग करता है। यदि हम प्रत्येक बॉर्डर को एक में संयोजित करना चाहते हैं, तो हम border-collapse प्रॉपर्टी का उपयोग कर सकते हैं। यहां वह कोड है जिसका उपयोग हम इस कार्य को पूरा करने के लिए करेंगे:
table { border-collapse: collapse }
हमारी नई टेबल इस तरह दिखती है:
जैसा कि आप देख सकते हैं, हमारी टेबल में अब प्रत्येक सेल और टेबल के चारों ओर एक बॉर्डर के बजाय एक ही बॉर्डर है।
हेडिंग्स संरेखित करें (Align Headings)
डिफ़ॉल्ट रूप से, हेडिंग्स सेल के केंद्र में संरेखित होती हैं। यदि आप किसी हेडिंग को सेल के बाएं या दाएं संरेखित करना चाहते हैं, तो आप अपनी टेबल में <th> टैग पर text-align प्रॉपर्टी निर्दिष्ट कर सकते हैं (याद रखें, <th> टैग का उपयोग हेडिंग्स निर्दिष्ट करने के लिए किया जाता है)।
यहां वह कोड है जिसका आप उपयोग करेंगे:
th { text-align: left; }
यदि हम इस स्टाइल को ऊपर की अपनी टेबल पर लागू करते हैं, तो निम्नलिखित टेबल बनती है:
हमारी ऊपर की टेबल ने कॉलम हेडिंग्स को हमारी टेबल के बाएं संरेखित किया है।
HTML टेबल पर लागू किए जा सकने वाले कई अन्य स्टाइल्स हैं, लेकिन इस ट्यूटोरियल के उद्देश्यों के लिए हमने टेबल बॉर्डर्स और संकुचित बॉर्डर्स पर ध्यान केंद्रित किया है। आगे बढ़ते हुए, हम इस ट्यूटोरियल के इस भाग में परिभाषित स्टाइल्स का उपयोग अपने डेटा को पढ़ने में आसान बनाने के लिए करेंगे।
कई पंक्तियों और स्तंभों में फैलाना (Spanning Multiple Rows and Columns)
जब आप टेबल्स के साथ काम कर रहे होते हैं, तो आप चाहते होंगे कि एक सेल कई पंक्तियों या स्तंभों में फैले।
उदाहरण के लिए, मान लीजिए हम चाहते हैं कि हमारा कीमत स्तंभ दो स्तंभों पर फैले। यहीं colspan और rowspan विशेषताएँ काम आती हैं। Rowspan का उपयोग टेबल में कई पंक्तियों में फैलाने के लिए किया जाता है, और colspan का उपयोग टेबल में कई स्तंभों में फैलाने के लिए किया जाता है।
यहां एक टेबल का उदाहरण है जो कीमत स्तंभ को दो स्तंभों पर फैलाने के लिए colspan का उपयोग करता है:
<table> <tr> <th>कॉफी</th> <th colspan="2">कीमत</th> </tr> <tr> <td>एस्प्रेसो</td> <td>$2.00 (नया)</td> <td>$2.00 (पुराना)</td> </tr> </table>
यहां हमारी टेबल दिखाई देती है:
जैसा कि आप देख सकते हैं, कीमत स्तंभ अब दो पंक्तियों पर फैलता है। इसके अलावा, आप rowspan का उपयोग उसी तरह कर सकते हैं ताकि एक सेल बनाया जा सके जो एक से अधिक पंक्तियों पर फैले।
मान लीजिए आपके पास एक टेबल है जो मेनू पर एक विशिष्ट कॉफी के बारे में विवरण संग्रहीत करती है।
आप चाहते हैं कि कॉफी की रियायती कीमत के बारे में जानकारी—जो हर महीने के अंतिम दिन ग्राहकों को कॉफी खरीदने के लिए लुभाने के लिए लागू होती है—और नियमित कीमत एक ही हेडिंग कीमत के तहत दिखाई दे, लेबल्स के साथ कीमतों को अलग करने के लिए। आप इस कार्य को पूरा करने के लिए निम्न कोड का उपयोग कर सकते हैं:
<table> <tr> <th>कॉफी</th> <td>एस्प्रेसो</td> </tr> <tr> <th rowspan="2">कीमत</th> <td>$2.00 (नियमित)</td> </tr> <tr> <td>$1.80 (रियायती)</td> </tr> </table>
यहां हमारी टेबल का आउटपुट है:
इस उदाहरण में, आप देख सकते हैं कि कीमत लेबल दो पंक्तियों पर फैला हुआ है।
टेबल हेडर, बॉडी, और फुटर को परिभाषित करना
जब आप टेबल के साथ काम कर रहे होते हैं, तो तीन टैग्स होते हैं जो आपके डेटा को बेहतर ढंग से संरचित करने में मदद करते हैं।
<thead> टैग का उपयोग आपकी टेबल के हेडिंग को परिभाषित करने के लिए किया जाता है, <tbody> टैग का उपयोग आपकी टेबल की सामग्री को परिभाषित करने के लिए किया जाता है, और <tfoot> टैग का उपयोग आपकी टेबल के फुटर को परिभाषित करने के लिए किया जाता है।
आइए इसे समझाने के लिए पहले उदाहरण से अपनी टेबल लें। मान लीजिए हम एक टेबल बना रहे हैं जो कॉफी शॉप में बिकने वाली सभी कॉफी को सूचीबद्ध करती है। अपने कोड को पढ़ने में आसान बनाने के लिए, हम अपनी टेबल के हेडर, बॉडी, और फुटर को अलग करना चाहते हैं। हम निम्न कोड का उपयोग करके ऐसा कर सकते हैं:
<table> <thead> <tr> <th>कॉफी</th> <th>कीमत</th> </tr> </thead> <tbody> <tr> <td>एस्प्रेसो</td> <td>$2.00</td> </tr> <tr> <td>कैपुचीनो</td> <td>$2.50</td> </tr> <tr> <td>लाटे</td> <td>$2.75</td> </tr> </tbody> <tfoot> <tr> <th>अंतिम अद्यतन</th> <td>9 जनवरी, 2020</td> </tr> </tfoot> </table>
इस टेबल में, हमने <thead>, <tbody>, और <tfoot> टैग्स का उपयोग क्रमशः हमारे टेबल हेडर, बॉडी, और फुटर को परिभाषित करने के लिए किया है।
<thead> टैग का उपयोग हमारी हेडर पंक्ति को अलग करने के लिए किया जाता है, जिसमें कॉफी और कीमत टेबल हेडिंग्स होते हैं। <tbody> टैग का उपयोग उन पंक्तियों को संग्रहीत करने के लिए किया जाता है जिनमें हमारी टेबल का मुख्य डेटा होता है (कॉफी की कीमतें)।
<tfoot> टैग का उपयोग उस पंक्ति को संग्रहीत करने के लिए किया जाता है जो बताती है कि टेबल को अंतिम बार कब अपडेट किया गया था। हमने इस डेटा को फुटर टैग में रखा है क्योंकि यह हमारी कॉफी और उनकी कीमतों की सूची के लिए एक प्रविष्टि नहीं है।
हालांकि ये टैग्स वैकल्पिक हैं, लेकिन वे HTML में टेबल को बेहतर ढंग से संरचित करने में आपकी मदद करते हैं।
HTML में टेबल कैप्शन
<caption> टैग का उपयोग आपकी टेबल्स में एक शीर्षक, जिसे कैप्शन के रूप में भी जाना जाता है, जोड़ने के लिए किया जाता है।
<caption> टैग को आपकी टेबल में शुरुआती <table> टैग के तुरंत बाद रखा जाना चाहिए। यहां <caption> टैग का एक उदाहरण दिया गया है जिसका उपयोग हमारी कॉफी की सूची में कॉफी मेनू हेडर जोड़ने के लिए किया जाता है:
<table> <caption>कॉफी मेनू</caption> <tr> <th>कॉफी</th> <th>कीमत</th> </tr> <tr> <td>एस्प्रेसो</td> <td>$2.00</td> </tr> <tr> <td>कैपुचीनो</td> <td>$2.50</td> </tr> <tr> <td>लाटे</td> <td>$2.75</td> </tr> </table>
हमारी टेबल इस प्रकार दिखाई देती है:
हमारे कोड में, हम <caption> टैग का उपयोग टेबल में कॉफी मेनू हेडर जोड़ने के लिए करते हैं।
निष्कर्ष
टेबल्स उतनी सरल या जटिल हो सकती हैं जितना आप उन्हें बनाना चाहते हैं, और इस लेख में HTML में टेबल्स की मूल बातों के बारे में लगभग वह सब कुछ शामिल है जो आपको जानने की आवश्यकता है।
इस लेख में चर्चा की गई कि HTML में टेबल कैसे बनाएं, टेबल पर बुनियादी स्टाइल्स कैसे लागू करें, टेबल को कैसे संरचित करें, सेल्स को कई स्तंभों और पंक्तियों पर कैसे फैलाएं, और टेबल के साथ कैप्शन का उपयोग कैसे करें।
अब आपके पास HTML में टेबल्स के साथ काम करना शुरू करने के लिए एक प्रो की तरह ज्ञान है!
