वेब विकास के शुरुआती दिनों में, HTML तालिकाएँ बहुत सरल थीं और उनमें व्यापक स्टाइलिंग विकल्पों का अभाव था। आज, हालांकि, अधिकांश तालिकाओं को उपयोगकर्ताओं के लिए अधिक सौंदर्यपूर्ण और कार्यात्मक अनुभव बनाने के लिए स्टाइल किया गया है।
सीएसएस तालिका शैली विशेषताओं का एक सेट प्रदान करता है। अन्य बातों के अलावा, ये विशेषताएँ आपको टेबल सेल को अलग करने, टेबल बॉर्डर निर्दिष्ट करने और टेबल की चौड़ाई और ऊँचाई निर्दिष्ट करने की अनुमति देती हैं। . इस ट्यूटोरियल के अंत में, आप एक विशेषज्ञ होंगे।
HTML तालिकाएँ
HTML कोड तालिकाओं की संरचना को परिभाषित करता है। तालिका को परिभाषित करने के लिए <तालिका> टैग का प्रयोग करें।
आइए HTML तालिका का एक उदाहरण देखें। नीचे दिए गए उदाहरण में, हमारे पास 23 मार्च, 2020 के सप्ताह के लिए न्यूयॉर्क टाइम्स बेस्टसेलर सूची में शीर्ष पांच पुस्तकों को सूचीबद्ध करने वाली एक तालिका है:
हमारी तालिका का कोड इस प्रकार है:
इस तालिका में `चालू` की एक पंक्ति सहित तीन स्तंभ और छह पंक्तियाँ हैं आपका दिमाग।
टेबल सीएसएस
सीएसएस का इस्तेमाल टेबल को स्टाइल करने के लिए किया जाता है। हालांकि ऊपर दी गई तालिका डेटा को व्यवस्थित तरीके से दिखाती है, यह सादे HTML में लिखा गया है (कोई शैलियाँ नहीं हैं)। CSS का उपयोग करके, आप तालिकाओं को बेहतर बना सकते हैं।
हमारे कोड में, हम एक ठोस काली सीमा, 1 पिक्सेल चौड़ी परिभाषित करते हैं। यहां हमारे कोड का परिणाम है:
<चौड़ाई" <चौड़ाई "520 =" 168 "src =" https://744025.smushcdn.com/1245953/wp-content/uploads/2020/04/Screen-Shot-2020 -03 -24-पर-09.53.50.jpg? हानि = 1 और बैंड = 1 और वेबप = 1 "alt =" स्क्रीन 2020 03 24 पर 09.53.50 "वर्ग =" wp-image-14796 "srcset =" https: // 744025.smushcdn.com/1245953/wp- सामग्री / अपलोड / 2020/04 / स्क्रीन-शॉट-2020-03-24-at-09.53.50-20x6.png?lossy=1&strip=1&webp=1 20w, https://744025.smushcdn.com/1245953/wp -सामग्री / अपलोड / 2020/04 / स्क्रीन-शॉट-2020-03-24-at-09.53.50.jpg? आकार = 234x76 और हानिपूर्ण = 1 और पट्टी = 1 और वेबप = 1234w, https: // 744025. smushcdn.com/1245953/wp -सामग्री / अपलोड / 2020 /04/स्क्रीन-शॉट-2020-03-24-पर- 09.53.50-385x124.png? हानिपूर्ण = 1 और बैंड = 1 और वेबप = 1385w, https://744025.smushcdn.com/1245953/wp-content/uploads/2020/04/Screen-Shot-2020-03-24-at-09.53। 50 .jpg? आकार = 468x151 और लॉस sy = 1 और पट्टी = 1 और वेबपी = 1 468w, https://744025.smushcdn.com/1245953/wp-content/uploads/2020/04/Screen-Shot-2020-03 -24- at-09.53.50 .jpg? हानिपूर्ण = 1 और पट्टी = 1 और वेबप = 1520w "आकार =" (अधिकतम चौड़ाई: 520px) 100vw, 520px "> ध्यान दें कि हमारी तालिका में डबल है बॉर्डर ऐसा इसलिए है क्योंकि हमने टेबल (<टेबल>), उसके हेडर (
बॉर्डर-संक्षिप्त गुण किसी तालिका के दोहरे बॉर्डर को एकल बॉर्डर में कनवर्ट करता है। बॉर्डर-पतन गुण का डिफ़ॉल्ट मान संक्षिप्त हो जाता है। यदि गुण बॉर्डर-पतन मान पतन < प्राप्त करता है /code>, किसी सरणी के चारों ओर की सीमाएं ढह जाएंगी।
यहाँ क्रिया में b कमांड-संक्षिप्त गुण का एक उदाहरण दिया गया है:
हमारा कोड रिटर्न:
हमारी तालिका और उसकी सामग्री में अब एक ही बॉर्डर है।
बॉर्डर स्पेस इंजी
आप टेबल में सेल्स के बीच स्पेसिंग को परिभाषित करने के लिए बॉर्डर-स्पेसिंग प्रॉपर्टी का उपयोग कर सकते हैं। बॉर्डर-स्पेसिंग प्रॉपर्टी बीच में हॉरिजॉन्टल और वर्टिकल स्पेसिंग को परिभाषित करती है। सेल - और यह इसे उसी क्रम में करता है।
यहां एक उदाहरण है जो हमारी प्रारंभिक तालिका पर बॉर्डर-स्पेसिंग संपत्ति का उपयोग कर रहा है (बिना ध्वस्त सीमाओं के):
हमारा कोड रिटर्न:
हमारी प्रत्येक कोशिका में क्षैतिज पर 10px रिक्ति होती है और लंबवत सीमाएँ।
मान लीजिए कि हम चाहते हैं कि ऊपर दी गई हमारी तालिका की चौड़ाई (जिसकी सीमाएँ ढह गई हों) वेब पेज की ही चौड़ाई हो, और मान लें कि हम चाहते हैं कि प्रत्येक टेबल हेडर की ऊँचाई 30 पिक्सेल ऊँची हो। हम ऐसा कर सकते हैं निम्नलिखित सीएसएस कोड का उपयोग करना:
हमारा कोड रिटर्न:
<आंकड़ा वर्ग = "wp-ब्लॉक-छवि">जैसा कि आप देख सकते हैं, हमारी तालिका अब की चौड़ाई है वेब पेज। इसके अलावा, हमारी तालिका में कॉलम हेडर 30 पिक्सल ऊंचे हैं। तालिका में कक्ष और उन कक्षों की सामग्री। पैडिंग संपत्ति का उपयोग
मान लीजिए कि हम सेल के चारों ओर 10px पैडिंग जोड़ना चाहते हैं हेडर सेल सहित हमारी टेबल की सामग्री। हम इस कोड का उपयोग करके ऐसा कर सकते हैं:
हमारा कोड रिटर्न:
प्रत्येक पंक्ति की सामग्री और अब हमारी शीर्षलेख तालिका सभी किनारों पर 10px पैडिंग है। एक सरणी। डिफ़ॉल्ट रूप से,
पाठ संरेखण विशेषता के सबसे अधिक उपयोग किए जाने वाले मान हैं:< br>
- बाएं, मध्य, दाएं (माइक्रोसॉफ्ट एज और इंटरनेट एक्सप्लोरर को छोड़कर सभी ब्राउज़रों द्वारा समर्थित)
- प्रारंभ और अंत (माइक्रोसॉफ्ट एज और इंटरनेट एक्सप्लोरर को छोड़कर सभी ब्राउज़रों द्वारा समर्थित) )
मान लीजिए कि हम अपनी सरणी में
हमारा कोड रिटर्न:
इस उदाहरण में, हमने पाठ को सेल के बाहर केंद्रित किया है। सेल d `हेडर और हेडर सेल टेक्स्ट को संरेखित छोड़ दिया गया है।
वर्टिकल टेक्स्ट अलाइनमेंट
CSS
मध्य पर सेट होता है, जिसका अर्थ है कि सामग्री सेल के केंद्र में लंबवत रूप से संरेखित है।मान लीजिए कि हम अपने सेल
हमारा कोड रिटर्न:
Shop
Latest questions