सीएसएस कोशिकाओं के बीच पैडिंग। सेल सामग्री का संरेखण

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

सेल को इंडेंट करने के लिए, विशेषता का उपयोग करें सेल पैडिंगटैग के लिए

. हालाँकि, एक और, अधिक पसंदीदा विकल्प है: सीएसएस.

इस मामले में, संपत्ति का उपयोग करके इंडेंट सेट किए जाते हैं गद्दी. इसकी मदद से, जहां आवश्यक हो, यानी ऊपर से, दाएं से, नीचे से या बाएं से, क्रमशः, इन गुणों में से एक का उपयोग करना मुश्किल नहीं होगा: पैडिंग शीर्ष, गद्दी सही, नीचे गद्दी करनाऔर गद्दी छूट गई.

आप बिल्कुल सेट कर सकते हैं कि कितने पिक्सेल इंडेंट किए जाने चाहिए। आइए एक उदाहरण देते हैं जिसमें निचला इंडेंट होगा 20 पिक्सेल, और बाकी सब होगा 10 . ऐसा सीएसएस-कोड इस तरह दिखेगा:

टीडी (पैडिंग: 10 पीएक्स; पैडिंग-बॉटम: 20 पीएक्स;)

और इस स्तर पर पूर्ण शैली कोड:

तालिका (बॉर्डर: ठोस 1px नीला; बॉर्डर-पतन: पतन;) td (बॉर्डर: ठोस 1px नीला; पैडिंग: 10px; पैडिंग-बॉटम: 20px;)

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

कोशिकाओं के बीच गद्दी

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

तालिकाओं में इंडेंट न केवल कोशिकाओं के अंदर होते हैं। वे स्वयं कोशिकाओं के बीच भी मौजूद हो सकते हैं।

सेल को इंडेंट करने के लिए दो विकल्प हैं:

विशेषता का उपयोग करना cellpacingटैग के लिए

का उपयोग करते हुए सीएसएस-गुण सीमा-दूरी.

इस बात पर जोर दिया जाना चाहिए सीमा-दूरीसमग्र रूप से तालिका के लिए लिखा गया है, जबकि संपत्ति गद्दीसीधे कोशिकाओं को लिखा जाता है।

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

तालिका (बॉर्डर: ठोस 1px नीला; बॉर्डर-पतन: अलग; बॉर्डर-स्पेसिंग: 5px; ) td (बॉर्डर: ठोस 1px नीला; पैडिंग: 10px; पैडिंग-बॉटम: 20px;)

और परिणामी परिणाम के लिए:

हम तुरंत यह निर्धारित करेंगे कि इस तरह के इंडेंटेशन का उपयोग करने की कोशिश करना जरूरी नहीं है सीमा-पतन: पतन. दरअसल, इस विकल्प का उपयोग करते समय, कोशिकाएं एक दूसरे से "चिपक" जाती हैं।

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

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

सीमा-पतन: अलग - प्रत्येक कोशिका की अपनी सीमा होती है (डिफ़ॉल्ट)

सीमा-पतन: पतन - सामान्य सीमा

सीमा-पतन: उत्तराधिकारी - मूल्य मूल तत्व से लिया जाता है

उदाहरण के लिए, चलिए एक टेबल बनाते हैं और पेज पर मौजूद सभी टेबल के सेल के लिए एक फ्रेम सेट करते हैं। सबसे पहले, हम यह देखने के लिए कुछ भी नहीं बदलेंगे कि तालिका कैसी दिखेगी:

शैली:

1
2
3
4
5
6

पृष्ठ

गृहकार्य।

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

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

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

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

बॉर्डर-स्पेसिंग: मान [मान]

बहस

एक मान सेल बॉर्डर के बीच लंबवत और क्षैतिज दोनों दूरी सेट करता है। यदि दो तर्क हैं, तो पहला क्षैतिज दूरी निर्धारित करता है, और दूसरा - लंबवत।

सीमा-दूरी

1	2
3	4

परिणाम यह उदाहरणन ही अंजीर। 1.

चावल। 1. बॉर्डर-स्पेसिंग विकल्प लागू करना

टिप्पणी

अगर टैग करना है

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

टेबल

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

टेबल-लेआउट निर्दिष्ट करता है कि ब्राउजर को अपनी सामग्री के आधार पर टेबल सेल की ऊंचाई और चौड़ाई की गणना कैसे करनी चाहिए।

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

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

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

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

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

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

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

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

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

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

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

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

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

किसी तालिका की बाहरी सीमा को बढ़ा कर उसकी चौड़ाई को हाइलाइट किया जा सकता है:

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

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

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

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

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

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

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

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

टेबल (चौड़ाई: 600पीएक्स;) वें (चौड़ाई: 20%;) टीडी: फर्स्ट-चाइल्ड (चौड़ाई: 30%;)

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

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

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

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

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

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

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

5. तालिका में शीर्षक कैसे जोड़ें

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

और

. ऊंचाई संपत्ति के साथ ऊंचाई तय करने की अनुशंसा नहीं की जाती है।

गु, टीडी (गद्दी: 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; सीमा-पतन: अलग; खाली-कोशिकाएँ: छिपाएँ;) वें, td (सीमा: 2px ठोस #69c;)

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

9. टेबल-लेआउट गुण के साथ टेबल लेआउट लेआउट

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

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

टेबल (टेबल-लेआउट: फिक्स्ड;)

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

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

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

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

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

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

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

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

Th (फ़ॉन्ट-वेट: सामान्य; रंग: #039; पैडिंग: 10px 15px; ) td (रंग: #669; बॉर्डर-टॉप: 1px सॉलिड #e8edff; पैडिंग: 10px 15px;) tr:hover td (बैकग्राउंड: #e8edff ;)

2. कार्यक्षेत्र अतिसूक्ष्मवाद

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

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

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

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

Th (फ़ॉन्ट-आकार: 13पीएक्स; फ़ॉन्ट-वजन: सामान्य; पृष्ठभूमि: #b9c9fe; बॉर्डर-टॉप: 4px ठोस #aabcfe; बॉर्डर-तल: 1px ठोस #fff; रंग: #039; पैडिंग: 8px;) टीडी (पृष्ठभूमि : #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;) th (फ़ॉन्ट-वेट: नॉर्मल; कलर: #039; बॉर्डर-बॉटम: 1px डैश्ड #69c; पैडिंग: 12px 17px;) td (कलर: #669; पैडिंग: 7px 17px; ) टीआर: होवर टीडी (पृष्ठभूमि: #ccddff;)

टेबल (बॉर्डर: 1px सॉलिड #69c;) th (फ़ॉन्ट-वेट: नॉर्मल; कलर: #039; पैडिंग: 10px; ) td (कलर: #669; बॉर्डर-टॉप: 1px डैश्ड #fff; पैडिंग: 10px; बैकग्राउंड: #ccddff; tr:hover td (पृष्ठभूमि: #99bcff;)

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

6. तालिका पृष्ठभूमि

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

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

5,00 / 3

घर →डी-लिंक →सीएसएस कोशिकाओं के बीच पैडिंग। सेल सामग्री का संरेखण →