एचटीएमएल टेबल जावास्क्रिप्ट में एसक्यूएल डेटा दिखाएं

Michael Zippo

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

सीएसएस तालिका शैली विशेषताओं का एक सेट प्रदान करता है। अन्य बातों के अलावा, ये विशेषताएँ आपको टेबल सेल को अलग करने, टेबल बॉर्डर निर्दिष्ट करने और टेबल की चौड़ाई और ऊँचाई निर्दिष्ट करने की अनुमति देती हैं। . इस ट्यूटोरियल के अंत में, आप एक विशेषज्ञ होंगे।

HTML तालिकाएँ

HTML कोड तालिकाओं की संरचना को परिभाषित करता है। तालिका को परिभाषित करने के लिए <तालिका> टैग का प्रयोग करें। , , और टैग क्रमशः पंक्तियों, तालिका शीर्षलेखों और सामग्री कक्षों को निर्दिष्ट करते हैं।

आइए HTML तालिका का एक उदाहरण देखें। नीचे दिए गए उदाहरण में, हमारे पास 23 मार्च, 2020 के सप्ताह के लिए न्यूयॉर्क टाइम्स बेस्टसेलर सूची में शीर्ष पांच पुस्तकों को सूचीबद्ध करने वाली एक तालिका है:

हमारी तालिका का कोड इस प्रकार है:

इस तालिका में `चालू` की एक पंक्ति सहित तीन स्तंभ और छह पंक्तियाँ हैं आपका दिमाग।

टेबल सीएसएस

सीएसएस का इस्तेमाल टेबल को स्टाइल करने के लिए किया जाता है। हालांकि ऊपर दी गई तालिका डेटा को व्यवस्थित तरीके से दिखाती है, यह सादे HTML में लिखा गया है (कोई शैलियाँ नहीं हैं)। CSS का उपयोग करके, आप तालिकाओं को बेहतर बना सकते हैं।

हमारे कोड में, हम एक ठोस काली सीमा, 1 पिक्सेल चौड़ी परिभाषित करते हैं। यहां हमारे कोड का परिणाम है:

ध्यान दें कि हमारी तालिका में डबल है बॉर्डर ऐसा इसलिए है क्योंकि हमने टेबल (<टेबल>), उसके हेडर () और उसके सेल () पर एक बॉर्डर लागू किया है। सिंगल बॉर्डर के लिए डबल बॉर्डर, हम बॉर्डर-पतन संपत्ति का उपयोग कर सकते हैं।

बॉर्डर-संक्षिप्त गुण किसी तालिका के दोहरे बॉर्डर को एकल बॉर्डर में कनवर्ट करता है। बॉर्डर-पतन गुण का डिफ़ॉल्ट मान संक्षिप्त हो जाता है। यदि गुण बॉर्डर-पतन मान पतन < प्राप्त करता है /code>, किसी सरणी के चारों ओर की सीमाएं ढह जाएंगी।

यहाँ क्रिया में b कमांड-संक्षिप्त गुण का एक उदाहरण दिया गया है:

  हमारा कोड रिटर्न:
   
 हमारी तालिका और उसकी सामग्री में अब एक ही बॉर्डर है। 
बॉर्डर स्पेस इंजी 
 आप टेबल में सेल्स के बीच स्पेसिंग को परिभाषित करने के लिए बॉर्डर-स्पेसिंग प्रॉपर्टी का उपयोग कर सकते हैं। बॉर्डर-स्पेसिंग प्रॉपर्टी बीच में हॉरिजॉन्टल और वर्टिकल स्पेसिंग को परिभाषित करती है। सेल - और यह इसे उसी क्रम में करता है।
यहां एक उदाहरण है जो हमारी प्रारंभिक तालिका पर बॉर्डर-स्पेसिंग संपत्ति का उपयोग कर रहा है (बिना ध्वस्त सीमाओं के):
 
 हमारा कोड रिटर्न:
   
 हमारी प्रत्येक कोशिका में क्षैतिज पर 10px रिक्ति होती है और लंबवत सीमाएँ। 
मान लीजिए कि हम चाहते हैं कि ऊपर दी गई हमारी तालिका की चौड़ाई (जिसकी सीमाएँ ढह गई हों) वेब पेज की ही चौड़ाई हो, और मान लें कि हम चाहते हैं कि प्रत्येक टेबल हेडर की ऊँचाई 30 पिक्सेल ऊँची हो। हम ऐसा कर सकते हैं निम्नलिखित सीएसएस कोड का उपयोग करना:
 हमारा कोड रिटर्न:

 <आंकड़ा वर्ग = "wp-ब्लॉक-छवि">    जैसा कि आप देख सकते हैं, हमारी तालिका अब की चौड़ाई है वेब पेज। इसके अलावा, हमारी तालिका में कॉलम हेडर 30 पिक्सल ऊंचे हैं। तालिका में कक्ष और उन कक्षों की सामग्री। पैडिंग संपत्ति का उपयोग  और  टैग पर किया जा सकता है।
मान लीजिए कि हम सेल के चारों ओर 10px पैडिंग जोड़ना चाहते हैं हेडर सेल सहित हमारी टेबल की सामग्री। हम इस कोड का उपयोग करके ऐसा कर सकते हैं:
 हमारा कोड रिटर्न:
    
 प्रत्येक पंक्ति की सामग्री और अब हमारी शीर्षलेख तालिका सभी किनारों पर 10px पैडिंग है। एक सरणी। डिफ़ॉल्ट रूप से,  तत्व केंद्र-संरेखित होते हैं और  तत्व बाएं-संरेखित होते हैं।
पाठ संरेखण विशेषता के सबसे अधिक उपयोग किए जाने वाले मान हैं:< br>
बाएं, मध्य, दाएं (माइक्रोसॉफ्ट एज और इंटरनेट एक्सप्लोरर को छोड़कर सभी ब्राउज़रों द्वारा समर्थित)
प्रारंभ और अंत (माइक्रोसॉफ्ट एज और इंटरनेट एक्सप्लोरर को छोड़कर सभी ब्राउज़रों द्वारा समर्थित) )

 मान लीजिए कि हम अपनी सरणी में  तत्वों को केंद्र में रखना चाहते हैं और  तत्वों को प्रत्येक सेल के बाईं ओर संरेखित करना चाहते हैं। हम इसे इस कोड का उपयोग करके कर सकते हैं:
 हमारा कोड रिटर्न:
   
 इस उदाहरण में, हमने पाठ को सेल के बाहर केंद्रित किया है। सेल d `हेडर और हेडर सेल टेक्स्ट को संरेखित छोड़ दिया गया है।
वर्टिकल टेक्स्ट अलाइनमेंट 
 CSS  या  टैग। डिफ़ॉल्ट रूप से, लंबवत संरेखण गुण का मान  मध्य  पर सेट होता है, जिसका अर्थ है कि सामग्री सेल के केंद्र में लंबवत रूप से संरेखित है।
मान लीजिए कि हम अपने सेल  में टेक्स्ट को सेल के निचले हिस्से में संरेखित करना चाहते हैं। हम इसे इस कोड का उपयोग करके करते हैं: 
  हमारा कोड रिटर्न: