CSS मा तालिकामा आन्तरिक रेखाहरू (सीमाहरू) कसरी थप्नुहोस्

सिक्नुहोस् केवल पाँच मिनेटमा CSS तालिका सिमाना कसरी सिर्जना गर्ने

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

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

CSS तालिका सीमाहरू

जब तपाइँ तालिकाहरू मा सिमानाहरू थप्न CSS प्रयोग गर्नुहुन्छ, यसले केवल तालिकाको बाहिरको वरिपरि मात्र थप्छ। यदि तपाइँ तालिकाको व्यक्तिगत कक्षहरूमा आन्तरिक रेखाहरू थप्न चाहनुहुन्छ भने, तपाईंले सिमाना CSS इन्टरनेट तत्वहरूमा थप्न आवश्यक छ। तपाईं व्यक्तिगत कक्ष भित्र रेखाहरू थप्न HR टैग प्रयोग गर्न सक्नुहुन्छ।

यो आलेखमा ढाडिएको शैलीहरू लागू गर्नको लागि, तपाइँसँग तपाइँको वेब पेजमा तालिकामा स्पष्ट रूपमा हुनुपर्छ। त्यसपछि तपाइँले तपाइँको पानाको टाउकोमा आन्तरिक स्टाइल पानाको रुपमा शैली शैली पाना बनाउनुपर्दछ (तपाइँ सम्भवतः यो मात्र हुनेछ यदि तपाईंको "साइट" एकल पृष्ठ हो) वा बाह्य शैली पानाको रूपमा कागजातसँग संलग्न छ (यो के हो तपाई यदि तपाईंको साइट बहु पृष्ठ हो भने - तपाईले शैलीलाई एक बाह्य पानाबाट सबै पृष्ठहरूलाई अनुमति दिन्छ)। तपाईले शैलीहरू कि स्टाइल पानामा इन्टरनेट लाइनहरू थप्न सक्नुहुनेछ।

तपाईंले सुरु गर्नु अघि

पहिला तपाईंलाई निर्णय गर्न आवश्यक छ कि तपाइँ तालिकामा जहाँ रेखाहरू देखा पर्दछ। तपाईं सँग धेरै विकल्पहरू छन्:

• सबै ग्रिडहरू ग्रिड बनाउनको लागि;
• केवल स्तम्भहरू बीच लाइनहरू स्थिति निर्धारण गर्दै;
• पङ्क्तिहरू बीच मात्र वा
• विशिष्ट स्तम्भहरू वा पङ्क्तिहरू बीच।

तपाईं पनि व्यक्तिगत कक्ष वरिपरि व्यक्तिगत कक्ष भित्र रेखाहरू पनि स्थान गर्न सक्नुहुनेछ।

तालिकामा सबै कक्षहरू वरिपरि लाइनहरू कसरी थप्नुहोस्

तपाईंको तालिकाको सबै कक्षहरू वरिपरि रेखाहरू थप्न, त्यो ग्रिड-जस्तै असर सिर्जना गर्नुहोस्, तपाईंको शैली पानामा निम्न थप्नुहोस्:

td, th {
किनारा: ठोस 1px कालो;
}

तालिकामा बस स्तम्भहरू बीच कसरी रेखाहरू थप्नुहोस्?

स्तम्भहरू बीचमा रेखाहरू थप्न (यो ठाडो रेखाहरू जुन तालिकाको स्तम्भमा माथि देखि तल दौडिन्छ) सिर्जना गर्दछ, तपाईंको शैली पानामा निम्न थप्नुहोस्:

td, th {
किनारा बायाँ: ठोस 1px कालो;
}

त्यसपछि, यदि तपाईं तिनीहरूलाई पहिलो स्तम्भमा देखा पर्नुहुन्न भने, तपाइँ ती ती र टीडी कक्षहरूमा एक कक्षा थप्न आवश्यक पर्दछ। यस उदाहरणमा, हामी मान्छौं कि हामीसँग यी कक्षहरूमा कुनै सीमाको कुनै वर्ग छैन र हामी यो अधिक विशिष्ट CSS नियमसँग सीमा हटाउँछौं। त्यसो भए यहाँ एचटीएमएल वर्ग हो जुन हामीले प्रयोग गर्यौं:

class = "no-border">

र त्यसपछि हामी निम्न शैली हाम्रो शैली पानामा थप्न सक्छौं:

.no-border {
सिमाना बायाँ: कुनै पनि होइन;
}

तालिकामा बस पङ्क्तिहरूबीच कसरी रेखाहरू थप्नुहोस्?

स्तम्भहरू बीच रेखाहरू थप्नको रूपमा, तपाईं यो मात्र एक साधारण शैलीसँग गर्न सक्नुहुनेछ तपाईको शैली पानामा थपियो। तलका सीएसएसले हाम्रो तालिकाको प्रत्येक पङ्क्ति बीच ठाडो पङ्क्तिहरू थप्नेछ:

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

र तालिकाको तलबाट बोर्डर हटाउन, तपाइँ एक पटक फेरि ट्र ट्यागमा क्लास थप्न सक्नुहुन्छ:

class = "no-border">

तपाईंको शैली पानामा निम्न शैली थप्नुहोस्:

.no-border {
सीमा-तल: कुनै पनि होइन;
}

तालिकामा विशिष्ट स्तम्भहरू वा पङ्क्तिहरू बीच कसरी रेखाहरू थप्नुहोस्?

यदि तपाईं मात्र विशेष पङ्क्ति वा स्तम्भहरू बीच रेखाहरू चाहनुहुन्छ भने, तपाइँ ती कक्ष वा पङ्क्तिहरूमा क्लास प्रयोग गर्न आवश्यक छ। स्तम्भहरू बीचको रेखा थप्न पङ्क्तिहरू बीचको तुलनामा एकदम धेरै गाह्रो छ किनकि तपाइँले त्यस स्तम्भमा प्रत्येक कक्षमा कक्षा थप्नु पर्छ। यदि तपाईंको तालिका कुनै प्रकारको CMS बाट स्वत: उत्पन्न हुन्छ भने, यो सम्भव नहुन सक्छ, तर यदि तपाईंले पृष्ठ कोडिङ गर्दै हुनुहुन्छ भने, तपाइँ यस प्रभावलाई प्राप्त गर्न आवश्यक वर्गहरू थप्न सक्नुहुनेछ।

class = "side-border">

पङ्क्तिहरू बीच रेखाहरू थप्दा धेरै सजिलो छ, किनकि तपाइँ भर्खरै पङ्क्तिमा थप्न सक्नुहुन्छ जुन तपाइँ लाइनमा चाहनुहुन्छ।

class = "border-bottom">

त्यसपछि सीएसएस तपाइँको शैली पानामा थप्नुहोस्:

.border-side {
किनारा बायाँ: ठोस 1px कालो;
}
.border-bottom {
सीमा-तल: ठोस 1px कालो;
}

तालिकामा व्यक्तिगत कक्षहरू वरिपरि लाइनहरू कसरी थप्नुहोस्

व्यक्तिगत कक्षहरूको वरिपरि रेखाहरू थप्न, तपाईं एक वर्गलाई कक्षहरूमा जुन तपाईं चाहानुहुन्छ सीमा वरिपरि थप्नुहोस्:

class = "border">

र त्यसपछि निम्न सीएसएस तपाईंको शैली पानामा थप्नुहोस्:

.border {
किनारा: ठोस 1px कालो;
}

तालिकामा व्यक्तिगत कक्ष भित्र कसरी रेखाहरू थप्नुहोस्?

यदि तपाइँ कक्षको सामग्री भित्र रेखाहरू थप्न चाहानुहुन्छ, यो गर्ने सबै भन्दा राम्रा तरिका क्षैतिज नियम ट्यागसँग छ ( <घण्टा> )।

उपयोगी सुझावहरू

यदि तपाईंले आफ्नो किनारामा अंतराल देख्नुहुन्छ भने, तपाईंले निश्चित गर्नुपर्छ कि सीमा-सीमा शैली तपाइँको तालिकामा सेट गरिएको छ। तपाईंको शैली पानामा निम्न थप्नुहोस्:

तालिका {
सीमा-पतन: पतन;
}

तपाईंले माथिको CSS बाट बच्न सक्नुहुन्छ र तपाईंको ट्याब ट्यागमा बोर्डर विशेषता प्रयोग गर्न सक्नुहुन्छ। तथापि, तथापि, कि उनको विशेषता, बिच्छेदन हुँदा, सीएसएस भन्दा बढी महत्त्वपूर्ण लचीला छ, किनकि तपाइँ केवल सीमाको चौडाइ परिभाषित गर्न सक्नुहुन्छ र केवल तालिका वा कुनै पनि कक्षको वरिपरि मात्र गर्न सक्नुहुन्छ।