CSS के साथ टेबल को कैसे स्टाइल करें

यह अध्ययन सीएसएस के साथ स्टाइलिंग टेबल से संबंधित गाइड करेगा।

CSS के साथ टेबल को कैसे स्टाइल करें?

तालिका में शैलियों को लागू करने के लिए, हम नीचे दिए गए चरणों की श्रृंखला से गुजरेंगे।

Step1: HTML में एक टेबल बनाएं

HTML में टेबल बनाने के लिए निम्न HTML तत्वों का उपयोग किया जाता है:

• ' <टेबल> “तत्व का प्रयोग HTML में टेबल बनाने के लिए किया जाता है।
• ' <कैप्शन> ” तत्व का उपयोग तालिका में एक शीर्षक जोड़ने के लिए किया जाता है।
• ' <थाई> ” का उपयोग तालिका के शीर्ष लेख को निर्दिष्ट करने के लिए किया जाता है, जिसमें आमतौर पर शीर्षक होते हैं।
• ' ” पंक्ति जोड़ने के लिए प्रयोग किया जाता है।
• ' <वें> 'शीर्षक सामग्री निर्दिष्ट करें।
• ' <टीबॉडी> 'तालिका के मुख्य भाग को निर्दिष्ट करता है।

बनाई गई तालिका वर्तमान में इस तरह दिखती है:

आइए देखें कि इस टेबल को कैसे स्टाइल करना है।

चरण 2: शैली 'शरीर' तत्व

तत्व को निम्नलिखित CSS स्टाइलिंग गुणों के साथ लागू किया जाता है:

• ' फुहारा परिवार 'मूल्य के साथ संपत्ति' वर्दाना, जिनेवा, ताहोमा, सं-सेरिफ़ ” का उपयोग ब्राउज़र द्वारा समर्थित फ़ॉन्ट को लागू करने के लिए किया जाता है। यदि ब्राउज़र पहली फ़ॉन्ट शैली का समर्थन नहीं करता है, तो दूसरे का उपयोग किया जाएगा।
• ' पीछे का रंग ” संपत्ति तत्व की पृष्ठभूमि का रंग सेट करती है।

चरण 3: शैली 'कैप्शन' तत्व

<कैप्शन> तत्व को इस प्रकार स्टाइल किया गया है:

• ' फ़ॉन्ट आकार 'संपत्ति का उपयोग फ़ॉन्ट आकार की सेटिंग के लिए किया जाता है।
• ' पाठ संरेखित 'संपत्ति तत्व के पाठ के संरेखण को निर्दिष्ट करती है।
• ' रंग ” संपत्ति तत्व के फ़ॉन्ट रंग को संदर्भित करती है।

यहाँ ऊपर दिए गए कोड का आउटपुट है:

चरण 4: तालिका में सीमा जोड़ें
' सीमा ” संपत्ति का उपयोग तत्व के चारों ओर एक सीमा जोड़ने के लिए किया जाता है। यह एक आशुलिपि संपत्ति है जो सीमा की चौड़ाई, सीमा शैली और सीमा रंग को निर्दिष्ट करती है।

पैडिंग और मार्जिन के साथ टेबल पर बॉर्डर लागू करें:

यहां:

• ' सीमा ” संपत्ति सीमा की चौड़ाई, सीमा शैली और सीमा रंग निर्दिष्ट करके तालिका के चारों ओर सीमा को समायोजित करती है।
• ' गद्दी 'तत्व की सामग्री के आसपास के स्थान को निर्दिष्ट करता है, जहां पहला मान शीर्ष-तल पर स्थान को परिभाषित करता है और दूसरा मान सामग्री के दाएं-बाएं किनारे पर स्थान जोड़ता है।
• ' अंतर 'मूल्य के साथ संपत्ति' ऑटो ”तत्व के चारों ओर समान स्थान जोड़ता है।

उत्पादन

टिप्पणी : यदि हम तालिका की सीमाओं के बीच रिक्त स्थान नहीं चाहते हैं, तो सीमा-संक्षेप गुण का उपयोग करें।

चरण 5: टेबल से बॉर्डर स्पेसिंग को संक्षिप्त करें
तालिका की सीमाओं के बीच के रिक्त स्थान को 'का उपयोग करके हटाया जा सकता है' सीमा-पतन ' संपत्ति 'पतन' मूल्य के साथ:

चरण 6: तालिका का आकार समायोजित करें
आइए देखें कि तालिका का आकार कैसे समायोजित करें:

जोड़ा गया ' चौड़ाई <वें> तत्व के साथ संपत्ति स्वचालित रूप से इसके अनुसार तालिका का आकार समायोजित करेगी ::

हम विशिष्ट टेबल सेल में स्टाइल भी लागू कर सकते हैं। आइए उन पर चर्चा करें!

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

अब, CSS फ़ाइल में वर्ग नाम का उपयोग करके सेल तक पहुँचें:

' ।प्रमुखता से दिखाना ” तत्व के वर्ग हाइलाइट को संदर्भित करता है। यह तत्व 'के साथ लागू किया गया है पीछे का रंग ” संपत्ति पृष्ठभूमि पर रंग निर्दिष्ट करने के लिए।

जैसा कि हम देख सकते हैं, निर्दिष्ट टेबल सेल को सफलतापूर्वक स्टाइल किया गया है:

चरण 8: फ़ॉन्ट परिवार और तालिका का आकार निर्धारित करें

निम्न CSS गुण तालिका तत्व पर लागू होते हैं:

• ' फुहारा परिवार ” संपत्ति तत्व की फ़ॉन्ट शैली सेट करती है।
• ' फ़ॉन्ट आकार ” संपत्ति का उपयोग तत्व के फ़ॉन्ट की सेटिंग के लिए किया जाता है।
• ' पाठ संरेखित ” संपत्ति का उपयोग पाठ संरेखण को समायोजित करने के लिए किया जाता है।

यहाँ आउटपुट है:

चरण 9: अनुक्रम में रंग पंक्तियाँ
विशिष्ट पंक्तियों या स्तंभों पर शैलियों को लागू करने की भी अनुमति है। उदाहरण के लिए, सम पंक्तियों को नीचे दिए गए प्रारूप का पालन करके स्टाइल किया गया है:

यहां:

• ' : nth-चाइल्ड (सम) “छद्म चयनकर्ता का उपयोग एक तर्क लेने के लिए किया जाता है जो उस पैटर्न को निर्दिष्ट करता है जिस पर स्टाइल लागू किया जाना है।
• ' पीछे का रंग ” संपत्ति का उपयोग तत्व की पृष्ठभूमि का रंग सेट करने के लिए किया जाता है।

यह देखा जा सकता है कि पृष्ठभूमि का रंग समान पंक्तियों पर सफलतापूर्वक लागू होता है:

यह सीएसएस के साथ स्टाइलिंग टेबल के बारे में था

निष्कर्ष

डेटा को व्यवस्थित रखने के लिए टेबल्स एक महत्वपूर्ण उपकरण हैं। HTML