Skip to main content

एक HTML तालिका में आंतरिक सीमाओं को जोड़ने के लिए सीएसएस का उपयोग करना

Python Web Apps with Flask by Ezra Zigmond (जून 2026)

Python Web Apps with Flask by Ezra Zigmond (जून 2026)

:

Anonim

आपने सुना होगा कि सीएसएस और एचटीएमएल टेबल मिश्रण नहीं करते हैं। यह मामला नहीं है। हां, लेआउट के लिए एचटीएमएल टेबल का उपयोग अब वेब डिज़ाइन का सर्वोत्तम अभ्यास नहीं है क्योंकि उन्हें सीएसएस लेआउट शैलियों द्वारा प्रतिस्थापित किया गया है, लेकिन टैबलेट अभी भी एक वेबपृष्ठ पर टैब्यूलर डेटा जोड़ने के लिए उपयोग करने के लिए सही मार्कअप हैं।

चूंकि इतने सारे वेब पेशेवर टेबल से दूर भागते हैं क्योंकि वे सोचते हैं कि वे कुछ भी परेशानी नहीं हैं, उनमें से कई पेशेवरों के पास इस सामान्य HTML तत्व के साथ काम करने का थोड़ा सा अनुभव है, और जब वे किसी वेबपृष्ठ पर तालिका कक्षों में आंतरिक रेखाएं जोड़ते हैं तो वे संघर्ष करते हैं।

सीएसएस टेबल सीमाएं

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

इस ट्यूटोरियल में शामिल शैलियों को लागू करने के लिए, आपको किसी वेबपृष्ठ पर एक टेबल की आवश्यकता है। फिर, आप अपने दस्तावेज़ के सिर में एक आंतरिक स्टाइल शीट के रूप में स्टाइल शीट बनाते हैं (यदि आप केवल एक पृष्ठ से निपट रहे हैं) या दस्तावेज़ से बाहरी स्टाइल शीट के रूप में संलग्न हैं (यदि साइट में एकाधिक पेज हैं)। आपने स्टाइल शीट में इंटीरियर लाइनों को जोड़ने के लिए शैलियों को रखा है।

इससे पहले कि आप शुरू करें

तय करें कि आप तालिका में लाइनों को कहां दिखाना चाहते हैं। आपके पास कई विकल्प हैं, जिनमें निम्न शामिल हैं:

  • एक ग्रिड बनाने के लिए सभी कोशिकाओं के चारों ओर घूमना
  • केवल कॉलम के बीच की रेखाओं को पोजिशन करना
  • बस पंक्तियों के बीच
  • विशिष्ट कॉलम या पंक्तियों के बीच।

आप अलग-अलग कोशिकाओं या व्यक्तिगत कोशिकाओं के अंदर की रेखाओं को भी स्थान दे सकते हैं।

तालिका में सभी कक्षों के चारों ओर लाइनें कैसे जोड़ें

अपनी तालिका में सभी कक्षों के चारों ओर लाइन जोड़ने के लिए, ग्रिड प्रभाव बनाकर, अपनी स्टाइलशीट में निम्न जोड़ें:

टीडी, वें {सीमा: ठोस 1 पीएक्स काला;}

एक टेबल में बस कॉलम के बीच लाइनों को कैसे जोड़ें

तालिका के कॉलम पर ऊपर से नीचे तक चलने वाली लंबवत रेखाएं बनाने के लिए कॉलम के बीच रेखाएं जोड़ने के लिए, अपनी स्टाइलशीट में निम्न जोड़ें:

टीडी, वें {सीमा-बाएं: ठोस 1 पीएक्स काला;}

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

वर्ग = "कोई सीमा">

फिर, स्टाइल शीट में निम्न शैली जोड़ें:

।कोई सीमा नहीं {सीमा-बाएं: कोई नहीं;}

एक टेबल में बस पंक्तियों के बीच लाइनों को कैसे जोड़ें

कॉलम के बीच लाइन जोड़ने के साथ, आप स्टाइल शीट में जोड़े गए एक साधारण शैली के साथ पंक्तियों के बीच क्षैतिज रेखाएं जोड़ सकते हैं, जैसा कि निम्नानुसार है:

tr {सीमा-तल: ठोस 1 पीएक्स काला;}

तालिका के नीचे से सीमा को हटाने के लिए, आप एक बार फिर उसमें एक कक्षा जोड़ देंगे

टैग:

वर्ग = "कोई सीमा">

अपनी स्टाइल शीट में निम्न शैली जोड़ें:

।कोई सीमा नहीं {सीमा-तल: कोई नहीं;}

एक तालिका में विशिष्ट कॉलम या पंक्तियों के बीच लाइनों को कैसे जोड़ें

यदि आप केवल विशिष्ट पंक्तियों या स्तंभों के बीच लाइन चाहते हैं, तो आपको उन कक्षों या पंक्तियों पर एक कक्षा का उपयोग करने की आवश्यकता है। स्तंभों के बीच एक पंक्ति जोड़ना पंक्तियों के बीच थोड़ा अधिक कठिन है क्योंकि आपको उस कॉलम में प्रत्येक सेल में कक्षा जोड़नी है। यदि आपकी तालिका स्वचालित रूप से किसी प्रकार के सीएमएस से उत्पन्न होती है, तो यह संभव नहीं हो सकता है, लेकिन यदि आप पेज को कोडिंग कर रहे हैं, तो आप इस प्रभाव को प्राप्त करने के लिए आवश्यक उचित कक्षाएं जोड़ सकते हैं।

वर्ग = "पक्ष सीमा">

पंक्तियों के बीच रेखाएं जोड़ना आसान है क्योंकि आप उस पंक्ति में कक्षा को जोड़ सकते हैं जिस पर आप लाइन चाहते हैं।

वर्ग = "सीमा-नीचे">

फिर, सीएसएस को अपनी स्टाइलशीट में जोड़ें:

। सीमा-पक्ष {सीमा-बाएं: ठोस 1 पीएक्स काला;}। सीमा-नीचे {सीमा-तल: ठोस 1 पीएक्स काला;}

तालिका में व्यक्तिगत कक्षों के चारों ओर लाइनें कैसे जोड़ें

अलग-अलग कोशिकाओं के चारों ओर लाइन जोड़ने के लिए, आप उन कक्षों में एक कक्षा जोड़ते हैं जिन्हें आप चारों ओर सीमा चाहते हैं:

वर्ग = "सीमा">

फिर निम्न स्टाइलशीट में निम्न सीएसएस जोड़ें:

.border {सीमा: ठोस 1 पीएक्स काला;}

तालिका में व्यक्तिगत कक्षों के अंदर लाइनों को कैसे जोड़ें

यदि आप किसी सेल की सामग्री के अंदर लाइनें जोड़ना चाहते हैं, तो ऐसा करने का सबसे आसान तरीका क्षैतिज नियम टैग के साथ है ().

उपयोगी सलाह

यदि आप अपनी सीमाओं में अंतराल देखते हैं, तो सुनिश्चित करें कि सीमा-पतन शैली तालिका पर सेट है। अपनी स्टाइलशीट में निम्न जोड़ें:

टेबल {सीमा-पतन: पतन;}

आप सभी से बच सकते हैं और अपने टेबल टैग में सीमा विशेषता का उपयोग कर सकते हैं। हालांकि, यह विशेषता है कि, यह विशेषता, बहिष्कृत नहीं होने पर, सीएसएस की तुलना में काफी कम लचीला है, क्योंकि आप केवल सीमा की चौड़ाई को परिभाषित कर सकते हैं और केवल तालिका के सभी कक्षों या किसी के आसपास ही इसे प्राप्त कर सकते हैं।