सीएसएस तालिका में इंडेंटेशन। कोशिकाओं के भीतर मार्जिन

हैलो। एक तत्व के रूप में तालिका की अपनी विशेषताएं हैं जो इसे बहुत परिचित से कई ब्लॉकों में भेद करती हैं। आज मैं इस बारे में बात करना चाहूंगा कि टेबल सेल्स के बीच की दूरी css में कैसे लिखी जाती है।

ब्लॉक मॉडल के साथ अंतर

ब्लॉकों के बीच की दूरी निर्धारित करने के लिए, आमतौर पर बाहरी पैडिंग का उपयोग किया जाता है, लेकिन यह कोशिकाओं के मामले में काम नहीं करता है। कोशिकाओं को आंतरिक रूप से गद्देदार किया जा सकता है, लेकिन बाहरी रूप से नहीं।

यह एक छोटी सी आपदा लगती है, लेकिन डिफ़ॉल्ट रूप से तालिका में कोशिकाएं एंड-टू-एंड नहीं होती हैं, लेकिन छोटे इंडेंट के साथ, जिनकी हमेशा जरूरत नहीं होती है। उन्हें कैसे हटाया जाए?

सीमा-स्थान की संपत्ति

संपत्ति बचाव के लिए आती है, जो विशेष रूप से सारणीबद्ध डेटा के लिए सीएसएस में उपयोग की जाती है - सीमा-रिक्ति। जैसा कि नाम से पता चलता है, यह प्रत्येक सेल से मुक्त स्थान (पैडिंग) को परिभाषित करता है।

एक महत्वपूर्ण बिंदु: पूरी तालिका को सीमा-रिक्ति निर्धारित करने की आवश्यकता है। वह इस प्रकार है:

तालिका (
सीमा-रिक्ति: 0;
}

इस नियम के साथ, हम कोशिकाओं के बीच की दूरी को दूर करते हैं और अब उन्हें एक-दूसरे के खिलाफ कसकर दबाया जाता है। तदनुसार, यदि आवश्यक हो, तो आप इस दूरी को निर्धारित कर सकते हैं।

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

कोशिकाओं की गद्दी निर्धारित करने का तरीका

पहले इस टैग के लिए

सेलस्पेसिंग विशेषता को जोड़ा, जिसने पैडिंग को परिभाषित किया, लेकिन आज यह अनुशंसित नहीं है। यह कोड को अव्यवस्थित कर रहा है और आधुनिक वेब विकास मानकों तक नहीं है।

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

जैसा कि आप देख सकते हैं, सीएसएस में, तालिका कोशिकाओं के बीच की दूरी को पूरी तरह से हटाया जा सकता है, या आप संपत्ति का उपयोग करके इसे नियंत्रित कर सकते हैं सीमा-रिक्ति... आज के लिए इतना ही। यदि आप साइट निर्माण के विषय में रुचि रखते हैं, तो साइट पर नई सामग्री रखने के लिए सदस्यता लें।

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

इस लेख में, मैं आपको HTML तालिकाओं को स्टाइल करने की जटिलताओं से परिचित कराऊंगा, और आप इन लक्ष्यों को प्राप्त करने के लिए डिज़ाइन किए गए नए सीएसएस गुण सीखेंगे।

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

(तालिका का "पाद") पृष्ठभूमि का रंग - मूंगा, तत्व के लिए (तालिका "सिर") पृष्ठभूमि का रंग निर्धारित करें चांदी.

वस्तुओं के लिए

वह तत्व के अंदर हैं (टेबल बॉडी) होवर पर पृष्ठभूमि का रंग परिवर्तन सेट करें (छद्म वर्ग: होवर) c सफेद प्रति रंग हाकी (पूरी पंक्ति पर प्रकाश डाला गया है)।

हमारे उदाहरण का परिणाम:

चित्र: 153 टेबल्स में स्टाइलिंग रो का उदाहरण

निम्न उदाहरण से पता चलता है कि टेबल सेल (संपत्ति) के लिए कोने को कैसे लगाया जाए।

सेल कोनों को गोल करने का उदाहरण

टैग

विवरण


तालिका की सामग्री को परिभाषित करता है।

तालिका का नाम निर्दिष्ट करता है।
		तालिका के हेडर सेल को परिभाषित करता है।

एक तालिका में एक पंक्ति को परिभाषित करता है।
		तालिका के डेटा सेल को परिभाषित करता है।

तालिका (टेबल हेडर) में समूह हेडर समाहित करने के लिए उपयोग किया जाता है।

तालिका के "निकाय" को शामिल करने के लिए उपयोग किया जाता है।

तालिका (पाद लेख) के "पाद" को शामिल करने के लिए उपयोग किया जाता है।

टैग के भीतर प्रत्येक कॉलम के लिए निर्दिष्ट कॉलम गुणों को परिभाषित करता है

एक तालिका में स्तंभों के एक समूह को परिभाषित करता है।

टेबल इंडेंट्स के साथ काम करना

तालिका में पैडिंग का उपयोग करना

तालिका संकेत
1	2	3	4
2
3
4

इस उदाहरण में, हम:

बाहरी पैडिंग (मार्जिन: 0 ऑटो) के साथ क्षैतिज केंद्रित तकनीक का उपयोग करके केंद्र में टेबल रखा।
तालिका के नाम के लिए (टैग

) हमने नीचे की पैडिंग को 19 पिक्सेल पर सेट किया है। मुझे आशा है कि आप असमान संख्याओं से भ्रमित नहीं होंगे :)

हमारे उदाहरण का परिणाम:

कोशिकाओं के बीच की दूरी

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

पड़ोसी कोशिकाओं की सीमाओं के बीच की दूरी निर्धारित करने के लिए, आपको सीएसएस संपत्ति - बॉर्डर-स्पेसिंग का उपयोग करना चाहिए।

तालिकाओं के बीच रिक्ति बदलें

सीमा-रिक्ति: 30px 10px;
1	2	3
2
3

सीमा-रिक्ति: 0;
1	2	3
2
3

सीमा-रिक्ति: 0.2em;
1	2	3
2
3

इस उदाहरण में, हम:

बाईंओर तैरना)। यदि आप फ़्लोटिंग तत्वों के विषय से चूक गए हैं, तो आप हमेशा इस ट्यूटोरियल में वापस आ सकते हैं - ""।
इसके अलावा, हम टेबल के गद्दी को 30px के दाईं ओर सेट करते हैं और तालिकाओं के ऊर्ध्वाधर संरेखण को सेट करते हैं (तत्व के शीर्ष को सबसे ऊंचे तत्व के शीर्ष के साथ संरेखित किया जाता है)। हम इस लेख में विस्तार से इस संपत्ति पर लौटेंगे।

) - साहसिक।

टेबल सेल्स (हेडर और डेटा सेल) के लिए, हम # F50 हेक्स कलर के साथ 1 पिक्सेल सॉलिड बॉर्डर सेट करते हैं और सभी पक्षों के लिए 19 पिक्सल के लिए पैडिंग सेट करते हैं।

कक्षा के साथ पहली तालिका के लिए ।प्रथम हम वर्ग के साथ दूसरी तालिका के लिए तालिका कोशिकाओं (सीमा-स्थान संपत्ति) के बीच अंतर को 30px 10px पर सेट करते हैं ।दूसरा कक्षा के साथ तीसरी तालिका के लिए शून्य के बराबर .third 0.2em के बराबर।

मैं इस तथ्य पर आपका ध्यान आकर्षित करता हूं कि यदि बॉर्डर-स्पेसिंग प्रॉपर्टी में केवल एक ही लंबाई मान निर्दिष्ट किया जाता है, तो यह क्षैतिज और लंबवत रूप से रिक्ति को इंगित करता है, और यदि दो लंबाई मान निर्दिष्ट किए जाते हैं, तो पहला क्षैतिज दूरी निर्धारित करता है, और दूसरा ऊर्ध्वाधर। आसन्न कोशिकाओं की सीमाओं के बीच की दूरी को CSS इकाइयों (px, cm, em, आदि) में निर्दिष्ट किया जा सकता है। नकारात्मक मूल्यों की अनुमति नहीं है।

हमारे उदाहरण का परिणाम:

तालिका कोशिकाओं के आसपास की सीमाओं को प्रदर्शित करें

तुम कह सकते हो: - तो, \u200b\u200bहमने 0 के मान के साथ बॉर्डर-स्पेसिंग प्रॉपर्टी का उपयोग करते हुए कोशिकाओं के बीच रिक्ति को हटा दिया, लेकिन अब हमारे पास कक्षों की सीमाएं क्यों हैं?

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

ऐसा करने के लिए, आपको सीमा-पतन सीएसएस संपत्ति का उपयोग करने की आवश्यकता है। अजीब तरह से पर्याप्त है, पतन मूल्य के साथ सीमा-पतन संपत्ति का उपयोग करना कोशिकाओं के बीच की खाई को दूर करने का सबसे अच्छा तरीका है और उनके साथ दोहरी सीमाएं नहीं मिलती हैं।

सीमा-रिक्ति संपत्ति के 0 पर सेट करने और सीमा-पतन संपत्ति के पतन के लिए सेट का उपयोग करते समय सीमा व्यवहार की तुलना पर विचार करें:

तालिका कोशिकाओं के आसपास सीमाओं को प्रदर्शित करने का उदाहरण

सीमा-रिक्ति: 0;
1	2	3
2
3

सीमा-पतन: पतन;
1	2	3
2
3

इस उदाहरण में, हम:

हमने अपनी टेबल को फ्लोट और लेफ्ट-एलायड (फ्लोट: लेफ्ट) बना दिया, उनके दायें पैडिंग को 30px पर सेट करें।
तालिका नाम (टैग) के लिए सेट करें

) - साहसिक।

टेबल सेल (हेडर और डेटा सेल) के लिए, हम # F50 हेक्स के साथ 5px सॉलिड बॉर्डर सेट करते हैं और 50px की निश्चित चौड़ाई और 75px की ऊँचाई तय करते हैं।

कक्षा के साथ पहली तालिका के लिए ।प्रथम हम तालिका कोशिकाओं के बीच अंतर को शून्य (बॉर्डर-स्पेसिंग: 0;) पर सेट करते हैं, और कक्षा के साथ दूसरी तालिका के लिए ।दूसरा पतन के लिए सीमा-पतन संपत्ति सेट करें, जो संभव होने पर सेल सीमाओं को एक में मिला देता है।

हमारे उदाहरण का परिणाम:

खाली कोशिकाओं का व्यवहार

CSS का उपयोग करके, आप यह निर्धारित कर सकते हैं कि किसी तालिका में रिक्त कक्षों के लिए सीमाओं और पृष्ठभूमि को प्रदर्शित करना है या नहीं। खाली कोशिकाओं की संपत्ति इस व्यवहार के लिए जिम्मेदार है, जो डिफ़ॉल्ट रूप से, जैसा कि आपने पिछले उदाहरणों से देखा होगा, खाली कोशिकाओं को प्रदर्शित करता है।

चलिए एक उदाहरण पर चलते हैं:

खाली तालिका कोशिकाओं को प्रदर्शित करने का उदाहरण

रिक्त-कोशिकाएँ: दिखावा;
1	2	3
2		☺
3	☺

रिक्त-कोशिकाएँ: छिपाना;
1	2	3
2		☺
3	☺

यह समझने के लिए कि इस उदाहरण से रिक्त कोशिकाएं कैसे काम करती हैं, यह बहुत सरल है, अगर इसे छिपाने के लिए सेट किया गया है, तो रिक्त कोशिकाएं और उनमें पृष्ठभूमि छिपी होगी, यदि दिखाने के लिए सेट किया गया है (डिफ़ॉल्ट रूप से), तो उन्हें प्रदर्शित किया जाएगा।

तालिका शीर्ष लेख स्थान

आइए स्टाइलिंग टेबल के लिए एक और सरल संपत्ति पर एक नज़र डालें - कैप्शन-साइड, जो टेबल कैप्शन की स्थिति (तालिका के ऊपर या नीचे) सेट करता है। डिफ़ॉल्ट रूप से, कैप्शन-साइड प्रॉपर्टी को शीर्ष पर सेट किया जाता है, जो कैप्शन को टेबल के ऊपर रखता है। शीर्षक को टेबल के नीचे रखने के लिए, आपको संपत्ति का उपयोग मूल्य तल के साथ करना चाहिए।

आइए इस संपत्ति का उपयोग करने का एक उदाहरण देखें:

कैप्शन-साइड संपत्ति का उपयोग करने का उदाहरण

तालिका के ऊपर शीर्षक
नाम	कीमत
एक मछली	350 रूबल
मांस	250 रूबल

तालिका के नीचे शीर्षक
नाम	कीमत
एक मछली	350 रूबल
मांस	250 रूबल

इस उदाहरण में, हमने बनाया है दो कक्षाएंजो टेबल हैडर की स्थिति को नियंत्रित करता है। प्रथम श्रेणी ( .topCaption) तालिका का शीर्षक इसके ऊपर रखता है, हमने इसे पहली तालिका और दूसरी कक्षा में लागू किया ( .bottomCaption) तालिका का शीर्षक इसके नीचे रखता है, हमने इसे दूसरी तालिका पर लागू किया। कक्षा .topCaption डिफ़ॉल्ट कैप्शन-साइड गुण है और प्रदर्शन उद्देश्यों के लिए बनाया गया था।

हमारे उदाहरण का परिणाम:

क्षैतिज और ऊर्ध्वाधर संरेखण

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

कक्षों में सामग्री के लिए संरेखण सेट करने के लिए, आपको पाठ-संरेखित संपत्ति के साथ विशेष कीवर्ड का उपयोग करना चाहिए। आइए निम्नलिखित उदाहरण में इस संपत्ति के कीवर्ड के आवेदन पर विचार करें।

एक तालिका में क्षैतिज संरेखण का उदाहरण

मूल्य	विवरण
बाएं	सेल पाठ को बाईं ओर संरेखित करता है। यह डिफ़ॉल्ट है (यदि पाठ दिशा दाईं ओर स्थित है)।
सही	सेल पाठ को दाईं ओर संरेखित करता है। यह डिफ़ॉल्ट है (यदि पाठ की दिशा दाएं से बाएं है)।
केंद्र	सेल पाठ को केंद्र में संरेखित करता है।
औचित्य साबित	स्ट्रेचेस लाइनें ताकि प्रत्येक लाइन में एक ही चौड़ाई हो (चौड़ाई को फिट करने के लिए सेल टेक्स्ट को फैलाता है)।

इस उदाहरण में, हमने बनाया है चार वर्गोंकोशिकाओं में विभिन्न क्षैतिज संरेखण सेट करें और उन्हें तालिका पंक्तियों के क्रम में लागू करें। सेल में मान टेक्स्ट-संरेखित संपत्ति के मूल्य से मेल खाता है

हमारे उदाहरण का परिणाम:

क्षैतिज संरेखण के अलावा, आप ऊर्ध्वाधर-संरेखित संपत्ति का उपयोग करके तालिका कोशिकाओं में ऊर्ध्वाधर संरेखण को भी परिभाषित कर सकते हैं।

कृपया ध्यान दें कि तालिका कोशिकाओं के साथ काम करते समय, इस संपत्ति के केवल निम्न मूल्यों का उपयोग किया जाता है:

* - टेबल सेल पर लागू किए गए मान, उप, सुपर, टेक्स्ट-टॉप, टेक्स्ट-बॉटम, लंबाई और% मानों को आधारभूत मान का उपयोग करते हुए व्यवहार करेंगे।

आइए उपयोग का एक उदाहरण देखें:

एक तालिका में ऊर्ध्वाधर संरेखण का उदाहरण

मूल्य	विवरण
आधारभूत	सेल की आधार रेखा को अभिभावक की आधार रेखा में संरेखित करता है। यह डिफ़ॉल्ट है।
ऊपर	सेल की सामग्री को शीर्ष पर लंबवत रूप से संरेखित करता है।
मध्य	सेल की सामग्री को बीच में लंबवत रूप से संरेखित करता है।
तल	सेल की सामग्री को नीचे तक लंबवत रूप से संरेखित करता है।

इस उदाहरण में, हमने बनाया है चार वर्गोंकोशिकाओं में विभिन्न ऊर्ध्वाधर संरेखण सेट करें और उन्हें तालिका पंक्तियों के क्रम में लागू करें। सेल में मूल्य उस पंक्ति में लागू किए गए ऊर्ध्वाधर-संरेखित संपत्ति के मूल्य से मेल खाता है।

ब्राउज़र द्वारा टेबल लेआउट रखने के लिए एल्गोरिदम

सीएसएस डिफ़ॉल्ट रूप से ब्राउज़र के स्वचालित टेबल लेआउट एल्गोरिथ्म का उपयोग करता है। इस मामले में स्तंभ की चौड़ाई को व्यापक गैर-ब्रेकिंग सेल सामग्री द्वारा सेट किया गया है... यह एल्गोरिथ्म कुछ मामलों में धीमा हो सकता है, क्योंकि ब्राउज़र को अपने अंतिम लेआउट को निर्धारित करने से पहले तालिका की सभी सामग्री को पढ़ना चाहिए।

ब्राउज़र द्वारा तालिका लेआउट के प्लेसमेंट प्रकार को बदलने के लिए स्वचालित पर तय, आपको निश्चित मूल्य के साथ टेबल-लेआउट सीएसएस संपत्ति का उपयोग करना चाहिए।

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

आइए इस संपत्ति के आवेदन को निम्नलिखित उदाहरण से देखें:

टेबल-लेआउट संपत्ति का उपयोग करने का एक उदाहरण

टेबल-लेआउट: ऑटो;
नाम	2009	2010	2011	2012	2013	2014	2015	2016
गेहूँ	125	215	2540	33287	695878	1222222	125840000	125

टेबल-लेआउट: तय;
नाम	2009	2010	2011	2012	2013	2014	2015	2016
गेहूँ	125	215	2540	33287	695878	1222222	125840000	125

इस उदाहरण में, हम:

स्टाइलिंग टेबल की पंक्तियाँ और कॉलम

हमने लेख "" में तालिका की पंक्तियों और स्तंभों को स्टाइल करने के तरीकों पर पहले से ही आंशिक रूप से छुआ है। इस लेख में, हमने एक समूह छद्म वर्ग का उपयोग करते हुए देखा जो आपको मूल्यों का उपयोग करके तालिकाओं में पंक्ति शैलियों को वैकल्पिक करने की अनुमति देता है यहाँ तक की (यहाँ तक की) तथा अजीब (अजीब), या प्राथमिक द्वारा गणितीय सूत्र.

आइए पिछली तकनीकों पर दोबारा गौर करें और तालिकाओं में पंक्तियों और स्तंभों को स्टाइल करने के नए तरीकों के बारे में जानें। उदाहरण के लिए आगे बढ़ते हैं।

का उपयोग करने का एक उदाहरण: तालिकाओं के साथ nth-child छद्म वर्ग

1	2	3	4	5	6	7	8	9	10	11	12	13	14
2
3
4

इस उदाहरण में, हम:

हमारे उदाहरण का परिणाम:

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

तालिकाओं में पंक्तियों की शैली का एक उदाहरण

सर्विस	कीमत
रकम	15 000
1	1 000
2	2 000
3	3 000
4	4 000
5	5 000

इस उदाहरण में, हम:

हम तालिका की चौड़ाई को मूल तत्व की चौड़ाई के 100% पर सेट करते हैं, और हेडर और डेटा कोशिकाओं के लिए 1px ठोस सीमा निर्धारित करते हैं।
मद के लिए स्थापित

1	2	3	4	5

इस उदाहरण में, हम:

पैडिंग्स के साथ तालिका को केंद्र में रखें, हेडर कोशिकाओं की चौड़ाई और ऊंचाई 50px तक निर्दिष्ट करें पारदर्शक बॉर्डर 5 पिक्सेल।
पाया कि जब हेडर सेल के ऊपर मंडराना (छद्म-वर्ग: होवर), तो यह पृष्ठभूमि प्राप्त करता है नीला रंग की, संतरा पाठ का रंग, सीमा संतरा रंग 5 पिक्सेल और 100% की त्रिज्या।
पारदर्शी सीमा सीमा के लिए स्थान आरक्षित करने के लिए आवश्यक है, जो होवर पर प्रदर्शित किया जाएगा, यदि ऐसा नहीं किया जाता है, तो तालिका "कूद" जाएगी।

हमारे उदाहरण का परिणाम:

निम्न उदाहरण HTML तत्वों के उपयोग पर स्पर्श करता है तथा और उनकी स्टाइल

तालिका स्तंभों को हाइलाइट करने का उदाहरण

आवेदन संख्या	सर्विस	कीमत, रगड़।	संपूर्ण
1	गायन	6 000	6 000
2	भोजनोपरांत बर्तन आदि की सफ़ाई	2 000	2 000
3	सफाई	1 000	1 000
4	छिद्रान्वेषी	1 500	1 500
5	पढ़ना	3 000	3 000

इस उदाहरण में, हम:

हमारे उदाहरण का परिणाम:

खैर, और अंतिम उदाहरण, जिसे समझना बहुत मुश्किल है और सीएसएस में उन्नत ज्ञान की आवश्यकता है, क्योंकि यह इस पाठ्यक्रम के ढांचे के भीतर विस्तृत अध्ययन के लिए नियोजित भविष्य के विषयों पर छूता है।

पिछले उदाहरण में, हमने महसूस किया कि HTML तत्व आप केवल एक सीएसएस संपत्ति, पृष्ठभूमि-रंग लागू कर सकते हैं, लेकिन आप सीधे इस तत्व पर होवर (: होवर छद्म वर्ग) पर पृष्ठभूमि रंग सेट नहीं कर सकते। इस उदाहरण में, हम देखेंगे कि केवल CSS का उपयोग करके टेबल कॉलम को कैसे हाइलाइट किया जाए।

हॉवर पर टेबल कॉलम और पंक्तियों को हाइलाइट करने का एक उदाहरण

आवेदन संख्या	सर्विस	कीमत, रगड़।	संपूर्ण
1	गायन	6 000	6 000
2	भोजनोपरांत बर्तन आदि की सफ़ाई	2 000	2 000
3	सफाई	1 000	1 000
4	छिद्रान्वेषी	1 500	1 500
5	पढ़ना	3 000	3 000

इस उदाहरण में, हम:

हम अपनी तालिका को 100% मूल तत्व पर रखने के लिए सेट करते हैं, तालिका कोशिकाएं मूल तत्व के 25% भाग पर कब्जा करती हैं और एक ठोस 1 पिक्सेल हरी सीमा होती है, और शीर्षलेख और डेटा कक्ष 45px उच्च होते हैं। हमने मूल्य के साथ सीमा-पतन संपत्ति का उपयोग करते हुए कोशिकाओं के बीच की खाई को हटा दिया .
और इसलिए, छद्म तत्व के बाद :: का उपयोग करते हुए, प्रत्येक तत्व के बाद सामग्री जोड़ें हॉवर पर। छद्म तत्व के बाद :: आवश्यक रूप से सामग्री संपत्ति के साथ संयोजन में उपयोग किया जाता है, धन्यवाद जिसके लिए हम एक पृष्ठभूमि रंग में एक ब्लॉक तत्व सम्मिलित करते हैं हरे वन और है पूर्ण स्थिति.
यहां पूर्ण स्थिति अपने पूर्वज के निर्दिष्ट किनारे के सापेक्ष तत्व को ऑफसेट करने के लिए आवश्यक है, जबकि पूर्वज के पास डिफ़ॉल्ट स्थैतिक के अलावा एक स्थिति मूल्य होना चाहिए, अन्यथा गणना ब्राउज़र विंडो के निर्दिष्ट किनारे के सापेक्ष होगी, इस कारण से तालिका के लिए सेट करें। सापेक्ष स्थिति (रिश्तेदार)।
हम अपने उत्पन्न ब्लॉक के लिए शीर्ष संपत्ति सेट करते हैं, जो शीर्ष किनारे से पोस्ट किए गए तत्व के ऑफसेट की दिशा को इंगित करता है, और नीचे की संपत्ति, जो नीचे के किनारे से पोस्ट किए गए तत्व के ऑफसेट की दिशा को इंगित करता है। दोनों गुणों के लिए, मान 0 निर्दिष्ट किया गया था, इसलिए ब्लॉक पूरी तरह से तालिका के नीचे और ऊपर से तत्व पर कब्जा कर लेगा, इस ब्लॉक की चौड़ाई 25% पर सेट की गई थी, यह मान सेल की चौड़ाई से मेल खाती है।
और अंतिम संपत्ति जो हम इस ब्लॉक के लिए निर्धारित करते हैं: z-index "-1" के मान से यह निर्धारित तत्वों के क्रम को निर्धारित करता है z अक्ष... यह संपत्ति आवश्यक है ताकि पाठ इस ब्लॉक के सामने हो, और इसके पीछे नहीं, यदि आप शून्य से कम मूल्य निर्धारित नहीं करते हैं, तो ब्लॉक पाठ को बंद कर देगा।

हमारे उदाहरण का परिणाम:

यदि अध्ययन के इस चरण में आप स्थिति तत्वों की प्रक्रिया को नहीं समझते हैं, तो निराश न हों, यह समझने के लिए एक कठिन विषय है, जिसे हमने भी नहीं माना, लेकिन ट्यूटोरियल के अगले लेख "सीएसएस में तत्वों की स्थिति" पर विचार करना सुनिश्चित करें

विषय पर प्रश्न और कार्य

अगले विषय पर जाने से पहले अभ्यास गतिविधि को पूरा करें:

यदि आपको अभ्यास पूरा करने में कोई कठिनाई है, तो आप हमेशा एक अलग विंडो में उदाहरण खोल सकते हैं और सीएसएस का उपयोग करने के लिए पृष्ठ का निरीक्षण कर सकते हैं।

2016-2020 डेनिस बोलशकोव, आप साइट के काम पर अपनी टिप्पणियाँ और सुझाव वेबसाइट@gmail.com पर भेज सकते हैं

हमने आपके साथ HTML तालिकाओं के बारे में पहले ही पता लगा लिया है ढांचाहालांकि ब्राउज़र उन्हें डिफ़ॉल्ट रूप से नहीं दिखाते हैं। लेकिन यह सब नहीं है, प्रत्येक टेबल सेल में एक बॉर्डर भी है सेल बॉर्डर... लेकिन विशेष टैग विशेषताओं का उपयोग करते हुए यह सब नहीं है

आप कोशिकाओं के बीच और कोशिकाओं से टेबल बॉर्डर तक के अंतर को बदल सकते हैं, साथ ही कोशिकाओं की सीमाओं से उनकी सामग्री तक पैडिंग भी कर सकते हैं।

HTML टेबल फ्रेम, सेल बॉर्डर, स्पेसिंग और पेडिंग।

के लिए फ्रेम निर्माण HTML तालिकाओं और इसकी कोशिकाओं की सीमाएं केवल एक टैग विशेषता का उपयोग किया जाता है

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

...

बदलाव के लिए कोशिकाओं के बीच की दूरी (उनकी सीमाएँ) और कोशिकाओं से फ्रेम तक टेबल्स टैग में

सेलस्पेसिंग विशेषता को लागू किया जाता है। इसके मान भी केवल संख्याएँ हो सकते हैं जो पिक्सेल में दूरी को मापते हैं।

...

आंतरिक सेट करने के लिए सेल बॉर्डर से उनकी सामग्री तक पैडिंग टैग में जरूरत है

सेलपैडिंग विशेषता का उपयोग करें। और इसके मूल्य पिक्सेल आयामों का प्रतिनिधित्व करने वाली संख्याएं हैं।

...

ध्यान दें कि ब्राउज़र डिफ़ॉल्ट रूप से सेलस्पेसिंग और सेलपैडिंग के लिए छोटे (दो पिक्सेल) मान सेट करते हैं, इसलिए रिक्ति को पूरी तरह से हटाने के लिए, विशेषताओं को शून्य (0) पर सेट करें।

HTML तालिकाओं की सीमाओं, सीमाओं और पैडिंग का उदाहरण

सीमाओं, सीमाओं और तालिकाओं की गद्दी

सेल 1.1	सेल 1.2	सेल 1.3
सेल 2.1	सेल 2.2	सेल 2.3
सेल 3.1	सेल 3.2	सेल 3.3

केवल सीमा और सेल सीमाओं के साथ तालिका सेट करें:

सेल 1.1	सेल 1.2	सेल 1.3
सेल 2.1	सेल 2.2	सेल 2.3
सेल 3.1	सेल 3.2	सेल 3.3

ब्राउज़र में परिणाम

परिवर्तित संकेत और दूरी के साथ तालिका:

स्वाभाविक रूप से, कोशिकाओं में पैडिंग और अंतर को बदलने के लिए तालिका में कोशिकाओं के फ्रेम और सीमाओं को खींचना आवश्यक नहीं है।

HTML सिंटैक्स के अनुसार, ब्राउज़र टेबल और उसके सेल के आयामों में सेलस्पेसिंग और सेलपैडिंग वैल्यूज जोड़ते हैं। उदाहरण के लिए, यदि आप सेल की चौड़ाई 100 पिक्सेल और सेलपैडिंग \u003d "10" पर सेट करते हैं - ब्राउज़र चौड़ाई में 20 पिक्सेल (बाईं और दाईं ओर प्रत्येक 10) जोड़ते हैं और यह 120 पिक्सेल बन जाता है। सामान्य तौर पर, आप इसका पता लगा लेंगे।

विषय से विचलन या पृष्ठ के किनारों पर पैडिंग को कैसे हटाया जाए

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

एक समय में टैग चार विशेषताएं थीं जो पृष्ठ के प्रत्येक पक्ष के लिए इन हाशिये का आकार निर्धारित करती थीं: टॉपमारगिन (शीर्ष), राइटमारगिन (दाएं), बॉटलमर्जिन (निचला), और वाममार्जिन (बाएं)। इन विशेषताओं को अब हटा दिया गया है, इसलिए हम शैलियों (सीएसएस) को लागू करेंगे। तो, पृष्ठ के किनारों पर पैडिंग के अंतर को बदलने के कई तरीके हैं, मैं आपको दो दिखाऊंगा, और यदि आप सीएसएस सीखने का निर्णय लेते हैं तो आप तीसरे के बारे में जानेंगे।

विधि एक। B टैग निम्नलिखित मानों के साथ शैली विशेषता निर्दिष्ट करें:

शैली \u003d "मार्जिन: 0"\u003e ... - एक ही बार में HTML पृष्ठ के सभी पक्षों से संकेत निकालता है।

शैली \u003d "मार्जिन: टॉप राइट बॉटम">... - प्रत्येक पक्ष के लिए घड़ी के आकार को समायोजित करता है। आमतौर पर, पिक्सेल आयामों का उपयोग किया जाता है, उदाहरण के लिए: शैली \u003d "मार्जिन: 5 पीएक्स 3 पीएक्स 4 पीएक्स 5 पीएक्स"\u003e ...

दूसरा और अधिक सुविधाजनक तरीका। टैग में

घर का पाठ।

इस पाठ में, मैं सब कुछ विस्तार से वर्णन नहीं करूंगा - केवल सामान्य बिंदु। पूर्णता के लिए, उदाहरण का परिणाम देखें।

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

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

तालिका कोशिकाओं की चौड़ाई उनकी सामग्री की चौड़ाई से निर्धारित होती है, इसलिए तालिका स्तंभों की चौड़ाई भिन्न हो सकती है। एक पंक्ति में सभी कोशिकाओं की ऊँचाई समान होती है और सबसे ऊँची कोशिका की ऊँचाई से निर्धारित होती है।

स्वरूपण सारणी

1. टेबल बॉर्डर बॉर्डर

डिफ़ॉल्ट रूप से दृश्यमान सीमाओं के बिना ब्राउज़र में तालिका और उसके अंदर की कोशिकाएँ प्रदर्शित होती हैं। टेबल बॉर्डर सीमा संपत्ति द्वारा निर्धारित:

टेबल (बॉर्डर-पतन: पतन; / * कोशिकाओं के बीच खाली स्थान को हटा दें * / बॉर्डर: 1 पीएक्स सॉलिड ग्रे; / * टेबल के लिए 1 पीएक्स बाहरी बॉर्डर सेट करें * /)

हैडर सेल बॉर्डर प्रत्येक तत्व वें तत्व के लिए निर्धारित हैं:

गु (सीमा: 1px ठोस ग्रे;)

सेल बॉर्डर टेबल बॉडी को td तत्व के लिए सेट किया गया है:

टीडी (सीमा: 1 पीएक्स सॉलिड ग्रे;)

आसन्न कोशिकाओं की सीमाओं की चौड़ाई दोगुनी नहीं है, इसलिए आप निम्न तालिका में पूरी तालिका के लिए सीमा निर्धारित कर सकते हैं:

गु, td (बॉर्डर: 1 पीएक्स सॉलिड ग्रे;)

तालिका की बाहरी सीमा को एक बढ़ी हुई चौड़ाई देकर चुना जा सकता है:

तालिका (सीमा: 3 पीएक्स सॉलिड ग्रे;)

सीमाओं को आंशिक रूप से सेट किया जा सकता है:

/ * तालिका के लिए 3px ग्रे बाहरी बॉर्डर सेट करें * / table (बॉर्डर-टॉप: 3px सॉलिड ग्रे;) / * टेबल बॉडी सेल के लिए 1px ग्रे बॉर्डर सेट करें * / td (बॉर्डर-बॉटम: 1px सॉलिड ग्रे;)

आप सीमा संपत्ति के बारे में अधिक पढ़ सकते हैं।

2. तालिका की चौड़ाई और ऊंचाई कैसे निर्धारित करें

चूक तालिका की चौड़ाई और ऊंचाई इसकी कोशिकाओं की सामग्री से निर्धारित होता है। यदि कोई चौड़ाई निर्दिष्ट नहीं है, तो यह चौड़ी पंक्ति (पंक्ति) की चौड़ाई के बराबर होगी।

तालिका और स्तंभ चौड़ाई चौड़ाई संपत्ति का उपयोग कर सेट करें। यदि तालिका (चौड़ाई: 100%;) एक तालिका के लिए निर्दिष्ट की जाती है, तो तालिका की चौड़ाई कंटेनर ब्लॉक की चौड़ाई के बराबर होगी जिसमें यह स्थित है।

तालिका और स्तंभों की चौड़ाई आमतौर पर px या% में निर्दिष्ट की जाती है, उदाहरण के लिए:

तालिका (चौड़ाई: 600px;) वें (चौड़ाई: 20%;) td: पहला-बच्चा (चौड़ाई: 30%);

टेबल की ऊंचाई सेट नहीं। पंक्तियों की ऊँचाई तत्वों में शीर्ष और नीचे पैडिंग जोड़कर तालिकाओं में हेरफेर किया जा सकता है तथा ... ऊंचाई संपत्ति का उपयोग करके ऊंचाई तय करना अनुशंसित नहीं है।

गु, td (गद्दी: 10px 15px;)

3. तालिका की पृष्ठभूमि कैसे सेट करें

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

4. टेबल कॉलम

सीएसएस टेबल मॉडल मुख्य रूप से एक टैग का उपयोग करके गठित स्ट्रिंग्स (पंक्तियों) पर केंद्रित है

... व्यवहार में, ऐसे समय होते हैं जब आपको विशेष कॉलम स्वरूपण की आवश्यकता होती है, जो निम्नलिखित तरीकों से संभव है:

टैग का उपयोग करना

आप किसी भी संख्या में कॉलम के लिए पृष्ठभूमि सेट कर सकते हैं;

तालिका td का उपयोग करना: पहला-बच्चा, तालिका td: अंतिम-बच्चा चयनकर्ता, आप तालिका के पहले या अंतिम स्तंभ को स्टाइल कर सकते हैं (टेबल हेडर के पहले सेल को छोड़कर);

तालिका चयनकर्ता td: nth-child (कॉलम चयन नियम) का उपयोग करके, आप तालिका में किसी भी कॉलम को स्टाइल कर सकते हैं।

आप CSS चयनकर्ताओं के बारे में अधिक पढ़ सकते हैं।

5. टेबल शीर्षक कैसे जोड़ें

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

...

तालिका संख्या 1
कंपनी	Q1	Q2	Q3	Q4

कैप्शन (कैप्शन-साइड: नीचे; पाठ-संरेखित: सही; गद्दी: 10px 0; फ़ॉन्ट-आकार: 14px);

चित्र: 2. तालिका के अंतर्गत हेडर प्रदर्शित करने का एक उदाहरण

6. सेल फ्रेम के बीच के अंतर को कैसे दूर करें

डिफ़ॉल्ट रूप से, टेबल कोशिकाओं की सीमाओं को एक छोटी सी जगह से अलग किया जाता है। यदि हम सीमा-पतन निर्धारित करते हैं: तालिका के लिए पतन, तो अंतर को हटा दिया जाएगा। संपत्ति विरासत में मिली है।

वाक्य - विन्यास

तालिका (सीमा-पतन: पतन;)
चित्र: 3. विलय और विभाजित सेल सीमाओं के साथ तालिकाओं का एक उदाहरण

7. सेल फ्रेम के बीच रिक्ति कैसे बढ़ाएं

बॉर्डर-स्पेसिंग प्रॉपर्टी का उपयोग करके, आप सेल बॉर्डर के बीच की दूरी को बदल सकते हैं। यह संपत्ति संपूर्ण रूप से तालिका पर लागू होती है। विरासत में मिला।

वाक्य - विन्यास

टेबल (बॉर्डर-पतन: अलग; बॉर्डर-स्पेसिंग: 10px 20px;) टेबल (बॉर्डर-पतन: अलग, बॉर्डर-स्पेस: 10px;)
चित्र: 4. सेल फ्रेम के बीच वृद्धि हुई अंतराल के साथ तालिकाओं का एक उदाहरण

8. खाली टेबल सेल्स को कैसे छिपाएं

खाली कोशिकाओं की संपत्ति छिपती है या खाली कोशिकाओं को दिखाती है। केवल उन कोशिकाओं को प्रभावित करता है जिनमें कोई सामग्री नहीं होती है। यदि एक सेल के लिए एक पृष्ठभूमि निर्दिष्ट की जाती है, और तालिका के लिए तालिका (बॉर्डर-पतन: पतन;) निर्दिष्ट की जाती है, तो सेल छिपा नहीं होगा। विरासत में मिला।

कंपनी	Q1	Q2	Q3
माइक्रोसॉफ्ट	20.3	30.5
गूगल	50.2	40.63	45.23

तालिका (सीमा: 1px ठोस # 69c; सीमा-ढहना: अलग; रिक्त-कोशिकाएँ: छिपाना;) वें, td (सीमा: 2px ठोस # 69c;)

चित्र: 5. एक खाली टेबल सेल को छिपाने का एक उदाहरण

9. टेबल-लेआउट संपत्ति का उपयोग करके लेआउट तालिका लेआउट

टेबल लेआउट का लेआउट दो दृष्टिकोणों में से एक द्वारा निर्धारित किया जाता है: फिक्स्ड लेआउट या स्वचालित लेआउट। इस मामले में लेआउट का मतलब है कि कक्षों की चौड़ाई के बीच तालिका की चौड़ाई कैसे वितरित की जाती है। संपत्ति विरासत में नहीं मिली है।

वाक्य - विन्यास

तालिका (तालिका-लेआउट: निश्चित;)

10. बेस्ट टेबल लेआउट

1. क्षैतिज न्यूनतावाद

क्षैतिज तालिकाओं में तालिकाएँ होती हैं जिनमें पाठ क्षैतिज रूप से पढ़ा जाता है। प्रत्येक इकाई एक अलग लाइन है। आप इस तरह की मेज के नीचे दो-पिक्सेल बॉर्डर रखकर न्यूनतम शैली में टेबल को स्टाइल कर सकते हैं।

कर्मचारी	वेतन	बक्शीश	पर्यवेक्षक
स्टीफन सी। कॉक्स	$300	$50	बॉब
जोसेफिन टैन	$150	-	एनी
जायसी मिंग	$200	$35	एंडी
जेम्स ए। पेंटेल	$175	$25	एनी

तालिका (फ़ॉन्ट-परिवार: "ल्यूसिडा सैंस यूनिकोड", "ल्यूसिडा ग्रांडे", संस-सेर्स्टन; फ़ॉन्ट-आकार: 14px; पृष्ठभूमि: श्वेत; अधिकतम-चौड़ाई: 70%; चौड़ाई: 70%; सीमा-पतन: पतन; पाठ -लाइन: बाएं;) वें (फ़ॉन्ट-वजन: सामान्य; रंग: # 039; सीमा-नीचे: 2px ठोस # 6678b1; गद्दी: 10px 8px;) td (रंग: # 669; गद्दी: 9px 8px; संक्रमण: .3s रैखिक;) tr: होवर td (रंग: # 6699ff;)

बड़ी संख्या में पंक्तियों के साथ, तालिकाओं का यह डिज़ाइन उन्हें पढ़ना मुश्किल बनाता है। इस समस्या को हल करने के लिए, आप सभी td तत्वों के अंतर्गत एक पिक्सेल बॉर्डर जोड़ सकते हैं।

Td (बॉर्डर-बॉटम: 1px सॉलिड #ccc; कलर: # 669; पेडिंग: 9px 8GHz; ट्रांज़िशन: .3s रैखिक;) / * बाकी कोड इस प्रकार है जैसे ऊपर दिए गए उदाहरण में / /

ट्र तत्व में एक: हॉवर इफ़ेक्ट जोड़ना उन तालिकाओं को बनाता है जो पढ़ने में आसान होती हैं। जब आप माउस कर्सर को एक सेल पर घुमाते हैं, तो एक ही पंक्ति के शेष सेल उसी समय हाइलाइट किए जाते हैं, जिससे तालिकाओं के कई कॉलम होने पर जानकारी ट्रैक करना आसान हो जाता है।

Th (फ़ॉन्ट-वजन: सामान्य; रंग: # 039; गद्दी: 10px 15px;) td (रंग # # 669; सीमा-शीर्ष: 1px ठोस # e8edff; गद्दी: 10px 15px;) tr: hover td (पृष्ठभूमि: # e8edff) ;)

2. ऊर्ध्वाधर न्यूनतावाद

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

Th (फॉन्ट-वेट: सामान्य; बॉर्डर-बॉटम: 2px सॉलिड # 6678b1; बॉर्डर-राईट: 30px # #ff; बॉर्डर-लेफ्ट: 30px सॉलिड #fff; कलर: # 039; गद्दी: 8px 2px;) td (बॉर्डर) दाईं ओर: 30px ठोस #fff; सीमा-वाम: 30px ठोस #fff; रंग: # 669; गद्दी: 12px 2px;)

3. "बॉक्स" शैली

सभी प्रकार की सजाने वाली तालिकाओं के लिए सबसे विश्वसनीय शैली तथाकथित "बॉक्स" शैली है। यह एक अच्छी रंग योजना चुनने के लिए पर्याप्त है और फिर सभी कोशिकाओं के लिए पृष्ठभूमि का रंग निर्धारित करें। याद रखें कि सीमाओं को विभाजक के रूप में स्थापित करके लाइनों के बीच अंतर पर जोर दें।

Th (फॉन्ट-साइज: 13px; फॉन्ट-वेट: normal; बैकग्राउंड: # b9c9fe; बॉर्डर-टॉप: 4px सॉलिड #aabcfe; बॉर्डर-बॉटम: 1px सॉलिड #fff; color: # 039; padding: 8px; td) (बैकग्राउंड) : # e8edff; बॉर्डर-बॉटम: 1px सॉलिड #fff; कलर: # 669; बॉर्डर-टॉप: .px सॉलिड ट्रांसपेरेंट; पैडिंग: 8 पीएक्स;) ट्र: हॉवर टीडी (बैकग्राउंड: # सक्सेसफुल);

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

तालिका (फ़ॉन्ट-परिवार: "ल्यूसिडा सैंस यूनिकोड", "ल्यूसिडा ग्रांडे", संस-सेर्स्टन; फ़ॉन्ट-आकार: 14px; अधिकतम-चौड़ाई: 70%; चौड़ाई: 70%; पाठ-संरेखित: केंद्र; सीमा-ढहना) ; बॉर्डर-टॉप: 7px सॉलिड # 9baff1; बॉर्डर-बॉटम: 7px सॉलिड # 9baff1;) वें (फॉन्ट-साइज: 13px; फॉन्ट-वेट: नॉर्मल; बैकग्राउंड: # e8edff; बॉर्डर-राइट: 1 सॉलिड # 9baff1; बॉर्डर; बायाँ: 1px ठोस # 9baff1; रंग: # 039; गद्दी: 8px;) td (पृष्ठभूमि: # e8edff; बॉर्डर-दायाँ: 1px ठोस #aabcfe; बॉर्डर-बायाँ: 1px ठोस # आकार: रंग: # 669; गद्दी: 8px; ;)

4. क्षैतिज ज़ेबरा

ज़ेबरा टेबल बहुत आकर्षक और आसान लग रहा है। पूरक पृष्ठभूमि का रंग तालिका को पढ़ने के लिए लोगों के लिए दृश्य क्यू के रूप में काम कर सकता है।

Th (फ़ॉन्ट-वजन: सामान्य; रंग; # 039; गद्दी: 10px 15px;) td (रंग # # 669; सीमा-शीर्ष: 1px ठोस # e8edff; गद्दी: 10px 15px;) tr: nth-child (2n) ( पृष्ठभूमि: # e8edff;)

5. समाचार पत्र शैली

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

तालिका (सीमा: 1px ठोस # 69c;) वें (फ़ॉन्ट-वजन: सामान्य; रंग: # 039; सीमा-नीचे: 1px धराशायी # 69c; गद्दी: 12px 17px;) td (रंग: # 669; गद्दी: 7px 17px; ) tr: hover td (पृष्ठभूमि: #ccddff;)

तालिका (सीमा: 1px ठोस # 69c;) वें (फ़ॉन्ट-वजन: सामान्य; रंग: # 039; पैड: 10px;) td (रंग: # 669; सीमा-शीर्ष: 1px धराशायी #fff; गद्दी: 10px; पृष्ठभूमि: #ccddff;) tr: होवर td (पृष्ठभूमि: # 99bcff;)

तालिका (सीमा: 1px ठोस # 6cf;) वें (फ़ॉन्ट-वजन: सामान्य; फ़ॉन्ट-आकार: 13px; रंग: # 039; पाठ-परिवर्तन: अपरकेस; सीमा-दाएं: 1px ठोस # 0865c2; सीमा-शीर्ष: 1px ठोस # 0865c2; बॉर्डर-लेफ्ट: 1px सॉलिड # 0865c2; बॉर्डर-बॉटम: 1px सॉलिड #fff; गद्दी: 20px;) td (रंग: # 669; बॉर्डर-राईट: 1px धराशायी # 6Xf; पैडिंग: 10px 20px;)

6. टेबल बैकग्राउंड

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

Png ") 98% 86% no-repeat;) th (फॉन्ट-वेट: नॉर्मल; फॉन्ट-साइज: 14px; color: # 339; padding: 10px 12px; background: white;) td (रंग: # 669; बॉर्डर) शीर्ष: 1 पीएक्स सॉलिड व्हाइट; पैडिंग: 10 पीएक्स 12 पीएक्स; पृष्ठभूमि: आरजीबीए (51, 51, 153, .2); संक्रमण: .3s; ट्र): होवर टीडी (पृष्ठभूमि: आरजीबीए (51, 51, 153, 1))। )

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

सेल पृष्ठभूमि का रंग

एक ही समय में सभी तालिका कक्षों की पृष्ठभूमि का रंग पृष्ठभूमि संपत्ति के माध्यम से सेट किया जाता है, जिसे टेबल चयनकर्ता पर लागू किया जाता है। ऐसा करने में, आपको शैलियों के उपयोग के नियमों को याद रखना चाहिए, विशेष रूप से, तत्वों के गुणों का उत्तराधिकार। यद्यपि पृष्ठभूमि संपत्ति विरासत में नहीं मिली है, कोशिकाओं के लिए डिफ़ॉल्ट पृष्ठभूमि मूल्य पारदर्शी है, अर्थात्। पारदर्शिता, इसलिए पृष्ठभूमि भरण प्रभाव कोशिकाओं के लिए भी प्राप्त किया जाता है। यदि एक साथ TABLE के साथ आप चयनकर्ता TD या TH के लिए रंग सेट करते हैं, तो यह रंग सेल की पृष्ठभूमि के रूप में सेट किया जाएगा (उदाहरण 2.3)।

उदाहरण 2.3। पीछे का रंग

टेबल्स

शीर्षक 1	शीर्षक २
सेल 3	सेल 4

इस उदाहरण में, हम कोशिकाओं (टैग) के लिए एक नीले रंग की पृष्ठभूमि का रंग प्राप्त करेंगे ) और शीर्षक पर लाल (टैग) )। ऐसा इसलिए है क्योंकि TH चयनकर्ता के लिए शैली परिभाषित नहीं है, इसलिए माता-पिता की पृष्ठभूमि, इस मामले में, TABLE चयनकर्ता, "के माध्यम से स्किम्ड" है। और चयनकर्ता टीडी के लिए रंग स्पष्ट रूप से निर्दिष्ट किया गया है, इसलिए कोशिकाएं नीले रंग से भरी हुई हैं।

इस उदाहरण का परिणाम अंजीर में दिखाया गया है। 2.4।

चित्र: 2.4। पृष्ठभूमि का रंग बदलें

कोशिकाओं के भीतर मार्जिन

मार्जिन सेल कंटेंट के किनारे और उसकी सीमा के बीच की दूरी है। आमतौर पर इस उद्देश्य के लिए टैग की सेलपैडिंग विशेषता का उपयोग किया जाता है।

... यह सेल के सभी किनारों पर पिक्सेल में मार्जिन मान को परिभाषित करता है। इसे टीडी चयनकर्ता में जोड़कर पैडिंग शैली की संपत्ति का उपयोग करने की अनुमति है, जैसा कि उदाहरण 2.4 में दिखाया गया है।

उदाहरण २.४। तालिकाओं में फ़ील्ड

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

टेबल्स

शीर्षक 1	शीर्षक २
सेल 3	सेल 4

इस उदाहरण में, समूहीकरण चयनकर्ताओं का उपयोग करके, टीडी और टीएच चयनकर्ता के लिए फ़ील्ड एक साथ सेट किए गए हैं। उदाहरण परिणाम अंजीर में दिखाया गया है। 2.5।

चित्र: 2.5। कोशिकाओं में क्षेत्र

यदि पैडिंग स्टाइल प्रॉपर्टी को टेबल सेल्स पर लागू किया जाता है, तो टैग की सेलपैडिंग विशेषता

अवहेलना करना।

कोशिकाओं के बीच की दूरी

कोशिकाओं के बीच रिक्ति को बदलने के लिए, टैग के सेल स्पेसिंग विशेषता को लागू करें

... इस विशेषता का प्रभाव कोशिकाओं के आस-पास की सीमाओं का उपयोग करते समय या पृष्ठ की पृष्ठभूमि से निकलने वाले रंग के साथ कोशिकाओं को भरते समय स्पष्ट रूप से दिखाई देता है। बॉर्डर-स्पेसिंग स्टाइल प्रॉपर्टी सेलस्पेसिंग के प्रतिस्थापन के रूप में कार्य करती है, यह कोशिकाओं की सीमाओं के बीच की दूरी तय करती है। एक मान सेल की सीमाओं के बीच ऊर्ध्वाधर और क्षैतिज दोनों प्रकार का स्थान निर्धारित करता है। यदि इस संपत्ति के दो मूल्य हैं, तो पहला क्षैतिज दूरी (यानी सेल के बाएं और दाएं) को परिभाषित करता है, और दूसरा ऊर्ध्वाधर दूरी (ऊपर और नीचे) को परिभाषित करता है।

बॉर्डर-स्पेसिंग प्रॉपर्टी केवल तभी प्रभावी होती है जब बॉर्डर-पतन प्रॉपर्टी को टेबिल सिलेक्टर के लिए पतन मूल्य (उदाहरण 2.5) के साथ सेट नहीं किया जाता है।

उदाहरण 2.5। सेल बॉर्डर के बीच की दूरी

XHTML 1.0 CSS 2.1 IE 7 IE 8+ Cr Op Sa Fx

सेलस्पेसिंग की जगह

लियोनार्डो	5	8
राफेल	4	11
माइकल एंजेलो	24	9
Donatello	2	13

इस उदाहरण का परिणाम अंजीर में दिखाया गया है। 2.6।

चित्र: 2.6। बॉर्डर-रिक्ति का उपयोग करते समय तालिका दृश्य

संस्करण 7 में इंटरनेट एक्सप्लोरर शामिल है और सीमा-रिक्ति की संपत्ति का समर्थन नहीं करता है, इसलिए टेबल तालिकाओं के लिए डिफ़ॉल्ट सेलस्पेसिंग (आमतौर पर 2 पीएक्स) का उपयोग करेंगे।

जब आप TABLE चयनकर्ता के लिए एक संक्षिप्त मान के साथ बॉर्डर-पतन संपत्ति जोड़ते हैं, तो सेलस्पेसिंग विशेषता को अनदेखा कर दिया जाता है और बॉर्डर-स्पेसिंग मान को साफ़ कर दिया जाता है।

बॉर्डर और फ्रेम

डिफ़ॉल्ट रूप से, प्रारंभ में तालिका में कोई सीमा नहीं होती है, और इसे टैग की सीमा विशेषता का उपयोग करके जोड़ा जाता है

... ब्राउज़र इस तरह की सीमा को अलग-अलग तरीकों से प्रदर्शित करते हैं, इसलिए इस विशेषता को बिल्कुल भी निर्दिष्ट नहीं करना बेहतर है, और सीमाओं की ड्राइंग को शैलियों के लिए छोड़ दें। आइए दो तरीकों को देखें जो सीधे तौर पर शैलियों से संबंधित हैं।

सेलस्पेसिंग विशेषता का उपयोग करना

टैग की सेल स्पेसिंग विशेषता को जाना जाता है

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

ध्यान दें कि यह सीमाओं को बनाने के लिए बहुत सुविधाजनक तरीका नहीं है, क्योंकि इसमें एक सीमित गुंजाइश है। इस तरह, आप केवल एक-रंग ग्रिड प्राप्त कर सकते हैं, और सही स्थानों में ऊर्ध्वाधर या क्षैतिज रेखाएं नहीं।

सीमा संपत्ति को लागू करना

सीमा शैली की संपत्ति एक साथ तत्व के चारों ओर सीमा का रंग, शैली और मोटाई निर्धारित करती है। जब आपको विभिन्न पक्षों पर अलग-अलग लाइनें बनाने की आवश्यकता होती है, तो डेरिवेटिव - बॉर्डर-लेफ्ट, बॉर्डर-राइट, बॉर्डर-टॉप और बॉर्डर-बॉटम का उपयोग करना बेहतर होता है, ये प्रॉपर्टी क्रमशः बॉर्डर को लेफ्ट, राइट, टॉप और बॉटम पर परिभाषित करती हैं।

TABLE सेलेक्टर को बॉर्डर प्रॉपर्टी लगाने से, हम टेबल के चारों ओर एक बॉर्डर जोड़ते हैं, और TD या TH सेलेक्टर में, हम सेल्स (उदाहरण 2.6) के चारों ओर एक बॉर्डर जोड़ते हैं।

उदाहरण 2.6। एक डबल बॉर्डर जोड़ना

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

टेबल्स

शीर्षक 1	शीर्षक २
सेल 3	सेल 4

यह उदाहरण तालिका के चारों ओर एक डबल ब्लैक बॉर्डर और प्रत्येक सेल के चारों ओर एक ठोस सफेद बॉर्डर का उपयोग करता है। उदाहरण परिणाम अंजीर में दिखाया गया है। 2.7।

चित्र: 2.7। मेज और कोशिकाओं के आसपास की सीमा

कृपया ध्यान दें कि डबल लाइनें उस स्थान पर बनती हैं जहां कोशिकाएं जुड़ती हैं। टैग के सेलस्पेसिंग विशेषता की कार्रवाई के कारण उन्हें फिर से प्राप्त किया जाता है

... हालांकि यह विशेषता उदाहरण कोड में कहीं भी दिखाई नहीं देती है, लेकिन ब्राउज़र डिफ़ॉल्ट रूप से इसका उपयोग करता है। अगर आप पूछते हैं

, तब हमें दोहरी नहीं, बल्कि एकल लाइनें मिलती हैं, लेकिन दोगुनी मोटाई होती है। इस सुविधा को बदलने के लिए, बॉर्डर-पतन स्टाइल प्रॉपर्टी को पतन मूल्य के साथ उपयोग करें, जिसे टेबल चयनकर्ता (उदाहरण 2.7) में जोड़ा जाता है।

उदाहरण 2.7। सिंगल फ्रेम बनाना

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

टेबल्स

शीर्षक 1	शीर्षक २
सेल 3	सेल 4

यह उदाहरण कोशिकाओं के बीच एक ठोस हरी रेखा और तालिका के चारों ओर एक काली ठोस रेखा बनाता है। तालिका के भीतर सभी सीमाएँ समान मोटाई की हैं। उदाहरण परिणाम अंजीर में दिखाया गया है। 2.8।

चित्र: 2.8। मेज के चारों ओर की सीमा

कोशिकाओं की सामग्री को संरेखित करना

डिफ़ॉल्ट रूप से, तालिका सेल में पाठ बाएं-संरेखित होता है। इस नियम का अपवाद टैग है , यह एक शीर्षक को परिभाषित करता है जिसमें संरेखण केंद्रित है। संरेखण को बदलने के लिए, पाठ-संरेखित शैली गुण (उदाहरण 2.8) का उपयोग करें।

उदाहरण 2.8। क्षैतिज रूप से कोशिकाओं की सामग्री को संरेखित करना

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

टेबल्स

शीर्षक 1	सेल 1	सेल 2
शीर्षक २	सेल 3	सेल 4

इस उदाहरण में, टैग की सामग्री छोड़ा-संरेखित और टैग की सामग्री है - बीच में। उदाहरण का परिणाम नीचे दिखाया गया है (चित्र। 2.9)।

चित्र: 2.9। कक्षों में पाठ संरेखित करें

एक सेल में ऊर्ध्वाधर संरेखण हमेशा केंद्रित होता है, जब तक कि अन्यथा नोट न किया गया हो। यह हमेशा सुविधाजनक नहीं होता है, खासकर उन तालिकाओं के लिए जिनमें कोशिकाओं की सामग्री ऊंचाई में भिन्न होती है। इस मामले में, संरेखण ऊर्ध्वाधर-संरेखित संपत्ति का उपयोग करके सेल के शीर्ष किनारे पर सेट है, जैसा कि उदाहरण 2.9 में दिखाया गया है।

उदाहरण 2.9। कोशिकाओं की सामग्री को लंबवत रूप से संरेखित करना

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

टेबल्स

शीर्षक 1	शीर्षक २
सेल 1	सेल 2

यह उदाहरण शीर्ष लेख ऊंचाई सेट करता है 40 पिक्सेल के रूप में और पाठ नीचे की ओर संरेखित है। उदाहरण परिणाम अंजीर में दिखाया गया है। 2.10।

चित्र: 2.10। कक्षों में पाठ संरेखित करें

खाली सेल

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

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

सौभाग्य से, एकल-पिक्सेल ड्राइंग और उन पर आधारित सभी प्रकार के स्पेसर्स का युग बीत चुका है। सेल सामग्री की उपस्थिति के बिना ब्राउज़र तालिकाओं के साथ पर्याप्त रूप से काम करते हैं।

खाली कक्षों की संपत्ति का उपयोग खाली कोशिकाओं की उपस्थिति को नियंत्रित करने के लिए किया जाता है; जब छिपाने के लिए सेट किया जाता है, तो खाली कक्षों में सीमा और पृष्ठभूमि प्रदर्शित नहीं होती हैं। यदि एक पंक्ति में सभी कोशिकाएं खाली हैं, तो पूरी पंक्ति छिपी हुई है। एक सेल को निम्नलिखित मामलों में खाली माना जाता है:

कोई प्रतीक नहीं हैं;
सेल में केवल एक पंक्ति फ़ीड, टैब वर्ण या स्थान होता है;
दृश्यता छिपी हुई है।

गैर-ब्रेकिंग स्पेस को जोड़ना दृश्य सामग्री के रूप में माना जाता है, अर्थात सेल अब खाली नहीं होगा (उदाहरण 2.10)।

उदाहरण 2.10। खाली सेल

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

रिक्त-कक्षों का उपयोग करना

लियोनार्डो	5	8
राफेल		11
माइकल एंजेलो	24
Donatello		13

सफारी ब्राउज़र में तालिका दृश्य अंजीर में दिखाया गया है। 2.11a। IE7 में एक ही तालिका अंजीर में दिखाई गई है। 2.11b।

तथा। ब्राउज़र सफारी, फ़ायरफ़ॉक्स, ओपेरा, IE8, IE9 में

ख। IE7 ब्राउज़र में

चित्र: 2.11। रिक्त कक्षों के साथ तालिका दृश्य

श्रेणियाँ

लोकप्रिय