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

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

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

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

(तालिका का “पादलेख”) पृष्ठभूमि रंग – मूंगा, तत्व के लिए ("टेबल हेडर") पृष्ठभूमि का रंग सेट करें चाँदी.

तत्वों के लिए

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

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

चावल। 153 तालिकाओं में पंक्तियों को स्टाइल करने का उदाहरण

निम्नलिखित उदाहरण तालिका कक्षों (संपत्ति) पर कोने की गोलाई लागू करने पर विचार करता है।

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

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

कोशिकाओं के बीच का स्थान

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

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

बॉर्डर-स्पेसिंग: 30px 10px;

1	2	3
2
3

बॉर्डर-स्पेसिंग: 0;

1	2	3
2
3

बॉर्डर-स्पेसिंग:0.2em;

1	2	3
2
3

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

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

) - बोल्ड स्टाइल.

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

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

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

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

तालिका कक्षों के चारों ओर सीमाएँ दिखाएँ

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

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

ऐसा करने के लिए, आपको border-collapse CSS प्रॉपर्टी का उपयोग करना होगा। अजीब तरह से, पतन मूल्य के साथ बॉर्डर-पतन संपत्ति का उपयोग करना कोशिकाओं के बीच दोहरी सीमाओं के बिना उनके बीच की जगह को हटाने का सबसे अच्छा तरीका है।

आइए 0 के मान के साथ बॉर्डर-स्पेसिंग प्रॉपर्टी और पतन के मान के साथ बॉर्डर-पतन प्रॉपर्टी का उपयोग करते समय सीमाओं के व्यवहार की तुलना करें:

बॉर्डर-स्पेसिंग: 0;

1	2	3
2
3

सीमा-पतन: पतन;

1	2	3
2
3

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

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

) - बोल्ड स्टाइल.

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

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

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

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

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

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

रिक्त-कोशिकाएँ: दिखाएँ;

1	2	3
2		☺
3	☺

रिक्त-कोशिकाएँ: छिपाएँ;

1	2	3
2		☺
3	☺

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

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

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

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

तालिका के ऊपर शीर्षलेख

नाम	कीमत
मछली	350 रूबल
मांस	250 रूबल

तालिका के नीचे शीर्षक

नाम	कीमत
मछली	350 रूबल
मांस	250 रूबल

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

टेबल-लेआउट: ऑटो;

नाम	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

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

स्टाइलिंग तालिका पंक्तियाँ और स्तंभ

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

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

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 2 3 4 इस उदाहरण में हम: हमने बाहरी इंडेंट (मार्जिन: 0 ऑटो) के साथ क्षैतिज केंद्रीकरण की तकनीक का उपयोग करके तालिका को केंद्र में रखा। तालिका के नाम के लिए (टैग

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

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

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

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

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

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

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

2016-2019 डेनिस बोल्शकोव, आप साइट पर टिप्पणियाँ और सुझाव [email protected] पर भेज सकते हैं

व्लाद मर्ज़ेविच

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

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

लाइनों के बीच लाइनें सेट करना काफी सरल है; ऐसा करने के लिए, टीडी चयनकर्ता में बॉर्डर-बॉटम स्टाइल प्रॉपर्टी जोड़ें। यदि मेज के चारों ओर बॉर्डर है, तो नीचे का बॉर्डर दोगुना मोटाई का होगा। इस स्थिति में, आप अंतिम पंक्ति से निचली रेखा को हटा सकते हैं या तालिका से निचली सीमा को छिपा सकते हैं (उदाहरण 1)।

उदाहरण 1: तालिका पंक्तियों को रेखाओं से अलग करना

	2004	2005	2006
माणिक	43	51	79
पन्ने	28	34	48
नीलमणि	29	57	36

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

रंग के उपयोग से तालिका का स्वरूप बदलने की संभावनाएँ बढ़ जाती हैं। उदाहरण के लिए, सम और विषम पंक्तियों का पृष्ठभूमि रंग भिन्न हो सकता है, जैसा चित्र में दिखाया गया है। 2.

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

विषम पंक्तियों का पृष्ठभूमि रंग संपूर्ण तालिका का रंग बदलकर निर्धारित किया जाता है। लेकिन चूंकि चयनात्मक पंक्तियों के लिए एक व्यक्तिगत रंग सेट किया गया है (जिसके लिए class='even' पैरामीटर जोड़ा गया है), यह तालिका के पृष्ठभूमि रंग को "ओवरलैप" करता है। इससे बारी-बारी से रंगीन रेखाएं प्राप्त होती हैं।

उदाहरण 2. तालिका पंक्तियों को रंग से हाइलाइट करना

	2004	2005	2006
माणिक	43	51	79
पन्ने	28	34	48
नीलमणि	29	57	36
नीलम	23	64	97

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

यह लोकप्रिय हो गया, वेब डिज़ाइनरों ने मुख्य रूप से टेबल लेआउट पद्धति का उपयोग किया और बहुत अच्छे परिणाम प्राप्त किये।

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

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

एक साधारण तालिका के लिए उदाहरण कोड

तालिका नाम

स्टोबेट्स 1	स्टोबेट्स 2
प्रथम सेल में पाठ	दूसरे सेल में टेक्स्ट

ब्राउज़र प्रदर्शित करेगा

HTML में टेबल का उद्देश्य

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

HTML तालिकाओं के गुण और पैरामीटर: इंडेंटेशन, चौड़ाई, पृष्ठभूमि रंग, बॉर्डर (फ़्रेम)

यू टेबल टैगनिम्नलिखित विशेषताएं हैं:

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

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

परिणामस्वरूप, निम्न तालिका ब्राउज़र में प्रदर्शित होगी:

चौखटा- मेज के चारों ओर फ्रेम को इंगित करने वाली एक विशेषता। निम्नलिखित मान हैं:

शून्य - कोई फ़्रेम नहीं,
ऊपर - केवल शीर्ष फ्रेम,
नीचे - केवल निचला फ्रेम,
एचसाइड्स - केवल ऊपर और नीचे के फ्रेम,
vsides - केवल बाएँ और दाएँ फ़्रेम,
एलएचएस - केवल बायां फ्रेम,
आरएचएस - केवल दायां फ़्रेम,
बॉक्स - फ्रेम के सभी चार भाग।

नियम- तालिका के भीतर, कोशिकाओं के बीच की सीमाओं को दर्शाने वाली एक विशेषता। निम्नलिखित मान हैं:

कोई नहीं - कोशिकाओं के बीच कोई सीमा नहीं है,
समूह - केवल पंक्तियों के समूहों और स्तंभों के समूहों के बीच की सीमाएँ (थोड़ी देर बाद चर्चा की जाएगी),
पंक्तियाँ - केवल पंक्तियों के बीच की सीमाएँ,
cols - केवल स्तंभों के बीच की सीमाएँ,
सभी - सभी सीमाएँ प्रदर्शित करें।

आइए कोड उदाहरण देखें

स्टोबेट्स 1	स्टोबेट्स 2

परिणाम

आइए अब एक सुंदर तालिका बनाने का प्रयास करें। ऐसा करने के लिए, आइए उपयोग शुरू करें टेबल संरेखण. ऐसा करने के लिए, निम्नलिखित पहले से ही परिचित पैरामीटर हैं:

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

स्टोबेट्स 1	स्टोबेट्स 2
पहले कॉलम के पहले सेल में टेक्स्ट	दूसरे कॉलम के दूसरे सेल में टेक्स्ट

ब्राउज़र एक केन्द्रित तालिका प्रदर्शित करेगा जो इस तरह दिखेगी:

HTML तालिकाओं में tr पंक्तियाँ और td कोशिकाएँ

मैं आपको फिर से याद दिला दूं कि तालिकाएँ पंक्ति दर पंक्ति (tr) बनती हैं। पंक्तियों (tr) में पहले से ही कोशिकाएँ (td) हैं। यदि आप किसी स्ट्रिंग (tr) के लिए एक पैरामीटर निर्दिष्ट करते हैं, तो यह इसके लिए मान्य होगा सभी कोशिकाएँ(टीडी) इस पंक्ति में, यदि किसी विशिष्ट सेल के लिए, तो केवल उसके लिए। उपरोक्त उदाहरणों में, मैंने पंक्ति के लिए रंग निर्दिष्ट किया था; यह पैरामीटर सभी कोशिकाओं के अनुसार वितरित किया गया था।

tr और td टैग के लिए निम्नलिखित हैं

संरेखित- सेल के अंदर टेक्स्ट का संरेखण। बायां किनारा (बाएं), दायां किनारा (दाएं), केंद्र (केंद्र)
वेलिजन- सेल के अंदर टेक्स्ट का लंबवत संरेखण। ऊपर (ऊपर), नीचे (नीचे), केंद्र (मध्य)
बीजीरंग- लाइन का रंग सेट करता है
चौड़ाई- कॉलम की चौड़ाई (नीचे सभी सेल इस पैरामीटर को स्वीकार करेंगे) पिक्सेल में या प्रतिशत के रूप में इंगित की गई है, जहां 100% संपूर्ण तालिका की चौड़ाई है
ऊंचाई- सेल ऊंचाई (पंक्ति के सभी सेल इस पैरामीटर को स्वीकार करेंगे)

आइए उस कोड को देखें जहां कोशिकाओं की सामग्री (टीडी) को विभिन्न किनारों पर संरेखित किया गया है: पहले में बाईं ओर, दूसरे में दाईं ओर:

स्टोबेट्स 1	स्टोबेट्स 2
पहले कॉलम के पहले सेल में टेक्स्ट	दूसरे कॉलम के दूसरे सेल में टेक्स्ट
स्टोबेट्स 1	स्टोबेट्स 2

परिणाम

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

आपके ध्यान देने के लिए धन्यवाद! मुझे आशा है कि सामग्री उपयोगी थी!

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

:पहला-बच्चा और :अंतिम-बच्चा

जैसा कि आप नाम से अनुमान लगा सकते हैं, :first-child और :last-child छद्म वर्ग एक नोड (तत्व) में पहले और आखिरी बच्चे का चयन करते हैं। अन्य छद्म वर्गों की तरह, सरल चयनकर्ताओं का उपयोग करते समय :first-child और :last-child पर न्यूनतम दुष्प्रभाव होते हैं।

नीचे HTML और CSS पर विचार करें:

फलों की सूची

• सेब
• केले
• ब्लू बैरीज़
• संतरे
• स्ट्रॉबेरीज

स्टोबेट्स 1	स्टोबेट्स 2
पहले कॉलम के पहले सेल में टेक्स्ट	दूसरे कॉलम के दूसरे सेल में टेक्स्ट

< ! DOCTYPE html > < html lang = "en-US" > < head > < meta charset = "utf-8" > < title >: पहला - बच्चा और : आखिरी - बच्चा< / title > < / head > < body > < h2 >फलों की सूची< / h2 > < ul > < li >सेब< / li > < li >केले< / li > < li >ब्लू बैरीज़< / li > < li >संतरे< / li > < li >स्ट्रॉबेरीज< / li > < / ul > < / body > < / html >

नीचे दिया गया स्क्रीनशॉट परिणाम दिखाता है।

h2 हेडर और पहला li गुलाबी रंग का है क्योंकि:first-child विशिष्ट तत्वों से बंधा नहीं है। h2 टैग बॉडी टैग का पहला बच्चा है, और li ul तत्व का पहला बच्चा है। लेकिन शेष ली तत्व हरे क्यों हैं? क्योंकि:लास्ट-चाइल्ड भी किसी विशिष्ट तत्व से बंधा नहीं है, और ul बॉडी टैग में अंतिम चाइल्ड तत्व है। वास्तव में, ऊपर की शैलियों में हमने *:पहला-बच्चा और *:अंतिम-बच्चा लिखा है।

:first-child और :last-child में एक सरल चयनकर्ता जोड़ने से वे अधिक विशिष्ट हो जाते हैं। आइए अपने चयन को केवल वस्तुओं की सूची तक सीमित रखें। :first-child को li:first-child से और :last-child को li:last-child से बदलें। नीचे दिया गया स्क्रीनशॉट परिणाम दिखाता है।

:nth-child() और :nth-last-child()

किसी दस्तावेज़ में पहले और अंतिम चाइल्ड तत्वों का चयन करने में सक्षम होना कोई बुरा विचार नहीं है। यदि आपको सम या विषम तत्वों का चयन करने की आवश्यकता हो तो क्या होगा? शायद हमें पेड़ में छठे तत्व का चयन करने की ज़रूरत है, या हर तीसरे बच्चे तत्व पर शैलियों को लागू करने की आवश्यकता है। छद्म वर्ग:nth-child() और:nth-last-child() यहां हमारी मदद करेंगे।

जैसे :नहीं, :nth-child() और :nth-last-child() भी कार्यात्मक छद्म वर्ग हैं। वे एक तर्क लेते हैं, जो होना चाहिए:

कीवर्ड विषम;

कीवर्ड भी;

प्रकार 2 या 8 का पूर्णांक मान;

An+B के रूप में तर्क, जहां A चरण है, B ऑफसेट है, और n एक सकारात्मक पूर्णांक चर है।

अंतिम तर्क दूसरों की तुलना में थोड़ा अधिक जटिल है। हम इसे थोड़ी देर बाद देखेंगे।

:nth-child() और :nth-last-child() के बीच क्या अंतर है? वे शुरुआती बिंदु में भिन्न हैं: :nth-child() आगे की ओर गिना जाता है, और :nth-last-child() पीछे की ओर गिना जाता है। सीएसएस इंडेक्स प्राकृतिक संख्याओं का उपयोग करते हैं और 1 से शुरू होते हैं, 0 से नहीं।

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

tr:nth-child(even) (पृष्ठभूमि: rgba(96, 125, 139, 0.1); )

tr : nवां - बच्चा (सम ) ( पृष्ठभूमि: आरजीबीए(96, 125, 139, 0.1);

यदि आप:nth-child से:nth-last-child पर स्विच करते हैं, तो बार उलटे हो जाते हैं क्योंकि गिनती नीचे से शुरू होती है। नीचे स्क्रीनशॉट देखें.

क्या आप कुछ अधिक जटिल, अधिक जटिल तर्कों के साथ कुछ चाहते हैं? आइए 20 तत्वों के साथ एक दस्तावेज़ बनाएं जैसा कि नीचे दिखाया गया है।

:nth-child() और :nth-last-child() का उपयोग करके आप एक विशिष्ट तत्व का चयन कर सकते हैं। आप किसी दिए गए स्थान के बाद सभी चाइल्ड तत्वों का चयन कर सकते हैं, या आप ऑफसेट मल्टीपल वाले तत्वों का चयन कर सकते हैं। आइए छठे तत्व की पृष्ठभूमि बदलें:

आइटम: nth-child(6) (पृष्ठभूमि: #e91e63;)

एक बार फिर, ए कदम है। यह 1 से शुरू होने वाले n के लिए एक कारक है। यानी, यदि A = 3 है, तो 3n तीसरे, छठे और नौवें तत्वों का चयन करेगा, और इसी तरह। यह वही है जो नीचे स्क्रीनशॉट में देखा जा सकता है।

यहां सब कुछ थोड़ा और दिलचस्प है। :nth-child() और :nth-last-child() का उपयोग करके आप किसी दिए गए बिंदु के बाद सभी तत्वों का चयन कर सकते हैं। आइए पहले सात को छोड़कर सभी तत्वों का चयन करें:

आइटम: nth-child(n+8) (पृष्ठभूमि: #e91e63;)

मद : nवाँ - बच्चा (n + 8 ) ( पृष्ठभूमि : #e91e63;

यहां कोई चरण निर्दिष्ट नहीं है. परिणामस्वरूप, n+8 आठवें से शुरू करके, n के सभी तत्वों का चयन करता है। नीचे स्क्रीनशॉट देखें.

नोट: नकारात्मक ऑफसेट

नकारात्मक मान और श्रेणियाँ भी मान्य हैं. एक प्रविष्टि जैसे:nth-child(-n+8) चयन को उलट देती है और पहले आठ तत्वों का चयन करती है।

ऑफसेट और स्टेप का उपयोग करके, आप पांचवें से शुरू करके हर तीसरे तत्व का चयन कर सकते हैं:

आइटम: nth-child(3n+5) (पृष्ठभूमि: #e91e63;)

मद : nवाँ - बच्चा (3n + 5 ) ( पृष्ठभूमि : #e91e63;

परिणाम।

केवल बच्चे

एकमात्र-बाल छद्म-वर्ग किसी तत्व का चयन केवल तभी करता है जब वह एकमात्र संतान तत्व हो। नीचे दो बुलेटेड सूचियाँ हैं। पहले में एक तत्व है, दूसरे में तीन:

• सेब

• नारंगी
• केला
• रसभरी

< ul > < li >सेब< / li > < / ul > < ul > < li >नारंगी< / li > < li >केला< / li > < li >रसभरी< / li > < / ul >

चयनकर्ता li:only-child(color: #9c27b0;) का चयन करेगा

सेब

, क्योंकि यह पहली सूची का एकमात्र बच्चा है। दूसरी सूची के तत्वों को चयन में शामिल नहीं किया गया है, क्योंकि तीन आसन्न तत्व हैं। परिणाम नीचे दिखाया गया है.

:खाली

आप उन तत्वों का चयन करने के लिए :empty छद्म वर्ग का उपयोग कर सकते हैं जिनमें कोई संतान नहीं है। छद्म वर्ग:खाली अपने लिए बोलता है (अंग्रेजी के "खाली" से खाली)। खाली चयन में शामिल होने के लिए, तत्व पूरी तरह से खाली होना चाहिए, रिक्त स्थान भी नहीं। यानी यह नमूने में आ जाता है, लेकिन नहीं।

कभी-कभी WYSIWYG संपादक आपकी सामग्री में खाली पी टैग डालते हैं। आप इन तत्वों पर शैलियों को लागू होने से रोकने के लिए :empty और :not का उपयोग कर सकते हैं। उदाहरण के लिए, p:not(:empty).

किसी विशिष्ट प्रकार के तत्वों का उनके सूचकांक द्वारा चयन करना

पिछले अनुभाग में वर्णित छद्म वर्ग तत्वों का चयन करते हैं यदि वे दस्तावेज़ ट्री में एक निश्चित स्थान पर रहते हैं। उदाहरण के लिए, p:nth-last-child(2) पैरेंट ब्लॉक के अंदर अंतिम वाले से पहले सभी p टैग का चयन करेगा।

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

ऐसे पांच छद्म वर्ग हैं, जिनके नाम उनके अलिखित समकक्षों के बिल्कुल विपरीत हैं:

nवें-अंतिम-प्रकार()

उनके और चाइल्ड इंडेक्स छद्म वर्गों के बीच एक महीन रेखा है। प्रविष्टि p:nth-child(5) केवल पाँचवाँ टैग p ढूँढती है, जबकि प्रविष्टि p:nth-of-type(5) सभी टैग p ढूँढती है और पाँचवाँ टैग चुनती है।

चलिए एक और दस्तावेज़ बनाते हैं। इसमें भी 20 तत्व हैं, केवल कुछ पी टैग हैं और अन्य डिव हैं। गोल कोनों वाले पी टैग, नीचे स्क्रीनशॉट देखें।

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

1. कोशिकाओं की पृष्ठभूमि का रंग निर्दिष्ट करना। यह संपत्ति का उपयोग करके किया जाता है पृष्ठभूमि का रंग.
2. कोशिकाओं में पाठ का रंग निर्दिष्ट करना। यह संपत्ति का उपयोग करके किया जाता है रंग.
3. सेल बॉर्डर का रंग निर्दिष्ट करता है। यह संपत्ति का उपयोग करके किया जाता है सीमा रंग.

पहले, रंग बदलने के लिए, फ़्रेम का वर्णन करने का अधिक संक्षिप्त रूप उपयोग किया जाता था। वह इस तरह दिखती थी:

बॉर्डर: 1px ठोस हल्का भूरा

और अंतिम भाग यहाँ के रंग के लिए उत्तरदायी था - लाइटरगे.

रंगों का अर्थ निर्धारित करने के विभिन्न तरीके हैं सीएसएस. हम आपको दिखाएंगे कि विशेषताओं का उपयोग करके रंग का वर्णन कैसे किया जाता है।

सेल का रंग कैसे बदलें

आइए देखें कि कोड कैसा दिखता है सीएसएस, जो सेल के लिए रंग निर्दिष्ट करता है।

टीडी (पृष्ठभूमि-रंग: पृष्ठभूमि-रंग;)

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

आइए टैग के साथ हेडर सेल के लिए शैलियाँ जोड़ें वां, साथ ही संख्याओं के वर्ग वाले विकर्ण कोशिकाओं के लिए:

पहाड़ा

*	2	3
2	4	6
3	6	9

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

टेबल में बॉर्डर का रंग कैसे बदलें

जैसा कि आपने ऊपर के उदाहरण में पहले ही देखा है, तालिका में हमने बॉर्डर का रंग बदल दिया है। इसके लिए हमने बॉर्डर प्रॉपर्टी का इस्तेमाल किया. यह नीचे सूचीबद्ध क्रम में पैरामीटर सेट करता है:

1. लाइन प्रकार, हमारे मामले में ठोस (ठोस)
2. लाइन की मोटाई, हमारे मामले में 1px
3. रेखा का रंग, हमारे मामले में नीला

आइए एक बार फिर से याद करें कि किसी सेल के लिए बॉर्डर रंग की सेटिंग कैसी दिखती है:

टीडी (बॉर्डर: 1px ठोस नीला;)

किसी तालिका में पंक्ति का रंग कैसे बदलें

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

हालाँकि, ऐसी परिस्थितियाँ होती हैं जब आपको किसी विशिष्ट सेल, या कई सेल, या पूरी पंक्ति का रंग बदलने की आवश्यकता होती है। ऐसे में क्या करें? यहां आपको कक्षाओं का उपयोग करना चाहिए, साथ ही उनकी शैलियों को भी लागू करना चाहिए। व्यवहार में यह इस प्रकार दिखता है:

रोग्रीन (पृष्ठभूमि-रंग:हरा;)

और इस वर्ग का उपयोग करके कुछ पंक्तियों का रंग बदलने के लिए, आपको निम्नलिखित कार्य करने होंगे:

पंक्तियों में वैकल्पिक रंगों वाली तालिका

1	2	3	4	5
1	2	3	4	5
1	2	3	4	5

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

टेबल में टेक्स्ट का रंग कैसे बदलें

तालिका में टेक्स्ट का रंग बदलने के लिए प्रॉपर्टी का उपयोग करें रंग. आप इसे विभिन्न तत्वों पर लागू कर सकते हैं: तालिका, tr, th, td। इसके आधार पर, चयनित तत्व में रंग बदल जाएगा। उदाहरण के लिए, संपूर्ण तालिका के लिए हम फ़ॉन्ट का रंग हरा पर सेट करेंगे:

टेबल (रंग: हरा; ...)

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