CSS: तालिका डिजाइन। दर्ता उदाहरणहरू

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

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

तालिका सीमाना

CSS तालिका शैली डिजाइन सधैं एक सीमाना (फ्रेम) एउटा खेल समावेश छ। सबै पूर्वनिर्धारित टेबल आकृति फ्रेम छैन। छ, यो 0 पिक्सेल बराबर छ। तर यस सम्पत्ति सीमा द्वारा सही हुन सक्छ।

तपाईं सम्पूर्ण तालिका लागि बाहिरी फ्रेम निर्दिष्ट गर्न सक्नुहुन्छ:

तालिका {सीमा: 3px ठोस कालो; }

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

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

मोटाई र रंग, तपाईं कुनै पनि निर्दिष्ट गर्न सक्नुहुन्छ। कक्षहरू splicing जब कि सीमाहरु दुगुना छैन मनमा राख्नुहोस्।

शब्द एक ठोस लगातार दर्ता सङ्केत गर्छ। तपाईं अन्य मानहरू निर्दिष्ट गर्न सक्नुहुन्छ।

यो भन्दा सामान्यतः यसलाई थप आकर्षक देखिन्छ रूपमा, ठोस फ्रेम प्रयोग गरिन्छ र साइटको मुख्य सामग्री ध्यान विचलित छैन।

सीमा सम्पत्ति बोर्ड पनि निर्दिष्ट गर्न सक्नुहुन्छ। सीमा मात्र बायाँ वा दायाँ छेउमा, माथि, तल लागि सेट गर्न सकिन्छ। किनभने केही अवस्थामा यो पटक सम्पूर्ण तालिका लागि फ्रेम एउटा सम्भाव्य विकल्प छ।

तालिका {सीमा शीर्ष: 1px गाढा रातो; }

त्यसैले तपाईं मात्र तालिकाको शीर्ष लागि फ्रेम सेट गर्न सक्नुहुन्छ। त्यस्तै कुनै पनि अन्य दल, सट्टा बस शीर्ष लेख्न: दायाँ, बायाँ वा तल।

तालिका हेडर

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

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

तपाईं शीर्षक र सम्पत्ति क्याप्सन-पक्ष (शीर्ष वा तल) को स्थान निर्दिष्ट गर्न सक्नुहुन्छ। बायाँ aligning वा दायाँ सम्पत्ति पाठ द्वारा परिभाषित गरिएको छ।

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

तालिका को पृष्ठभूमि कुनै पनि रंग वा ढाँचा हुन सक्छ। रंग विशेषता पृष्ठभूमि रङ सेट गर्छ। गुण पूर्णतया बोलीमा प्रयोगका अनुरूप को नाम। यो धेरै पटक भण्डारण सुविधा।

रंग नाम, र विभिन्न इन्कोडिङलाई रूपमा निर्दिष्ट गर्न सकिन्छ। साथै, तपाईं निम्न निर्दिष्ट गर्न सक्नुहुन्छ:

• पारदर्शी - पारदर्शी।
• हकदार - रंग अभिभावक तत्व को कि जस्तै हो।
• प्रारम्भिक - पूर्वनिर्धारित।

पारदर्शिता संग विकल्प सीएसएस फाइल पाठ सबै टेबल एक रंग मा छन् ती अवस्थामा प्रयोग गर्न सकिन्छ, तर यो मामला मा कुनै आवश्यकता छ।

साथै, पृष्ठभूमि छवि हुन सक्छ। शैली निर्धारित पृष्ठभूमि छवि सम्पत्ति, यो गर्न। बाटो यो हो:

URL ( 'URL')

फाइलमा बाटो नातेदार वा निरपेक्ष या त हुन सक्छ।

थप जटिल भरण एक ढाल संग गर्न सकिन्छ:

• रैखिक-ढाल ();
• रेडियल-ढाल ();
• दोहरो-रैखिक-ढाल () र दोहरो-रेडियल-ढाल () - ढाल बारम्बार।

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

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

को बैकल्पिक साथै, र तपाईं एक विशेष स्तम्भ वा पङ्क्ति संख्या निर्दिष्ट गर्न सक्नुहुन्छ। यो जस्तै उदाहरणका लागि:

• tr: nth-बच्चा (पनि) {...} - इन्टरलेस्ड निर्दिष्ट;
• tr: nth-बच्चा (1) {...} - एक विशेष पंक्ति को गुण को संकेत;
• td: nth-बच्चा (पनि) {...} - स्तम्भहरू एकान्तरण एक संकेत;
• td: nth-बच्चा (1) {...} - एक विशेष स्तम्भ को गुण को एक संकेत।

यसबाहेक अनुक्रम र संख्या निर्दिष्ट गर्न सकिन्छ - पहिलो (td: प्रथम बच्चा) वा अन्तिम (td: अन्तिम बच्चा)।

कक्षहरू बीच अंतर

CSS मा, टेबल डिजाइन तपाईं कक्षहरू बीच स्पेस हटाउन अनुमति दिन्छ। पूर्वनिर्धारित तिनीहरूले छन्। उदाहरणका लागि, तपाईं सीमाहरु बीच दूरी सेट बिना तालिकामा फ्रेम सेट भने, यसलाई यहाँ यो परिणाम हुनेछ।

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

सीमा पतन: पतन

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

सीमा पतन: अलग

तर यस्तो कार्य यो कक्षहरू विभाजन गर्न आवश्यक छ भनेर संकेत गर्छ हुनेछ। यो आफ्नो शेयर थियो, संकेत अतिरिक्त सम्पत्ति:

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

तपाईं पङ्क्तिहरू र स्तम्भहरू बीच एउटा फरक दूरी निर्दिष्ट गर्न चाहनुहुन्छ भने, यो दुई कुरा संकेत गर्छ:

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

ब्राउजर मा फरक

को CSS मा डिजाइन टेबल ब्राउजर आधारमा, फरक लाग्न सक्छ भनेर मनमा राख्नुहोस्। विशेष गरी खराब भनेर CSS मा नवाचारै समर्थित छैन, पुरानो संस्करण संग मामला छ।

माथिको डिजिटल मान गर्न फ्रेम thicknesses एउटा उदाहरण हो।

यो उदाहरणका लागि, अचल लागि फ्रेम को मोटाई।

सीमाना शैलीहरू पनि निकै फरक।

तसर्थ, विकास सधैं फरक ब्राउजर मा परिणाम हेर्नुहोस्।

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

धेरै विकसित विकासकर्ताहरूले, ब्राउजर आधारमा पूर्ण बिभिन्न CSS फाइलहरू जडान गर्न सक्नुहुन्छ। र कसैले प्रत्येक एक चेक वा केही खास शैली (वर्ग) बनाउँछ।

सबैभन्दा समस्या छाया बाट उत्पन्न।

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

दर्ता एकदम अंतर रहन्थ्यो गर्न सकिन्छ। यो सबै पुरा साइट र यसको डिजाइन मा निर्भर गर्दछ। सबै संयुक्त र variegated रंग गर्नुपर्छ। पनि यो एक ठूलो भूमिका र स्वाद विकासकर्ता बनाउँछ। सौन्दर्य को अर्थमा सबै फरक छ।

हामी विभिन्न टेबल केही उदाहरण दिनुहोस्। यो आंकडा माथि झुकाव को प्रयोग देखाउँछ र पृष्ठभूमि रङ र सीमाना खेल्न।

धेरै आँखा प्रयोगकर्ता कटौती हुने छैन सुन्दर चिटिक्क डिजाइन को रोचक उदाहरण हुनेछ। यो embodiment लगभग कुनै पनि अवस्थामा उपयुक्त छ।

किनाराको गोलाकार गर्न सकिन्छ। यो धेरै राम्रो देखिन्छ।

निष्कर्षमा

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

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

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