केवल पांच मिनट में सीएसएस टेबल सीमा बनाने का तरीका जानें
आपने सुना होगा कि सीएसएस और एचटीएमएल टेबल मिश्रण नहीं करते हैं। यह बिल्कुल सही नहीं है। हां, लेआउट के लिए एचटीएमएल टेबल का उपयोग करना अब वेब डिज़ाइन का सर्वोत्तम अभ्यास नहीं है, जिसे सीएसएस लेआउट शैलियों द्वारा प्रतिस्थापित किया गया है, लेकिन टैबलेट अभी भी एक वेबपृष्ठ पर टैब्यूलर डेटा जोड़ने के लिए उपयोग करने के लिए सही मार्कअप है।
दुर्भाग्यवश, क्योंकि इतने सारे वेब पेशेवरों ने टेबल से दूर झुका दिया है कि वे जहर हैं, उनमें से कई पेशेवरों के पास इस सामान्य HTML तत्व और संघर्ष के साथ काम करने का थोड़ा सा अनुभव है जब उन्हें उन्हें वेबपृष्ठ पर संभालना होता है। उदाहरण के लिए, यदि आपके पास किसी पृष्ठ पर एक टेबल है और आप तालिका कक्षों में आंतरिक रेखाएं जोड़ना चाहते हैं।
सीएसएस टेबल सीमाएं
जब आप टेबल पर सीमा जोड़ने के लिए सीएसएस का उपयोग करते हैं, तो यह केवल तालिका के बाहर की सीमा को जोड़ता है। यदि आप उस तालिका की व्यक्तिगत कोशिकाओं में आंतरिक रेखाएं जोड़ना चाहते हैं, तो आपको आंतरिक सीएसएस तत्वों में सीमाएं जोड़ने की आवश्यकता है। आप व्यक्तिगत कोशिकाओं के अंदर लाइन जोड़ने के लिए एचआर टैग का भी उपयोग कर सकते हैं।
इस आलेख में शामिल शैलियों को लागू करने के लिए, आपको स्पष्ट रूप से अपने वेब पेज पर एक टेबल होना चाहिए। इसके बाद आपको अपने दस्तावेज़ के सिर में एक आंतरिक स्टाइल शीट के रूप में स्टाइल शीट बनाना चाहिए (यदि आप "साइट" एक एकल पृष्ठ हैं तो आप केवल ऐसा ही करेंगे) या बाहरी स्टाइल शीट के रूप में दस्तावेज़ से जुड़ा होगा (यह वही है जो आप यदि आपकी साइट एकाधिक पेज हैं तो आपको करेगा - आपको एक बाहरी शीट से सभी पृष्ठों को स्टाइल करने की अनुमति देता है)। आप स्टाइल शीट में इंटीरियर लाइनों को जोड़ने के लिए शैलियों को रखेंगे।
इससे पहले कि आप शुरू करें
सबसे पहले आपको यह तय करने की ज़रूरत है कि आप अपनी तालिका में लाइनों को कहां दिखाना चाहते हैं। आपके पास कई विकल्प हैं, जिनमें निम्न शामिल हैं:
- एक ग्रिड बनाने के लिए सभी कोशिकाओं के चारों ओर घूमना;
- केवल कॉलम के बीच की रेखाओं को पोजिशन करना;
- बस पंक्तियों के बीच; या
- विशिष्ट कॉलम या पंक्तियों के बीच।
आप अलग-अलग कोशिकाओं या व्यक्तिगत कोशिकाओं के अंदर की रेखाओं को भी स्थान दे सकते हैं।
तालिका में सभी कक्षों के चारों ओर लाइनें कैसे जोड़ें
अपनी तालिका में सभी कोशिकाओं के चारों ओर लाइन जोड़ने के लिए, उस ग्रिड-जैसी प्रभाव को बनाने के लिए, अपनी स्टाइल शीट में निम्न जोड़ें:
टीडी, वें {
सीमा: ठोस 1 पीएक्स काला;
}
एक टेबल में बस कॉलम के बीच लाइनों को कैसे जोड़ें
कॉलम के बीच लाइन जोड़ने के लिए (यह लंबवत रेखाएं बनाता है जो तालिका के कॉलम पर ऊपर से नीचे तक चलती हैं), अपनी स्टाइल शीट में निम्न जोड़ें:
टीडी, वें {
सीमा-बाएं: ठोस 1 पीएक्स काला;
}
फिर, यदि आप उन्हें पहले कॉलम पर नहीं दिखाना चाहते हैं, तो आपको उन वें और टीडी कोशिकाओं में कक्षा जोड़ने की आवश्यकता होगी। इस उदाहरण में, हम मानते हैं कि हमारे पास उन कोशिकाओं पर कोई सीमा नहीं है और हम इस विशिष्ट सीएसएस नियम के साथ सीमा को हटा देते हैं। तो यहां HTML कक्षा है जिसका हम उपयोग करेंगे:
वर्ग = "कोई सीमा">
और फिर हम निम्नलिखित शैली को हमारी स्टाइल शीट में जोड़ सकते हैं:
।कोई सीमा नहीं {
सीमा-बाएं: कोई नहीं;
}
एक टेबल में बस पंक्तियों के बीच लाइनों को कैसे जोड़ें
कॉलम के बीच लाइन जोड़ने के साथ, आप इसे अपनी स्टाइल शीट में जोड़े गए एक साधारण शैली के साथ कर सकते हैं। नीचे दिया गया सीएसएस हमारी तालिका की प्रत्येक पंक्ति के बीच लंबवत रेखाएं जोड़ देगा:
tr {
सीमा-तल: ठोस 1 पीएक्स काला;
}
और तालिका के नीचे से सीमा को हटाने के लिए, आप एक बार फिर उस टैग को एक कक्षा जोड़ देंगे:
वर्ग = "कोई सीमा">
अपनी स्टाइल शीट में निम्न शैली जोड़ें:
।कोई सीमा नहीं {
सीमा-तल: कोई नहीं;
}
एक तालिका में विशिष्ट कॉलम या पंक्तियों के बीच लाइनों को कैसे जोड़ें
यदि आप केवल विशिष्ट पंक्तियों या स्तंभों के बीच लाइन चाहते हैं, तो आपको उन कक्षों या पंक्तियों पर एक कक्षा का उपयोग करने की आवश्यकता है। स्तंभों के बीच एक पंक्ति जोड़ना पंक्तियों के बीच थोड़ा अधिक कठिन है क्योंकि आपको उस कॉलम में प्रत्येक सेल में कक्षा जोड़नी है। यदि आपकी तालिका स्वचालित रूप से किसी प्रकार के सीएमएस से उत्पन्न होती है , तो यह संभव नहीं हो सकता है, लेकिन यदि आप पेज को कोडिंग कर रहे हैं, तो आप इस प्रभाव को प्राप्त करने के लिए आवश्यक उचित कक्षाएं जोड़ सकते हैं।
वर्ग = "पक्ष सीमा">
पंक्तियों के बीच रेखाएं जोड़ना बहुत आसान है, क्योंकि आप उस पंक्ति में कक्षा को जोड़ सकते हैं जिस पर आप लाइन चाहते हैं।
वर्ग = "सीमा-नीचे">
फिर सीएसएस को अपनी स्टाइल शीट में जोड़ें:
। सीमा-पक्ष {
सीमा-बाएं: ठोस 1 पीएक्स काला;
}
। सीमा-नीचे {
सीमा-तल: ठोस 1 पीएक्स काला;
}
तालिका में व्यक्तिगत कक्षों के चारों ओर लाइनें कैसे जोड़ें
अलग-अलग कोशिकाओं के चारों ओर लाइन जोड़ने के लिए, आप उन कक्षों में एक कक्षा जोड़ते हैं जिन्हें आप चारों ओर सीमा चाहते हैं:
वर्ग = "सीमा">
और उसके बाद निम्न शैली को अपनी स्टाइल शीट में जोड़ें:
.border {
सीमा: ठोस 1 पीएक्स काला;
}
तालिका में व्यक्तिगत कक्षों के अंदर लाइनों को कैसे जोड़ें
यदि आप किसी सेल की सामग्री के अंदर लाइनें जोड़ना चाहते हैं, तो ऐसा करने का सबसे आसान तरीका क्षैतिज नियम टैग (
) के साथ है।
उपयोगी सलाह
यदि आप अपनी सीमाओं में अंतराल देखते हैं, तो आपको यह सुनिश्चित करना चाहिए कि आपकी तालिका पर सीमा-पतन शैली सेट हो। अपनी स्टाइल शीट में निम्नलिखित जोड़ें:
टेबल {
सीमा-पतन: पतन;
}
आप उपरोक्त सभी सीएसएस से बच सकते हैं और अपने टेबल टैग में सीमा विशेषता का उपयोग कर सकते हैं। हालांकि, यह समझें कि उनकी विशेषता, जबकि बहिष्कृत नहीं है, सीएसएस की तुलना में काफी कम लचीला है, क्योंकि आप केवल सीमा की चौड़ाई को परिभाषित कर सकते हैं और केवल तालिका के सभी कक्षों या किसी के आसपास ही इसे प्राप्त कर सकते हैं।