सीएसएस तालिका पंक्ति रंग. नोट: नकारात्मक ऑफसेट

भ्रूण प्रत्यारोपण के बाद गर्भावस्था के लक्षण

BGCOLOR विशेषता का उपयोग करके, आप किसी सेल, पंक्ति, स्तंभों के समूह, पंक्तियों के समूह या संपूर्ण तालिका की सामग्री का रंग बदल सकते हैं।

रंग को या तो रंग के नाम से या # चिह्न के साथ रंग कोड के हेक्साडेसिमल मान द्वारा निर्दिष्ट किया जा सकता है।

उदाहरण:

HTML कोड:


ब्राउज़र डिस्प्ले:


1 2
3 4

ग्राफ़िक पृष्ठभूमि तालिका HTML पृष्ठ

BACKGROUND विशेषता का उपयोग करके, आप किसी सेल या संपूर्ण तालिका की ग्राफ़िक पृष्ठभूमि सेट कर सकते हैं। यदि कोई छवि उस सेल या तालिका से बड़ी है जिसके लिए वह लक्षित है, तो ब्राउज़र छवि को उपयुक्त ऑब्जेक्ट में फ़िट करने के लिए क्रॉप करता है।

उदाहरण:

हमारी तालिका में एक फ्रेम, पृष्ठभूमि, आयाम इत्यादि के लिए कई विशेषताएं निर्दिष्ट होनी चाहिए।

सबसे पहले हम उन विशेषताओं को देखेंगे जो टैग में निहित हैं

HTML कोड:


11111 22222 33333 44444

ब्राउज़र डिस्प्ले:


11111 22222
33333 44444

HTML पृष्ठ तालिका में डेटा को संरेखित करना

तालिका में डेटा को संरेखित करने के लिए ALIGN और VALIGN विशेषताओं का उपयोग किया जाता है।

ALIGN विशेषता क्षैतिज संरेखण के लिए है। डिफ़ॉल्ट रूप से, हेडर सामग्री केन्द्रित होती है और सेल सामग्री बाईं ओर संरेखित होती है।

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

यदि आप सेलपैडिंग विशेषता का उपयोग करके सेल की सामग्री और उसके किनारों के बीच की दूरी को सीमित करते हैं, तो यह संरेखण परिणाम को प्रभावित करता है। उदाहरण के लिए, CELLPADDING=3 और ALIGN='top' के साथ, डेटा को सेल की शीर्ष सीमा से तीन पिक्सेल दूर रखा जाएगा।

उदाहरण:

जो स्ट्रिंग्स और टैग बनाने के लिए ज़िम्मेदार है, कोशिकाओं के निर्माण के लिए जिम्मेदार।

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

HTML कोड:


1111
2222		 22222 निचली कोशिका निचली कोशिका

ब्राउज़र डिस्प्ले:


1111
2222 		22222
निचली कोशिका निचली कोशिका

HTML पृष्ठ तालिका का आकार बदलना

तालिका की चौड़ाई WIDTH विशेषता द्वारा निर्दिष्ट की जाती है। मान को पूर्ण इकाइयों (WIDTH=250) और सापेक्ष इकाइयों (WIDTH='80%'') दोनों में निर्दिष्ट किया जा सकता है। उदाहरण के लिए, चौड़ाई को 600 पिक्सेल पर सेट करके, आप यह सुनिश्चित कर सकते हैं कि तालिका किसी भी मॉनिटर रिज़ॉल्यूशन पर ब्राउज़र विंडो में फिट होगी।

HEIGHT विशेषता का उपयोग करके तालिका की ऊंचाई के साथ भी ऐसा ही किया जा सकता है।

किसी तालिका की चौड़ाई और ऊंचाई को अत्यधिक छोटे मानों पर सेट करते समय, ब्राउज़र न्यूनतम मान निर्धारित करता है जो डेटा को सामान्य रूप से प्रदर्शित करने की अनुमति देता है।

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

नमस्कार, ब्लॉग साइट के प्रिय पाठकों। मैंने साइट आगंतुकों के अनुभव को बेहतर बनाने के लिए सीएसएस का उपयोग करने के विषय पर एक छोटी पोस्ट लिखने का निर्णय लिया।

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

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

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

nth-child छद्म वर्ग की संभावनाएँ और साइट पर इसका उपयोग

दरअसल, छद्म-वर्ग nth-child की घोषणा करने के बाद, मैं पोस्ट को समाप्त कर सकता हूं, क्योंकि आप स्वयं इस पर बहुत सारी जानकारी Google पर पा सकते हैं। लेकिन यह हमारा रास्ता नहीं है, इसलिए हम जारी रखेंगे।' तो, सबसे पहले मैं सही मेनू को "धारीदार" में बदलने के लिए अपने चरणों का वर्णन करूंगा। यह ब्राउज़र में निर्मित डेवलपर टूल का उपयोग करके पता लगाने के लिए पर्याप्त था ("तत्व कोड देखें" जैसे आइटम का चयन करके वेब पेज पर वांछित तत्व के संदर्भ मेनू से बुलाया गया) जहां शैली फ़ाइल में इस की पंक्तियों की उपस्थिति दिखाई देती है सूची सेट है.

डेवलपर टूल के साथ काम करने का सिद्धांत वैसा ही है जैसा मैंने लेख में वर्णित किया है। मेरे ब्लॉग के बाएँ मेनू में किसी भी आइटम पर राइट-क्लिक करें और खुलने वाले पैनल में परिणामी रिपोर्ट देखें:

बाईं ओर आपको इस तत्व का HTML कोड दिखाई देगा (हम LI टैग वाले तत्व में रुचि रखते हैं - सूची पंक्ति), और दाएं कॉलम में CSS नियम हैं जिनका उपयोग ब्राउज़र इसे स्टाइल करने के लिए करता है। आप माउस कर्सर को उसके नाम पर ले जाकर तुरंत पता लगा सकते हैं कि स्टाइल फ़ाइल कहाँ स्थित है।

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

/wp-सामग्री/थीम

वास्तव में, सीएसएस शैलियों के क्षेत्र में डेवलपर्स के लिए टूलबार पर, आपको एक पंक्ति भी मिलेगी जिस पर स्टाइल फ़ाइल में वांछित नियम लिखा हुआ है। मेरे मामले में यह 281 पंक्तियाँ हैं। इसलिए, नोटपैड में style.css खोलने के बाद (मैंने इसे साइट इंजन में दिखाई देने वाली सभी फ़ाइलों के लिए डिफ़ॉल्ट संपादक के रूप में असाइन किया है), मैं तुरंत इस लाइन पर चला गया।

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

नवाँ-बच्चा(2एन)

सामान्य रूप में इस छद्म वर्ग nth-child का मानअभिव्यक्ति का उपयोग करके दिया गया है: ए+बी, जहां ए और बी पूर्णांक हैं, और एन एक काउंटर है जो 0 और अधिक से पूर्णांक मान लेता है: 0,1,2,3... हमारे मामले में, काउंटर एन बदलते समय, हमें संख्याएं 0 प्राप्त होंगी , 2, 4, 6, आदि। इसका मतलब यह है कि इस छद्म वर्ग के लिए निर्दिष्ट संपत्ति (हमारे मामले में, यह का उपयोग करके सूची पंक्ति की पृष्ठभूमि सेट करने का नियम है) #E4F2FA पर सूची में है।

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

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

nth-child का उपयोग करने के अन्य उदाहरण

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

अधिक nth-child का उपयोग करने के कुछ उदाहरणसूचियों, तालिकाओं और समान तत्वों की विभिन्न पंक्तियों को उजागर करने के लिए:

  1. विषम तत्वों का उपहास करने के लिए, आप ऊपर दिखाए गए अभिव्यक्ति के बजाय nth-child (विषम) का उपयोग कर सकते हैं, और सम तत्वों के लिए nth-child (सम) का उपयोग कर सकते हैं।
  2. यदि आप केवल चौथी पंक्ति बदलना चाहते हैं तो क्या होगा? फिर सीएसएस नियम में एक कोलन द्वारा अलग किए गए छद्म वर्ग nth-child (4) को जोड़ें।
  3. क्या आप नौवें से प्रारंभ होने वाली रेखाओं का स्वरूप बदलना चाहते हैं? कोई समस्या नहीं - nवाँ-बच्चा (n+9)।
  4. इसके विपरीत, यदि आप केवल पहले नौ तत्वों का चयन करना चाहते हैं, तो nth-child (-n+9) निर्माण का उपयोग करें।
  5. यदि आप नौवें से अठारहवें तक के तत्वों का चयन करना चाहते हैं, तो एक मिश्रित छद्म वर्ग जोड़ें: nth-child (n+9):nth-child (-n+18)। शुद्ध तर्क.
  6. क्या आप पिछले पैराग्राफ जैसा ही काम करना चाहते हैं, लेकिन इस श्रेणी में केवल सम पंक्तियों को ही हाइलाइट करना चाहते हैं? कोई समस्या नहीं - :nवां-बच्चा (n+9):nवां-बच्चा (-n+18):nवां-बच्चा (सम)।

ख़ैर, यह वहीं है। बात काफी उपयोगी साबित हो सकती है. किसी भी मामले में, यह मेरे लिए उपयोगी था.

आप सौभाग्यशाली हों! जल्द ही ब्लॉग साइट के पन्नों पर मिलते हैं

आपकी रुचि हो सकती है

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

- 6 वोटों के आधार पर 5 में से 4.7

वेब पेज बनाते समय, पेज की कुछ सामग्री को तालिकाओं के रूप में प्रस्तुत करना अक्सर आवश्यक होता है।

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

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

टैग HTML में टेबल बनाने के लिए जिम्मेदार है

और समापन टैग
. लेकिन आप शायद पहले से ही जानते हैं कि तालिकाओं में पंक्तियाँ और कोशिकाएँ होती हैं। इसलिए, तालिका बनाने के लिए, हमें दो और टैग की आवश्यकता है: यह टैग है
1 - सेल 2 - कोशिका
3 - कोशिका 4 - सेल

यह देखने के लिए कि इसका क्या परिणाम होता है, नीचे दिए गए कोड का उपयोग करके एक HTML पृष्ठ बनाएं। यदि आप नहीं जानते कि HTML पेज कैसे बनाया जाता है, तो पाठ देखें।

मेज़

1 - सेल 2 - कोशिका
3 - कोशिका 4 - सेल

आपको निम्नलिखित मिलना चाहिए:

जैसा कि आप देख सकते हैं, हमारी तालिका अभी बिल्कुल भी तालिका जैसी नहीं दिखती है। यह सब हमारे टैग के कारण है

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

और इसलिए टैग करें

निम्नलिखित गुण हैं:

बॉर्डर - तालिका बॉर्डर की चौड़ाई को पिक्सेल में सेट करता है, इस प्रकार लिखा जाता है:

.

बॉर्डर कलर - टेबल बॉर्डर रंग; यह विशेषता सभी ब्राउज़रों द्वारा समर्थित नहीं है, इसलिए आप निर्दिष्ट बॉर्डर रंग नहीं देख सकते हैं:

हम फ़्रेम की चौड़ाई 2 पिक्सेल पर सेट करते हैं, नीला, तालिका इस तरह दिखेगी:

चौड़ाई - तालिका की चौड़ाई पिक्सेल या प्रतिशत में सेट करती है:

ऊँचाई - पिक्सेल या प्रतिशत में तालिका की ऊँचाई:

टेबल की चौड़ाई 250 पिक्सल और ऊंचाई 150 पिक्सल होगी, टेबल इस तरह दिखेगी:

संरेखित करें - तालिका संरेखण;

संरेखित करें = बाएँ - तालिका बाईं ओर संरेखित की जाएगी;

संरेखित करें = दाएँ - तालिका दाईं ओर संरेखित की जाएगी:

हमारी टेबल दाहिनी ओर संरेखित होनी चाहिए।

bgcolor - टेबल बैकग्राउंड का रंग, bgcolor=#FFC000 - टेबल बैकग्राउंड का रंग पीला होगा:

तालिका इस तरह दिखेगी:

पृष्ठभूमि - इस विशेषता का उपयोग करके आप एक छवि निर्दिष्ट कर सकते हैं जो तालिका की पृष्ठभूमि के रूप में काम करेगी।

उदाहरण के तौर पर, कोष्ठक () में दिखाई देने वाली छोटी छवि को उस फ़ोल्डर में सहेजें जहां आपके पास तालिका वाला पृष्ठ है, और टैग में

बैकग्राउंड='fon.gif' सभी कोड जोड़ें:

तालिका इस तरह दिखेगी:

सेलपैडिंग - एक विशेषता जो सेल के अंदर बाएँ, दाएँ, ऊपर और नीचे पैडिंग को निर्दिष्ट करती है। उदाहरण के लिए, यदि हमारे टैग के लिए

सेलपैडिंग=10 जोड़ें, फिर सेल के अंदर लिखा गया टेक्स्ट इंडेंट हो जाएगा।

सेलस्पेसिंग - टेबल सेल के बीच का स्थान निर्धारित करता है।

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

सेलस्पेसिंग = 0 सेट करें। सभी कोड:

परिणामस्वरूप, हमारी कोशिकाएँ एक-दूसरे के विरुद्ध दब गईं, और कोशिकाओं के अंदर का पाठ इंडेंट हो गया:

hspace - तालिका से बाईं ओर और दाईं ओर पिक्सेल में अंतर सेट करता है, इस प्रकार लिखा जाता है: hspace=20

अब्रैप - सेल में शब्द रैपिंग को प्रतिबंधित करता है, बस इसे अबोरैप लिखा जाता है

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

अब आइए टैग विशेषताओं को देखें

, उनमें से कुछ टैग विशेषताओं के समान हैं

चौड़ाई - पिक्सेल या प्रतिशत में सेल की चौड़ाई।

ऊँचाई - पिक्सेल या प्रतिशत में सेल की ऊँचाई।

उदाहरण के लिए, आइए पहली पंक्ति के पहले सेल की चौड़ाई 30% - width=30% पर सेट करें, और दूसरी पंक्ति के पहले सेल की ऊंचाई 100px पर सेट करें। कोड इस प्रकार होगा:

1 - सेल 2 - कोशिका
3 - कोशिका 4 - सेल

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

संरेखित करें - कोशिकाओं की सामग्री को संरेखित करता है, इसमें निम्नलिखित मान होते हैं:

संरेखित करें = "lef" - सेल की सामग्री बाईं ओर संरेखित की जाएगी;

संरेखित करें = "दाएं" - सामग्री दाईं ओर संरेखित की जाएगी;

संरेखित करें = "केंद्र" - सामग्री को सेल के केंद्र में संरेखित किया जाएगा।

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

1 - सेल 2 - कोशिका
3 - कोशिका 4 - सेल

bgcolor - इस विशेषता का उपयोग करके आप सेल का रंग सेट कर सकते हैं।

पृष्ठभूमि - छवि को सेल की पृष्ठभूमि के रूप में सेट करता है।

टैग विशेषताओं पर विचार करते समय हम पहले ही इन विशेषताओं का सामना कर चुके हैं

. वे उसी तरह काम करते हैं, केवल इस मामले में वे सेल की पृष्ठभूमि निर्धारित करते हैं। उदाहरण के लिए, आइए दूसरे सेल की पृष्ठभूमि का रंग पीला पर सेट करें, और निम्नलिखित छवि () को चौथी सेल की पृष्ठभूमि के रूप में सेट करें।

ऐसा करने के लिए, हम अपने कोड में आवश्यक विशेषताएँ जोड़ेंगे, हमारे सेल के लिए bgcolor='#FFFF00' दूसरे सेल के लिए और बैकग्राउंड='fon.jpg' चौथे सेल के लिए। परिणामस्वरूप, हमारी तालिका इस तरह दिखेगी:

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

बॉर्डर कलर - सेल बॉर्डर का रंग सेट करता है।

टैग विशेषताओं पर विचार करते समय हमें इस विशेषता का भी सामना करना पड़ा

. कृपया ध्यान दें कि यह सभी ब्राउज़रों में काम नहीं करता है। कृपया ध्यान दें कि टैग . व्यवहार में, ऐसे मामले होते हैं जब स्तंभों का विशेष स्वरूपण आवश्यक होता है, जो निम्नलिखित तरीकों से संभव है:

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

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

चयनकर्ता तालिका td:first-child , तालिका td:last-child का उपयोग करके आप तालिका के पहले या अंतिम कॉलम के लिए शैलियाँ सेट कर सकते हैं (तालिका शीर्षलेख के पहले सेल को छोड़कर);

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

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

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

आप टैग का उपयोग करके तालिका में शीर्षक जोड़ सकते हैं

सेल की सीमा को दर्शाने वाली कोई सीमा विशेषता नहीं है। आइए दूसरे सेल के बॉर्डर रंग को लाल पर सेट करें; ऐसा करने के लिए, दूसरे सेल में bordercolor='#FF0000' विशेषता जोड़ें

कोशिकाओं की सामग्री को संरेखित करने के लिए डिज़ाइन की गई एक और विशेषता है:

वैलिग्न - यह कोशिकाओं की सामग्री को लंबवत रूप से संरेखित करता है।

इसके निम्नलिखित अर्थ हैं:

valign='शीर्ष' - सेल सामग्री को शीर्ष किनारे पर संरेखित करें;

वैलिग्न = "नीचे" - सेल सामग्री को निचले किनारे पर संरेखित करता है;

वैलिग्न = "मध्य" - सेल के मध्य में संरेखण;

valign='बेसलाइन' - सेल सामग्री को बेस लाइन के साथ संरेखित करता है।

आइए इन विशेषताओं को हमारी प्रत्येक 4 कोशिकाओं में जोड़ें।

1 - सेल 2 - कोशिका
3 - कोशिका 4 - सेल

हमारी तालिका इस तरह दिखेगी:

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

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

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

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

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

:पहला-बच्चा और: आखिरी-बच्चा

फलों की सूची

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

< ! 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 तत्व हैं, केवल कुछ पी टैग हैं और अन्य डिव हैं। गोल कोनों वाले पी टैग, नीचे स्क्रीनशॉट देखें।

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

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

    स्वरूपण तालिकाएँ

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

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

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

    हेडर सेल बॉर्डरप्रत्येक कॉलम वें तत्व के लिए निर्दिष्ट है:

    थ (बॉर्डर: 1px सॉलिड ग्रे;)

    सेल सीमाएँतालिका निकाय td तत्व के लिए निर्दिष्ट हैं:

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

    आसन्न कोशिकाओं की सीमाओं की मोटाई दोगुनी नहीं है, इसलिए आप निम्नलिखित तरीके से संपूर्ण तालिका के लिए सीमाएँ निर्धारित कर सकते हैं:

    Th, td (बॉर्डर: 1px सॉलिड ग्रे;)

    आप किसी तालिका की बाहरी सीमा को बढ़ी हुई चौड़ाई देकर हाइलाइट कर सकते हैं:

    टेबल (बॉर्डर: 3px सॉलिड ग्रे;)

    सीमाएँ आंशिक रूप से निर्धारित की जा सकती हैं:

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

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

    2. टेबल की चौड़ाई और ऊंचाई कैसे सेट करें

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

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

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

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

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

    		और . ऊंचाई गुण का उपयोग करके ऊंचाई तय करने की अनुशंसा नहीं की जाती है।

    थ, टीडी (पैडिंग: 10px 15px;)

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

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

    4. टेबल कॉलम

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

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

    ...
    तालिका क्रमांक 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; बॉर्डर-पतन: अलग; खाली-कोशिकाएँ: छिपाएँ; ) th, td (बॉर्डर: 2px ठोस #69c;) चावल। 5. एक खाली टेबल सेल को छिपाने का उदाहरण

    9. टेबल-लेआउट प्रॉपर्टी का उपयोग करके एक टेबल लेआउट करें

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

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

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

    10. सर्वश्रेष्ठ टेबल लेआउट

    1. क्षैतिज अतिसूक्ष्मवाद

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

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

    जब बड़ी संख्या में पंक्तियाँ होती हैं, तो यह तालिका डिज़ाइन उन्हें पढ़ने में कठिन बना देता है। इस समस्या को हल करने के लिए, आप सभी td तत्वों के नीचे एक-पिक्सेल बॉर्डर जोड़ सकते हैं।

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

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

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

    2. लंबवत अतिसूक्ष्मवाद

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

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

    3. बॉक्सिंग शैली

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

    Th (फ़ॉन्ट-आकार: 13px; फ़ॉन्ट-वजन: सामान्य; पृष्ठभूमि: #b9c9fe; बॉर्डर-टॉप: 4px सॉलिड #aabcfe; बॉर्डर-बॉटम: 1px सॉलिड #fff; रंग: #039; पैडिंग: 8px; ) td (पृष्ठभूमि) : #e8edff; बॉर्डर-बॉटम: 1px सॉलिड #fff; रंग: #669; बॉर्डर-टॉप: 1px सॉलिड ट्रांसपेरेंट; पैडिंग: 8px; ) tr:hover td (बैकग्राउंड: #ccddff;)

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

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

    टेबल (बॉर्डर: 1px सॉलिड #6cf;) वां (फ़ॉन्ट-वेट: सामान्य; फ़ॉन्ट-आकार: 13px; रंग: #039; टेक्स्ट-ट्रांसफ़ॉर्म: अपरकेस; बॉर्डर-राइट: 1px सॉलिड #0865c2; बॉर्डर-टॉप: 1px सॉलिड #0865c2; बॉर्डर-बाएँ: 1px सॉलिड #0865c2; बॉर्डर-बॉटम: 1px सॉलिड #fff; पैडिंग: 20px; ) td (रंग: #669; बॉर्डर-राइट: 1px डैश्ड #6cf; पैडिंग: 10px 20px;)

    6. टेबल पृष्ठभूमि

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

    पीएनजी") 98% 86% नो-रिपीट; ) वें (फ़ॉन्ट-वजन: सामान्य; फ़ॉन्ट-आकार: 14px; रंग: #339; पैडिंग: 10px 12px; पृष्ठभूमि: सफ़ेद; ) td (रंग: #669; बॉर्डर- शीर्ष: 1px ठोस सफेद; पैडिंग: 10px 12px; पृष्ठभूमि: rgba(51, 51, 153, .2); संक्रमण: .3s; ) tr: होवर td (पृष्ठभूमि: rgba(51, 51, 153, .1); )

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