Html तालिका के स्तंभों के बीच की दूरी। सेलस्पेसिंग विशेषता का उपयोग करना

हमने आपके साथ 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 ...

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

घर का पाठ।

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

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

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

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

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

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

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

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

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

गु (सीमा: 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 8px; ट्रांज़िशन: .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; फ़ॉन्ट-वजन: सामान्य; पृष्ठभूमि: # b9c9fe; सीमा-शीर्ष: 4px ठोस #aabcfe; सीमा-निचला: 1px ठोस #fff; रंग: # 039; गद्दी: 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. क्षैतिज ज़ेबरा

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

गु (फ़ॉन्ट-वजन: सामान्य; रंग: # 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))। )

हैलो! तो अब आप प्राथमिक सारणी बनाने में सक्षम हैं, जिसमें आपकी आवश्यकता के अनुसार कई पंक्तियाँ और स्तंभ हैं। बुरा नहीं बुरा नहीं। अब आइए इन तालिकाओं के डिजाइन के बारे में बात करते हैं।

पिछले पाठ में, बिना सीमाओं के टेबल प्रदर्शित किए गए थे। और, आप देखते हैं, ऐसा लगता है-तो, आप इसे संकेत भी नहीं कह सकते। HTML में टेबल बॉर्डर बनाने के लिए, टैग में जोड़ें

गुण सीमाशून्य से इतर मान देकर।

तो आइए टेबल के लिए बॉर्डर बनाएं। उदाहरण के लिए, हमारे पास पहले से ही:

शीर्ष बाएं सेलशीर्ष सही सेल
नीचे का बायाँ सेलनिचला दायां सेल

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

टेबल बॉर्डर कैसे निकालें

बदले में, HTML तालिका की सीमाओं को हटाने के लिए, या आप उन्हें अदृश्य बनाने के लिए भी कह सकते हैं, आपको विशेषता की आवश्यकता है सीमा मूल्य ते करना 0 ... इन सरल क्रियाओं के बाद, फ्रेम को हटा दिया जाएगा।

विशेषता आपको सीमाओं को बनाने की अनुमति देती है, लेकिन प्रबंधन की नहीं। यह केवल आपको उनकी मोटाई बदलने की अनुमति देता है।

इसलिए, अब हम बात करेंगे सीएसएसजिनके गुण इसके साथ संभव बनाते हैं सीमाप्रत्येक कक्ष के अंदर और बाहर दोनों तरफ, अलग-अलग सीमाएँ बनाएं।

आइए एक तालिका के बाहरी और आंतरिक सीमाओं को बनाने के लिए सीएसएस को लागू करने के तरीके पर एक नज़र डालें।
ऐसा करने के लिए, हमारी तालिका से सीमा विशेषता को हटा दें और शैलियों को जोड़ें:

उदाहरण तालिका

शीर्ष बाएं सेल शीर्ष सही सेल
नीचे का बायाँ सेल निचला दायां सेल

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

अब प्रत्येक सेल के लिए सीमाएँ जोड़ते हैं। ऐसा करने के लिए, बस शैलियों को जोड़ें:

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

HTML टेबल में कोशिकाओं के बीच पैडिंग कैसे निकालें

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

हालांकि, ऐसी सीमाओं से छुटकारा पाना काफी संभव है, जिन्हें सीमा कहा जाता है, अगर हम सीमा-पतन सीएसएस संपत्ति का उपयोग करते हैं। व्यवहार में, यह इस तरह दिखता है:

तालिका (बॉर्डर: ठोस 1px नीला; बॉर्डर-पतन: पतन;) ...

परिणामस्वरूप, कोशिकाओं के बीच की दूरी को हटा दिया जाता है:

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

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

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

हाइपरटेक्स्ट मार्कअप लैंग्वेज 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% पर सेट की गई थी, यह मान सेल की चौड़ाई से मेल खाती है।
    • और अंतिम संपत्ति जो हम इस ब्लॉक के लिए निर्धारित करते हैं: "-1" के मान के साथ z- इंडेक्स यह निर्धारित तत्वों के क्रम को निर्धारित करता है z अक्ष... यह संपत्ति आवश्यक है ताकि पाठ इस ब्लॉक के सामने हो, और इसके पीछे नहीं, यदि आप शून्य से कम मूल्य निर्धारित नहीं करते हैं, तो ब्लॉक पाठ को बंद कर देगा।

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

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

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

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


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


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

    © 2020 मोबाइल और कंप्यूटर गैजेट्स