HTML तालिका:चरण-दर-चरण मार्गदर्शिका

HTML तालिकाएँ डेटा के समूह हैं जो पंक्तियों और स्तंभों में प्रस्तुत किए जाते हैं। HTML तालिका बनाने के लिए . का उपयोग करें <table> तत्व। आप उपयोग कर सकते हैं <tr> पंक्तियाँ बनाने के लिए, <td> कॉलम बनाने के लिए, और <th> टेबल हेडर बनाने के लिए।

पंक्तियों और स्तंभों का उपयोग करके डेटा को आसानी से समझने योग्य तरीके से प्रस्तुत करने के लिए तालिकाओं का उपयोग किया जाता है। हम हर दिन तालिकाओं का सामना करते हैं, बस समय सारिणी से जो सवारों को बताती है कि बस कब आएगी, हमारे द्वारा खाए जाने वाले खाद्य पदार्थों की तालिका तक।

HTML में, तालिकाओं का उपयोग डेटा प्रस्तुत करने की एक विधि के रूप में किया जाता है। यह ट्यूटोरियल, उदाहरणों के साथ, HTML टेबल की मूल बातें, कई कॉलम और पंक्तियों में फैले सेल और टेबल को स्टाइल करने के तरीके पर चर्चा करेगा। इस ट्यूटोरियल के अंत तक, आप HTML में टेबल बनाने और उनके साथ काम करने के विशेषज्ञ होंगे।

HTML तालिका बनाना

तालिकाएँ डेटा के सेट हैं जो पंक्तियों और स्तंभों में प्रस्तुत किए जाते हैं। तालिका का उपयोग करके, डेटासेट में मानों के सेट के बीच संबंध देखना आसान होता है।

HTML में, टेबल को <table> . का उपयोग करके परिभाषित किया जाता है तत्व। <table> के भीतर तत्व, आप उपयोग कर सकते हैं:

• पंक्तियाँ बनाने के लिए
• कॉलम बनाने के लिए
• टेबल हेडर बनाने के लिए।

मान लीजिए कि हम एक ऐसी तालिका बनाना चाहते हैं जो एक कॉफी शॉप में बेची जाने वाली कॉफी को उनकी कीमतों के साथ सूचीबद्ध करती है, जैसा कि हमने ऊपर किया था। इस तालिका में दो कॉलम, कॉफी और मूल्य और तीन पंक्तियाँ होनी चाहिए। HTML में इस तालिका को परिभाषित करने के लिए हम निम्नलिखित कोड का उपयोग कर सकते हैं:

 tr> 
 
 
कॉफी
 
कीमत
 
 
 
एस्प्रेसो
 
$2.00
 
 
कैप्पुकिनो
 
$2.50
 
 
 
लट्टे
 
$2.75
 
 

 यहाँ हमारी तालिका का परिणाम है:
  

 इस उदाहरण में, हमने एक तालिका बनाई है जिसमें शीर्षकों की एक पंक्ति, दो स्तंभ और तालिका डेटा की तीन पंक्तियाँ हैं। आइए हमारे कोड को तोड़ दें।
 

 81% प्रतिभागियों ने कहा कि बूटकैंप में भाग लेने के बाद उन्हें अपनी तकनीकी नौकरी की संभावनाओं के बारे में अधिक आत्मविश्वास महसूस हुआ। आज ही एक बूटकैंप से मिलान करें।
 

 बूटकैंप शुरू करने से लेकर अपनी पहली नौकरी खोजने तक, औसत बूटकैंप ग्रेड ने करियर संक्रमण में छह महीने से भी कम समय बिताया।
 

 सबसे पहले, हमने <table> . का इस्तेमाल किया एक टेबल बनाने के लिए हमारे वेब पेज को निर्देश देने के लिए HTML टैग। हमने तब एक <tr> . का उपयोग किया था एक पंक्ति बनाने के लिए टैग, और <th> हमारी तालिका के लिए कॉलम हेडर को परिभाषित करने के लिए टैग। इस मामले में, हमारे कॉलम हेडर Coffee हैं और Price ।
 

 इसके बाद, हमने तीन और <tr> . का इस्तेमाल किया तालिका के डेटा सेल में हमारे कॉफी नाम और कीमतों को प्रदर्शित करने वाली तीन तालिका पंक्तियों में से प्रत्येक को बनाने के लिए टैग। इनमें से प्रत्येक <tr> टैग में एक <td> . होता है टैग, जिसका उपयोग तालिका में कॉलम सेल का प्रतिनिधित्व करने के लिए किया जाता है। उदाहरण के लिए, td तत्व का उपयोग Espresso . को दर्शाने के लिए किया जाता है और $2.00 हमारी पहली कॉफी प्रविष्टि में।
 
टेबल स्टाइलिंग
 

 HTML में टेबल को स्टाइल करने के कई तरीके हैं।
 
सीमाएं
 

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

 मान लीजिए कि हम पहले से ही अपनी मेज के चारों ओर एक ठोस काली सीमा जोड़ना चाहते थे। हम इस कोड का उपयोग करके ऐसा कर सकते हैं:
 
टेबल, th, td { बॉर्डर:1px सॉलिड ब्लैक;}
 

 जब हम अपने टेबल कोड में इस शैली का उपयोग करते हैं, तो हमारी तालिका बदल जाती है और इसके प्रत्येक सेल और टेबल के चारों ओर एक बॉर्डर शामिल हो जाता है। यहां हमारी संशोधित तालिका है:
  

 अब हमारी तालिका में एक सीमा है, जिससे हमारी तालिका में डेटा को पढ़ना आसान हो जाता है। हालाँकि, हमने ऊपर जो शैली बनाई है, वह प्रत्येक कोशिका के चारों ओर एक सीमा बनाती है और प्रत्येक सीमा को अलग करती है। यदि हम प्रत्येक सीमा को एक में समेटना चाहते हैं, तो हम सीमा-पतन संपत्ति का उपयोग कर सकते हैं। इस कार्य को पूरा करने के लिए हम इस कोड का उपयोग करेंगे:
 
टेबल { बॉर्डर-पतन:पतन}
 

 हमारी नई तालिका इस तरह दिखती है:
  

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

 डिफ़ॉल्ट रूप से, शीर्षक एक सेल के केंद्र में संरेखित होते हैं। यदि आप किसी सेल के बाएँ या दाएँ शीर्षक को संरेखित करना चाहते हैं, तो आप <th> में टेक्स्ट-संरेखण गुण निर्दिष्ट कर सकते हैं अपनी तालिका में टैग करें (याद रखें, <th> टैग का उपयोग शीर्षकों को निर्दिष्ट करने के लिए किया जाता है)।
 

 यहां वह कोड है जिसका आप उपयोग करेंगे:
 
th { टेक्स्ट-एलाइन:लेफ्ट;}
 

 यदि हम इस शैली को ऊपर से अपनी तालिका में लागू करते हैं, तो निम्न तालिका बनाई जाती है:
  

 हमारी उपरोक्त तालिका ने स्तंभ शीर्षकों को हमारी तालिका के बाईं ओर संरेखित किया है।
 

 कई अन्य शैलियाँ हैं जिन्हें एक HTML तालिका पर लागू किया जा सकता है, लेकिन इस ट्यूटोरियल के प्रयोजनों के लिए हमने टेबल बॉर्डर और संक्षिप्त सीमाओं पर ध्यान केंद्रित किया है। आगे बढ़ते हुए, हम अपने डेटा को पढ़ने में आसान बनाने के लिए ट्यूटोरियल के इस भाग में परिभाषित शैलियों का उपयोग करने जा रहे हैं।
 
अनेक पंक्तियों और स्तंभों में फैला हुआ
 

 जब आप तालिकाओं के साथ काम कर रहे हों, तो हो सकता है कि आप चाहते हैं कि एक सेल कई पंक्तियों या स्तंभों में फैले।
 

 उदाहरण के लिए, मान लीजिए कि हम चाहते थे कि हमारा मूल्य स्तंभ पहले से दो स्तंभों तक फैला हो। यहीं से कोलस्पैन और रोस्पैन विशेषताएँ आती हैं। रोस्पैन का उपयोग एक टेबल में कई पंक्तियों को फैलाने के लिए किया जाता है, और कोलस्पैन का उपयोग एक टेबल में कई कॉलमों को फैलाने के लिए किया जाता है।
 

 यहां एक तालिका का उदाहरण दिया गया है, जो Price . का विस्तार करने के लिए colspan का उपयोग करती है दो स्तंभों पर स्तंभ:
 
 
 
कॉफी
 
कीमत
 
 
 
एस्प्रेसो
 
$2.00 ( नया)
 
$2.00 (पुराना)
 
 

 हमारी तालिका इस प्रकार दिखाई देती है:
  

 जैसा कि आप देख सकते हैं, मूल्य कॉलम अब दो पंक्तियों में फैला हुआ है। इसके अलावा, आप एक से अधिक पंक्तियों में फैले सेल को बनाने के लिए उसी तरह रोस्पैन का उपयोग कर सकते हैं।
 

 मान लीजिए आपके पास एक टेबल है जो मेनू पर एक विशिष्ट कॉफी के बारे में विवरण संग्रहीत करती है।
 

 आप कॉफ़ी की छूट वाली कीमत के बारे में जानकारी चाहते हैं - जो ग्राहकों को कॉफ़ी खरीदने के लिए लुभाने के लिए हर महीने के आखिरी दिन के दौरान लागू की जाती है - और नियमित कीमत एक ही शीर्षक Price के तहत दिखाई देती है , कीमतों में अंतर करने के लिए लेबल के साथ। इस कार्य को पूरा करने के लिए आप निम्न कोड का उपयोग कर सकते हैं:
 
 
 
कॉफी
 
एस्प्रेसो
 
 
 
कीमत
 
$2.00 ( नियमित)
 
 
 
$1.80 (छूट)
 
 

 यह रही हमारी टेबल का आउटपुट:
  

 इस उदाहरण में, आप देख सकते हैं कि Price लेबल दो पंक्तियों में फैला हुआ है।
 
टेबल हेडर, बॉडी और फ़ुटर को परिभाषित करना
 

 जब आप किसी तालिका के साथ काम कर रहे होते हैं, तो तीन टैग होते हैं जिनका उपयोग आपके डेटा को बेहतर ढंग से संरचित करने में आपकी सहायता के लिए किया जाता है।
 

 <thead> टैग का उपयोग आपकी तालिका के शीर्षक को परिभाषित करने के लिए किया जाता है, <tbody> टैग का उपयोग आपकी तालिका की सामग्री को परिभाषित करने के लिए किया जाता है, और <tfoot> टैग का उपयोग आपकी तालिका के पाद लेख को परिभाषित करने के लिए किया जाता है।
 

 यह कैसे काम करता है, यह स्पष्ट करने के लिए आइए पहले उदाहरण से हमारी तालिका लें। मान लीजिए कि हम एक टेबल बना रहे हैं जिसमें एक कॉफी शॉप में बेची जाने वाली सभी कॉफी की सूची है। हमारे कोड को पढ़ने में आसान बनाने के लिए, हम अपनी टेबल के हेडर, बॉडी और फुटर को अलग करना चाहते हैं। हम इस कोड का उपयोग करके ऐसा कर सकते हैं:
 
 
 
 
कॉफी
 
कीमत
 
 
 
 
 
एस्प्रेसो
 
$2.00
 
 
 
कैप्पुकिनो
 
$2.50
 
 
 
लट्टे
 
$2.75 
 
 
 
 
 
पिछली बार अपडेट किया गया
 
9 जनवरी, 2020
 
 
 
 

 इस तालिका में, हमने <thead> . का प्रयोग किया है , <tbody> , और <tfoot> हमारे टेबल हेडर, बॉडी और फुटर को क्रमशः परिभाषित करने के लिए टैग। 
 

 <thead> टैग का उपयोग हमारी शीर्ष लेख पंक्ति में अंतर करने के लिए किया जाता है, जिसमें Coffee . होता है और Price तालिका शीर्षक। <tbody> टैग का उपयोग उन पंक्तियों को संग्रहीत करने के लिए किया जाता है जिनमें हमारी तालिका (कॉफी की कीमतें) के लिए मुख्य डेटा होता है।
 

 <tfoot> टैग का उपयोग एक पंक्ति को संग्रहीत करने के लिए किया जाता है जो बताता है कि तालिका को अंतिम बार कब अपडेट किया गया था। हमने इस डेटा को फ़ुटर टैग में रखा है क्योंकि यह कॉफ़ी और उनकी कीमतों की हमारी सूची के लिए एक प्रविष्टि नहीं है।
 

 हालांकि ये टैग वैकल्पिक हैं, लेकिन ये HTML में तालिका को बेहतर ढंग से बनाने में आपकी मदद करते हैं।
 
HTML में तालिका कैप्शन
 

 <caption> टैग का उपयोग शीर्षक जोड़ने के लिए किया जाता है, जिसे caption . के रूप में भी जाना जाता है , आपकी टेबल पर।
 

 <caption> टैग को ओपनिंग <table> . के तुरंत बाद लगाना चाहिए अपनी तालिका में टैग करें। यहां <caption> का एक उदाहरण दिया गया है हैडर जोड़ने के लिए टैग का उपयोग किया जा रहा है Coffee Menu कॉफी की हमारी सूची में:
 
 
कॉफी मेन्यू
 
 
कॉफी
 
कीमत
 
 
 
एस्प्रेसो
 
$2.00
 
 
 
कैप्पुकिनो
 
$2.50
 
 
 
लट्टे
 
$2.75
 
 

 हमारी तालिका इस प्रकार दिखाई देती है:
 
  

 हमारे कोड में, हम <caption> . का प्रयोग करते हैं हैडर जोड़ने के लिए टैग Coffee Menu मेज पर।
 
निष्कर्ष
 

 तालिकाएँ उतनी ही सरल या जटिल हो सकती हैं जितनी आप उन्हें बनाना चाहते हैं, और इस लेख में HTML में तालिकाओं की मूल बातों के बारे में आपको जो कुछ भी जानने की आवश्यकता है, उसे शामिल किया गया है।
 

 इस लेख में चर्चा की गई है कि HTML में तालिका कैसे बनाई जाए, तालिका में मूल शैलियों को कैसे लागू किया जाए, तालिका की संरचना कैसे की जाए, एकाधिक स्तंभों और पंक्तियों में कक्षों को कैसे फैलाया जाए, और तालिका के साथ कैप्शन का उपयोग कैसे किया जाए।
 

 अब आपके पास एक पेशेवर की तरह HTML में तालिकाओं के साथ काम करना शुरू करने के लिए आवश्यक ज्ञान है!