सीएसएस: तालिका डिजाइन। पंजीकरण के उदाहरण

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

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

तालिका सीमा

सीएसएस तालिका शैली के डिजाइन हमेशा एक सीमा (फ्रेम) के साथ एक खेल में शामिल है। सभी डिफ़ॉल्ट टेबल आकृति फ्रेम नहीं हैं। कि है, यह 0 पिक्सल के बराबर है। लेकिन इस संपत्ति सीमा से ठीक किया जा सकता है।

आप पूरे तालिका के लिए बाहरी फ्रेम निर्दिष्ट कर सकते हैं:

तालिका {बॉर्डर: 3px ठोस काले; }

साइट इस शैली का उपयोग करता है पर सभी टेबल पर इस लाइन के लिए धन्यवाद काले फ्रेम है। नोट केवल सीमा किनारों पर, लेकिन तालिका के अंदर नहीं है। सेल लाइनों और फ्रेम के लिए अन्यथा निर्दिष्ट।

वें, td {सीमा: 3px ठोस काले;}

मोटाई और रंग, आप किसी भी निर्दिष्ट कर सकते हैं। जब कोशिकाओं splicing ध्यान रखें कि सीमाओं दोगुनी नहीं कर रहे हैं।

शब्द एक ठोस निरंतर पंजीकरण को दर्शाता है। आप अन्य मान निर्दिष्ट कर सकते हैं।

यह सबसे अधिक, ठोस फ्रेम प्रयोग किया जाता है के रूप में यह और अधिक आकर्षक लग रहा है और साइट की मुख्य सामग्री से ध्यान विचलित नहीं करता है।

सीमा संपत्ति बोर्ड में भी निर्दिष्ट किया जा सकता। सीमा केवल ऊपर, नीचे के लिए सेट किया जा सकता, बाएं या दाएं ओर। क्योंकि कुछ मामलों में यह एक ही बार में पूरे तालिका के लिए फ्रेम के साथ एक व्यवहार्य विकल्प नहीं है।

तालिका {बॉर्डर-शीर्ष: 1px ठोस लाल; }

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

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

टेबल हैडर टैग <शीर्षक> का उपयोग कर निर्दिष्ट किया जा सकता। इस टैग को ठीक करने के लिए बहुत सारी प्रॉपर्टी रजिस्टर करने के लिए सीएसएस में हो सकता है। क्योंकि यह तत्व जिस तरह से आप चाहते हैं छल के लिए संभव है सीएसएस तालिका डिजाइन अच्छा है।

इस शीर्षक (जैसे कि "तालिका 1" के रूप में) किताबों में एक मानक के रूप में एक ही तरीके से प्रदर्शित किया जाता है।

आप शीर्षक और संपत्ति कैप्शन-किनारा (ऊपर या नीचे) का स्थान निर्दिष्ट कर सकते हैं। बाएं संरेखित या सही संपत्ति पाठ के अनुरूप द्वारा परिभाषित किया गया है।

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

तालिका की पृष्ठभूमि किसी भी रंग या पैटर्न हो सकता है। रंग एक संपत्ति पृष्ठभूमि रंग सेट करता है। गुण भाषण में उपयोगों के साथ पूरी तरह अनुरूप के नाम। यह कई बार भंडारण की सुविधा।

रंग का नाम, और विभिन्न एन्कोडिंग के रूप में निर्दिष्ट किया जा सकता। इसके अलावा, आप निम्नलिखित निर्दिष्ट कर सकते हैं:

• पारदर्शी - पारदर्शी।
• वारिस - रंग पेरेंट तत्व की तरह ही है।
• प्रारंभिक - डिफ़ॉल्ट।

पारदर्शिता के साथ विकल्प उन मामलों में जहाँ सीएसएस फ़ाइल में पाठ में सभी तालिकाओं एक रंग में बना रहे हैं में इस्तेमाल किया जा सकता है, लेकिन इस मामले में कोई जरूरत नहीं है।

इसके अलावा, पृष्ठभूमि एक छवि हो सकता है। शैली निर्धारित पृष्ठभूमि छवि संपत्ति में ऐसा करने के लिए। पथ इस तरह है:

यूआरएल ( 'यूआरएल')

फ़ाइल का पथ या तो रिश्तेदार या पूर्ण हो सकता है।

अधिक जटिल भरने एक ढाल के साथ किया जा सकता है:

• रेखीय-ढाल ();
• रेडियल-ढाल ();
• दोहरा रेखीय-ढाल () और दोहरा-रेडियल-ढाल () - ढाल दोहराया।

पृष्ठभूमि सेल

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

प्रत्यावर्तन के अलावा, और आप एक विशेष स्तंभ या पंक्ति की संख्या निर्दिष्ट कर सकते हैं। इस तरह उदाहरण के लिए:

• टीआर: n वें वाले बच्चे (भी) {...} - इंटरलेस्ड निर्दिष्ट;
• टीआर: n वें वाले बच्चे (1) {...} - किसी विशेष पंक्ति के गुणों का संकेत;
• टीडी: n वें वाले बच्चे (भी) {...} - कॉलम बारी का संकेत;
• टीडी: n वें वाले बच्चे (1) {...} - किसी खास कॉलम के गुणों का एक संकेत।

अनुक्रम और संख्या निर्दिष्ट किया जा सकता इसके अलावा - पहले (टीडी: पहली बच्चे) या पिछले (टीडी: पिछले वाले बच्चे)।

कोशिकाओं के बीच की खाई

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

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

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

लेकिन यह भी होता है कि दूरी, इसके विपरीत, वृद्धि की जानी चाहिए। इसके अलावा, अंतराल के आकार स्तंभों के बीच और पंक्तियों के बीच के रूप में निर्दिष्ट किया जा सकता। संकेत मिलता है कि एक मूल्य (बजाय पतन):

सीमा-पतन: अलग

लेकिन ऐसी कार्रवाई से संकेत मिलता है कि यह कोशिकाओं को अलग करने के लिए आवश्यक है। के रूप में यह उनकी हिस्सेदारी थी, अतिरिक्त संपत्ति संकेत दिया:

सीमा-दूरी: 20px।

आप पंक्तियों और स्तंभों के बीच एक अलग दूरी निर्दिष्ट करने के लिए चाहते हैं, यह दो बातें इंगित करता है:

सीमा-दूरी: 10px20px।

ब्राउज़रों में अंतर

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

ऊपर डिजिटल मूल्यों के फ्रेम की मोटाई का एक उदाहरण है।

इस उदाहरण के लिए, स्थिरांक के लिए फ्रेम की मोटाई।

बॉर्डर शैलियां भी काफी अलग हैं।

इसलिए, विकास हमेशा अलग ब्राउज़रों में परिणाम देखें।

सीएसएस में डिजाइन टेबल ब्राउज़र का प्रकार की जाँच करने की सिफारिश की। विशेष रूप से प्रयोग किया जाता है बड़ी समस्या इंटरनेट एक्सप्लोरर के पुराने संस्करणों के साथ उपयोगकर्ताओं के लिए किया जाना है।

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

अधिकांश समस्याओं छाया से उत्पन्न होती हैं।

सीएसएस: तालिका स्वरूप उदाहरण

पंजीकरण काफी अलग किया जा सकता। यह सब पूरी साइट और इसकी डिजाइन पर निर्भर करता है। सभी संयुक्त और तरह तरह का रंग दिया जाना चाहिए। इसके अलावा यह एक महान भूमिका और स्वाद डेवलपर बनाता है। सुंदरता की नब्ज सब अलग है।

हम विभिन्न तालिकाओं के कुछ उदाहरण देते हैं। आंकड़ा ऊपर झुकाव के उपयोग से पता चलता है और पृष्ठभूमि रंग और सीमा के साथ खेलते हैं।

कई खूबसूरत साफ डिजाइन है कि आंख उन में कटौती नहीं करेगा की दिलचस्प उदाहरण होगा। इस अवतार लगभग किसी भी स्थिति में उचित है।

किनारों गोल बनाया जा सकता है। यह बहुत अच्छा लग रहा है।

निष्कर्ष

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

डिजाइन में मुख्य बात - प्रभाव के साथ यह अति न करें। सब कुछ कम मात्रा में किया जाना चाहिए। सबसे पहले, लेआउट प्रयोग और तुरंत अपने सभी ज्ञान का उपयोग करना चाहते। तालिका के परिणामस्वरूप oversaturated गुण हैं। इन त्रुटियों से बचने की कोशिश करें।

इसके अलावा, कुछ मानकों एक दूसरे के साथ हस्तक्षेप कर सकते हैं। उदाहरण के लिए, निर्दिष्ट करने के लिए कोई जरूरत नहीं है पृष्ठभूमि रंग , तालिका के जबकि अगर वहाँ अभी भी पृष्ठभूमि छवि है, जो निर्दिष्ट रंग ओवरलैप होगा निर्धारित है।