Html टेबल के लिए सुंदर फ्रेम। होवर पर लाइन बैकग्राउंड बदलें

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

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

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

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

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

और समापन टैग

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

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

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

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

तालिका

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

आपके पास कुछ इस तरह होना चाहिए:

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

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

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

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

और, पेज को रिफ्रेश करते हुए यह देखें कि ब्राउजर में टेबल कैसा दिखेगा। सुविधा के लिए, मैं पेज का पूरा कोड उपलब्ध नहीं कराऊंगा, लेकिन केवल टैग से संबंधित कोड वह यह है कि हम क्या बदलेंगे।

और इसलिए टैग

निम्नलिखित विशेषताएं हैं:

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

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

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

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

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

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

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

संरेखित करें \u003d बाईं ओर - तालिकाओं को बाईं ओर संरेखित किया जाएगा;

संरेखित करें \u003d सही - तालिका सही-संरेखित होगी:

हमारी तालिका सही-संरेखित होनी चाहिए।

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

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

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

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

पृष्ठभूमि जोड़ें \u003d "fon.gif" सभी कोड:

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

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

सेलपैडिंग \u003d 10 जोड़ें, तो कोशिकाओं के अंदर लिखा गया पाठ इंडेंट किया जाएगा।

cellspacing - तालिका कोशिकाओं के बीच रिक्ति सेट करता है।

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

सेलस्पेसिंग लिखना \u003d ०। सभी कोड:

नतीजतन, हमारी कोशिकाओं को एक साथ दबाया गया था, और कोशिकाओं के अंदर का पाठ इंडेंट किया गया था:

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

nowrap - एक सेल में वर्ड रैप को प्रतिबंधित करता है, बस Nowrap लिखा जाता है

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

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

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

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

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

उदाहरण के लिए, आइए पहली पंक्ति में पहली सेल की चौड़ाई ३०% - चौड़ाई \u003d ३०% और दूसरी पंक्ति में पहली सेल की ऊँचाई १०० पीएक्स पर सेट करें। कोड इस तरह होगा:

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

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

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

align \u003d "lef" - सेल की सामग्री को बाईं ओर संरेखित किया जाएगा;

संरेखित करें \u003d "सही" - सामग्री सही संरेखित होगी;

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

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

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

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

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

हम पहले से ही इन विशेषताओं के साथ मिल चुके हैं, टैग की विशेषताओं को देखते हुए

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

ऐसा करने के लिए, हमारी कोशिकाओं के लिए आवश्यक विशेषताओं को जोड़ें, हमारी कोशिकाओं के लिए 2 सेल के लिए bgcolor \u003d "# FFFF00" और चौथे सेल के लिए पृष्ठभूमि \u003d "fon.jpg"। परिणामस्वरूप, हमारी तालिका इस तरह दिखाई देगी:

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

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

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

... मैं आपको याद दिला दूं कि यह सभी ब्राउज़रों में काम नहीं करता है। ध्यान दें कि टैग

यह उदाहरण नेस्टेड टेबल का उपयोग करता है, अर्थात, एक टेबल दूसरे के भीतर। पंक्ति में 1 हम पहली तालिका को खोलते हैं और इसे एक गहरे रंग से भर देते हैं, इस मामले में काला (# 00 00 00)। बाहरी तालिका का एक पैरामीटर है cellspacingया सेलपैडिंग - 0 होना चाहिए और अन्य 1. लाइन में 4 हम एक सफेद पृष्ठभूमि (# FF FF FF) के साथ एक नई तालिका खोलते हैं। नेस्टेड टेबल का एक महत्वपूर्ण पैरामीटर इसकी चौड़ाई है - चौड़ाई \u003d "100%"... तालिकाओं को रिवर्स ऑर्डर में बंद किया जाना चाहिए - पहले नेस्टेड, फिर बाहरी।

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

बॉक्स 2

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

सेल बॉर्डर को दर्शाते हुए कोई सीमा विशेषता नहीं है। दूसरी सेल के लिए लाल रंग का बॉर्डर रंग सेट करें, दूसरी सेल में बॉर्डर कलर \u003d "# FF0000" विशेषता जोड़ें

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

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

निम्नलिखित अर्थ हैं:

valign \u003d "शीर्ष" - सेल की सामग्री को शीर्ष पर संरेखित करें;

valign \u003d "bottom" - सेल की सामग्री को नीचे तक संरेखित करें;

valign \u003d "मध्य" - सेल के मध्य में संरेखण;

valign \u003d "baseline" - सेल सामग्री को आधार रेखा से संरेखित करता है।

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

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

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

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

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

कोशिकाओं की पृष्ठभूमि का रंग निर्दिष्ट करता है। संपत्ति का उपयोग कर रहा है पीछे का रंग.
कोशिकाओं में पाठ का रंग निर्दिष्ट करता है। संपत्ति का उपयोग कर रहा है रंग.
सेल सीमाओं का रंग निर्दिष्ट करता है। संपत्ति का उपयोग कर रहा है किनारे का रंग.

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

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

और अंतिम भाग यहाँ रंग के लिए जिम्मेदार था - lightrgay.

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

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

देखते हैं कि कोड कैसा दिखता है सीएसएसजिसमें सेल के लिए रंग सेट किया गया है।

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

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

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

पहाड़ा

पहाड़ा
*	2	3
2	4	6
3	6	9

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

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

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

लाइन प्रकार, हमारे मामले में ठोस
लाइन चौड़ाई, हमारे मामले में 1px
लाइन का रंग, हमारे मामले में नीला

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

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

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

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

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

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

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

पंक्तियों में वैकल्पिक रंगों के साथ तालिका
1	2	3	4	5
1	2	3	4	5
1	2	3	4	5

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

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

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

तालिका (रंग: हरा ...?)

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

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

बॉक्स 1

पैरामीटर cellspacing= 1

पैरामीटर cellspacing= 2

पैरामीटर cellspacing= 3

यह विकल्प पहले की तुलना में सरल है, लेकिन, दुर्भाग्य से, इंटरनेट एक्सप्लोरर और नेटस्केप द्वारा इसकी व्याख्या नहीं की जाती है।

बॉक्स 3

<टेबल बॉर्डर \u003d "0" सेलस्पेसिंग \u003d "0" सेलपैडिंग \u003d "0"\u003e

	यह कैसा दिखता है

यदि दो पिछले विकल्प अलग-अलग ब्राउज़रों में फ़्रेम प्रदर्शित करते हैं, भले ही अलग-अलग मोटाई के हों, लेकिन तीसरे उदाहरण की व्याख्या आम ब्राउज़र इंटरनेट एक्सप्लोरर 4.x / 5.x / 6, नेटस्केप 4.x / 6.x और ओपेरा 6 से की जाती है। बॉर्डर की मोटाई के मामले में x समान है। मुझे यह उल्लेख करना उचित है कि नेटस्केप 4.x एक वेब डिजाइनर के लिए सबसे अधिक समस्याग्रस्त है।
लेकिन चलो तीसरे विकल्प पर करीब से नज़र डालें। यह नीचे प्रस्तुत 9 कोशिकाओं की एक तालिका पर आधारित है:

1	2	3
4		6
7	8	9

5 वें को छोड़कर सभी कोशिकाएं काले रंग में रंगी जाती हैं, पांचवीं - सफेद रंग में। इस मामले में तालिका की पृष्ठभूमि ही महत्वपूर्ण नहीं है। फिर पैरामीटर 1-3 और 7-9 कोशिकाओं में जोड़ा जाता है ऊँचाई \u003d "1"। तदनुसार, कोशिकाओं 1, 3, 4, 6, 7, 9 को एक पिक्सेल चौड़ा किया जाता है ( चौड़ाई \u003d "1")। मध्य कोशिकाओं 2, 5, 8 को यथासंभव चौड़ा किया जाता है ( चौड़ाई \u003d "100%")। चाल यह है कि एक तथाकथित "संशोधित मालेविच वर्ग" को कोशिकाओं में जोड़ा जाता है, जिसे संकीर्ण या पतला होना चाहिए, या दोनों - 1x1 आकार की एक पारदर्शी GIF फ़ाइल, अन्यथा वांछित प्रभाव प्राप्त नहीं किया जाएगा।

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

अगली कार्यशाला	\u003e\u003e प्रकाशन की तैयारी
पिछली कार्यशाला

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

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

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

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))। )

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

जो फ्रेम की मोटाई निर्धारित करता है।

उदाहरण 1 दिखाता है कि कोशिकाओं के चारों ओर एक बॉर्डर कैसे बनाया जाए।

उदाहरण 1. एक मेज पर एक फ्रेम जोड़ना

बॉर्डर की मोटाई

Cheburashka

क्रोकोडाइल गेना

Shapoklyak

इस तरह से बनाए गए फ्रेम अलग-अलग ब्राउज़रों में उनकी उपस्थिति में थोड़ा भिन्न होते हैं।

चित्र: 1. सीमा पैरामीटर का उपयोग करके प्राप्त फ्रेम

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

, और फिर वह अपने दम पर सब कुछ करेगा (उदाहरण 2)।

उदाहरण 2. टेबल बॉर्डर बनाने के लिए बॉर्डर-पतन का उपयोग करना

फ्रेम निर्माण

0	एक्स	एक्स
0	0	एक्स
एक्स	एक्स	0

सीमा-ढहने के पैरामीटर को जोड़ने के साथ-साथ इसके बिना तालिका सीमाओं के बीच का अंतर अंजीर में दिखाया गया है। 2।

ए

ख

चित्र: 2. सीमा-कोलेपेस विशेषता का उपयोग करते समय तालिका देखें

अंजीर में। 2a डिफ़ॉल्ट तालिका फ़्रेम दिखाता है। ध्यान दें कि तालिका के भीतर, सभी लाइनें चौड़ाई से दोगुनी हैं। सीमा-ढहने वाले पैरामीटर को जोड़ने से यह सुविधा समाप्त हो जाती है, और सभी लाइनों की मोटाई समान हो जाती है (छवि 2 बी)।

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

, हम वांछित फ्रेम (उदाहरण 3) के साथ समाप्त हो जाएंगे। स्थिरता के लिए, सभी मामलों में सीमा की शैली, मोटाई और रंग से मेल खाने के लिए देखभाल की जानी चाहिए।

उदाहरण 3. बॉर्डर विशेषता का उपयोग करके एक टेबल के लिए बॉर्डर बनाना

फ्रेम निर्माण

0	एक्स	एक्स
0	0	एक्स
एक्स	एक्स	0

इस पद्धति में विविधताएं हो सकती हैं, उदाहरण के लिए, चयनकर्ता के लिए हम केवल दाईं ओर और नीचे, और एक सीमा जोड़ते हैं

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

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

या ... फिर तालिका कोशिकाएं प्राप्त की जाती हैं, जैसे कि अपने आप के बीच एक कटर द्वारा काटा जाता है (उदाहरण 4)।

उदाहरण 4. किसी तालिका में अदृश्य सीमाओं का उपयोग करना

सीमाएँ बनाना

0	एक्स	एक्स
0	0	एक्स
एक्स	एक्स	0

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

उदाहरण 4 का परिणाम नीचे दिखाया गया है।

चित्र: 3. पृष्ठभूमि के रंग से मेल खाती सीमाओं का दृश्य

श्रेणियाँ

लोकप्रिय