टेबल सीएसएस में बॉर्डर कैसे बनाएं

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

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

HTML मार्कअप

सीएसएस शैलियाँ

मेज़ (
बॉर्डर-स्पेसिंग: 0 10px;
फ़ॉन्ट-फ़ैमिली: "ओपन सेन्स", सेन्स-सेरिफ़;
फोंट की मोटाई: बोल्ड;
}
वां (
पैडिंग: 10px 20px;
पृष्ठभूमि: #56433डी;
रंग: #F9C941;
बॉर्डर-दाएँ: 2px ठोस;
फ़ॉन्ट-आकार: 0.9em;
}
वें: पहला बच्चा (
पाठ-संरेखण: बाएँ;
}
वें:अंतिम-बच्चा (
सीमा-दाएँ: कोई नहीं;
}
टीडी(
लंबवत-संरेखित करें: मध्य;
पैडिंग: 10px;
फ़ॉन्ट-आकार: 14px;
पाठ-संरेखण: केंद्र;
बॉर्डर-टॉप: 2px सॉलिड #56433D;
बॉर्डर-बॉटम: 2px सॉलिड #56433D;
बॉर्डर-राइट: 2px सॉलिड #56433D;
}
टीडी: पहला बच्चा (
बॉर्डर-बाएँ: 2px ठोस #56433D;
सीमा-दाएँ: कोई नहीं;
}
td:nth-child(2)(
पाठ-संरेखण: बाएँ;
}

इस तकनीक का उपयोग करके, आप प्रभावी ढंग से एक तालिका का उपयोग करके डिज़ाइन कर सकते हैं विपरीत रंग, जो आपकी साइट की रंग योजना में सामंजस्यपूर्ण रूप से फिट होगा।

HTML मार्कअप

सीएसएस शैलियाँ

मेज़ (

फ़ॉन्ट-आकार: 14px;
सीमा-पतन: पतन;
पाठ-संरेखण: केंद्र;
}
वें, टीडी: पहला बच्चा (
पृष्ठभूमि: #AFCDE7;
रंग सफेद;
पैडिंग: 10px 20px;
}
वें, टीडी (
बॉर्डर-शैली: ठोस;
बॉर्डर-चौड़ाई: 0 1px 1px 0;
बॉर्डर-रंग: सफ़ेद;
}
टीडी(
पृष्ठभूमि: #D8E6F3;
}

पाठ-संरेखण: बाएँ;
}

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

HTML मार्कअप
- उदाहरण 2 के समान।

सीएसएस शैलियाँ

मेज़ (
फ़ॉन्ट-फ़ैमिली: "ल्यूसिडा सैन्स यूनिकोड", "ल्यूसिडा ग्रांडे", सैन्स-सेरिफ़;
फ़ॉन्ट-आकार: 14px;
बॉर्डर-त्रिज्या: 10px;
बॉर्डर-स्पेसिंग: 0;
पाठ-संरेखण: केंद्र;
}
वां (
पृष्ठभूमि: #BCEBDD;
रंग सफेद;
टेक्स्ट-छाया: 0 1px 1px #2D2020;
पैडिंग: 10px 20px;
}
वें, टीडी (
बॉर्डर-शैली: ठोस;
बॉर्डर-चौड़ाई: 0 1px 1px 0;
बॉर्डर-रंग: सफ़ेद;
}
वें: पहला बच्चा, टीडी: पहला बच्चा (
पाठ-संरेखण: बाएँ;
}
वें: पहला बच्चा (

}
वें:अंतिम-बच्चा (

सीमा-दाएँ: कोई नहीं;
}
टीडी(
पैडिंग: 10px 20px;
पृष्ठभूमि: #F8E391;
}
tr:अंतिम-बच्चा td:पहला-बच्चा (
सीमा-त्रिज्या: 0 0 0 10px;
}
tr:अंतिम-बच्चा td:अंतिम-बच्चा (
सीमा-त्रिज्या: 0 0 10px 0;
}
tr td:अंतिम-बच्चा (
सीमा-दाएँ: कोई नहीं;
}

4. अलग-अलग कक्षों वाली तालिका

HTML मार्कअप

- उदाहरण 2 के समान।

सीएसएस शैलियाँ

मेज़ (
फ़ॉन्ट-फ़ैमिली: "ल्यूसिडा सैन्स यूनिकोड", "ल्यूसिडा ग्रांडे", सैन्स-सेरिफ़;
पाठ-संरेखण: बाएँ;
सीमा-संक्षेप: अलग;
बॉर्डर-स्पेसिंग: 5px;
पृष्ठभूमि: #ECE9E0;
रंग: #656665;
बॉर्डर: 16px ठोस #ECE9E0;
बॉर्डर-त्रिज्या: 20px;
}
वां (
फ़ॉन्ट-आकार: 18px;
पैडिंग: 10px;
}
टीडी(
पृष्ठभूमि: #F5D7BF;
पैडिंग: 10px;
}

HTML मार्कअप

सीएसएस शैलियाँ

मेज़ (
फ़ॉन्ट-फ़ैमिली: "ल्यूसिडा सैन्स यूनिकोड", "ल्यूसिडा ग्रांडे", सैन्स-सेरिफ़;
पाठ-संरेखण: केंद्र;
सीमा-पतन: पतन;
बॉर्डर-स्पेसिंग: 5px;
पृष्ठभूमि: #E1E3E0;
बॉर्डर-त्रिज्या: 20px;
}
वां (
फ़ॉन्ट-आकार: 22px;
फ़ॉन्ट-भार: 300;
पैडिंग: 12px 10px;

रंग: #F56433;
}
tbody tr:nth-child(2) (
बॉर्डर-बॉटम: 2px सॉलिड #F56433;
}
टीडी(
पैडिंग: 10px;
रंग: #8डी8173;
}

HTML मार्कअप

सीएसएस शैलियाँ

मेज़ (
फ़ॉन्ट-फ़ैमिली: "ल्यूसिडा सैन्स यूनिकोड", "ल्यूसिडा ग्रांडे", सैन्स-सेरिफ़;
फ़ॉन्ट-आकार: 14px;
पाठ-संरेखण: बाएँ;
सीमा-पतन: पतन;
बॉर्डर-त्रिज्या: 20px;
बॉक्स-छाया: 0 0 0 10px #F2906B;
रंग: #452F21;
}
वां (
पैडिंग: 10px 8px;
पृष्ठभूमि: सफ़ेद;
}
तालिका वां: पहला बच्चा (
बॉर्डर-शीर्ष-बाएँ-त्रिज्या: 20px;
}
तालिका वें: अंतिम बच्चा (
बॉर्डर-टॉप-राइट-त्रिज्या: 20px;
}
टीडी(
बॉर्डर-टॉप: 10px ठोस #F2906B;
पैडिंग: 8px;
पृष्ठभूमि: सफ़ेद;
}
तालिका टीडी: पहला बच्चा (
बॉर्डर-बॉटम-लेफ्ट-रेडियस: 20px;
}
तालिका टीडी: अंतिम बच्चा (
बॉर्डर-नीचे-दाएं-त्रिज्या: 20px;
}

तालिका डिज़ाइन में एक ऊर्ध्वाधर ज़ेबरा आपको स्तंभों पर जोर देने की अनुमति देगा, और एक पंक्ति पर मँडराते समय प्रभाव ऐसी तालिका में आकर्षण जोड़ देगा।

HTML मार्कअप

सीएसएस शैलियाँ

मेज़ (
बॉर्डर-स्पेसिंग: 0;
रिक्त-कोशिकाएँ: छिपाएँ;
}
टीडी(
पैडिंग: 10px 20px;
पाठ-संरेखण: केंद्र;

संक्रमण: सभी 0.5s रैखिक;
}
टीडी: पहला बच्चा (
पाठ-संरेखण: बाएँ;
रंग: #3डी3511;
फोंट की मोटाई: बोल्ड;
}
वां (
पैडिंग: 10px 20px;
रंग: #3डी3511;
बॉर्डर-बॉटम: 1px सॉलिड #F4EEE8;
सीमा-शीर्ष-बाएँ-त्रिज्या: 10px;
बॉर्डर-टॉप-राइट-त्रिज्या: 10px;
}
td:nth-child(सम) (
पृष्ठभूमि: #F6D27E;
}
td:nth-child(विषम) (
पृष्ठभूमि: #D1C7BF;
}
वां:nवां-बच्चा(सम) (
पृष्ठभूमि: #F6D27E;
}
वां:nवां-बच्चा(विषम) (
पृष्ठभूमि: #D1C7BF;
}
.राउंड-टॉप (
बॉर्डर-शीर्ष-बाएँ-त्रिज्या: 5px;
}
।गोल बटन (
बॉर्डर-बॉटम-लेफ्ट-रेडियस: 5px;
}
tr:होवर td(
पृष्ठभूमि: #D1C7BF;
फोंट की मोटाई: बोल्ड;
}

HTML मार्कअप

सीएसएस शैलियाँ

मेज़ (
फ़ॉन्ट-फ़ैमिली: "ल्यूसिडा सैन्स यूनिकोड", "ल्यूसिडा ग्रांडे", सैन्स-सेरिफ़;
सीमा-पतन: पतन;
रंग: #686461;
}
कैप्शन (
पैडिंग: 10px;
रंग सफेद;
पृष्ठभूमि: #8FD4C1;
फ़ॉन्ट-आकार: 18px;
पाठ-संरेखण: बाएँ;
फोंट की मोटाई: बोल्ड;
}
वां (
बॉर्डर-बॉटम: 3px सॉलिड #B9B29F;
पैडिंग: 10px;
पाठ-संरेखण: बाएँ;
}
टीडी(
पैडिंग: 10px;
}
tr:nth-child(विषम) (
पृष्ठभूमि: सफ़ेद;
}
tr:nth-child(सम) (
पृष्ठभूमि: #E8E6D1;
}

HTML मार्कअप

सीएसएस शैलियाँ

टेबल_कोल(
फ़ॉन्ट-फ़ैमिली: "ल्यूसिडा सैन्स यूनिकोड", "ल्यूसिडा ग्रांडे", सैन्स-सेरिफ़;
फ़ॉन्ट-आकार: 14px;
चौड़ाई: 660px;
पृष्ठभूमि: सफ़ेद;
पाठ-संरेखण: बाएँ;
सीमा-पतन: पतन;
रंग: #3ई4347;
}
.table_col th:first-child, .table_col td:first-child (
रंग: #F5F6F6;
सीमा-बाएँ: कोई नहीं;
}
.table_col वें(
फ़ॉन्ट-वजन: सामान्य;
बॉर्डर-बॉटम: 2px सॉलिड #F5E1A6;


पैडिंग: 8px 10px;
}
.table_col td(
बॉर्डर-दाएं: 20px ठोस सफेद;
बॉर्डर-बाएं: 20px ठोस सफेद;
पैडिंग: 12px 10px;
रंग: #8बी8ई91;
}

HTML मार्कअप

सीएसएस शैलियाँ

टेबल_ब्लर(
पृष्ठभूमि: #f5ffff;
सीमा-पतन: पतन;
पाठ-संरेखण: बाएँ;
}
.table_blur वां (
बॉर्डर-टॉप: 1px ठोस #777777;

बॉक्स-छाया: इनसेट 0 1px 0 #999999, इनसेट 0 -1px 0 #999999;
पृष्ठभूमि: रैखिक-ढाल(#9595बी6, #5ए567एफ);
रंग सफेद;
पैडिंग: 10px 15px;
स्थिति: सापेक्ष;
}
.table_blurवें:बाद में (
सामग्री: "";
प्रदर्शन क्षेत्र;
स्थिति: निरपेक्ष;
बाएँ: 0;
शीर्ष: 25%;
ऊंचाई: 25%;
चौड़ाई: 100%;
पृष्ठभूमि: रैखिक-ढाल(आरजीबीए(255, 255, 255, 0), आरजीबीए(255,255,255,.08));
}
.table_blur tr:nth-child(odd) (
पृष्ठभूमि: #ebf3f9;
}
.table_blur वां: पहला बच्चा (
बॉर्डर-बाएँ: 1px ठोस #777777;
बॉर्डर-बॉटम: 1px सॉलिड #777777;
बॉक्स-छाया: इनसेट 1px 1px 0 #999999, इनसेट 0 -1px 0 #999999;
}
.table_blur वें: अंतिम बच्चा (
बॉर्डर-दाएँ: 1px ठोस #777777;
बॉर्डर-बॉटम: 1px सॉलिड #777777;
बॉक्स-छाया: इनसेट -1px 1px 0 #999999, इनसेट 0 -1px 0 #999999;
}
.टेबल_ब्लर टीडी (
बॉर्डर: 1px ठोस #e3eef7;
पैडिंग: 10px 15px;
स्थिति: सापेक्ष;
संक्रमण: सभी 0.5 सहजता;
}
.टेबल_ब्लर टीबॉडी: होवर टीडी (
रंग: पारदर्शी;
टेक्स्ट-छाया: 0 0 3px #a09f9d;
}
.टेबल_ब्लर टीबॉडी: होवर टीआर: होवर टीडी (
रंग: #444444;
पाठ-छाया: कोई नहीं;
}

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

टेबल की चौड़ाई

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

उदाहरण 1: तालिका की चौड़ाई प्रतिशत में

टेबल (चौड़ाई: 100%; ) .tbl-मध्यम (चौड़ाई: 60%; ) .tbl-छोटा (चौड़ाई: 200px; )

इस उदाहरण में, सभी तालिकाओं पर 100% की चौड़ाई लागू की जाती है। फिर, कक्षाएं पहले से बनाई गई कक्षा का उपयोग करके चयनित तालिकाओं के लिए चौड़ाई निर्धारित करने में मदद करती हैं। तालिका को 200 पिक्सेल की चौड़ाई देने के लिए, आपको तत्व को जोड़ना होगा

टेबल संरेखण

प्रारंभ में, कोई भी तालिका ब्राउज़र विंडो के बाएँ किनारे पर स्थित होती है। आप इसे केंद्र में संरेखित कर सकते हैं, जब तक कि तालिका संपूर्ण उपलब्ध क्षेत्र, दूसरे शब्दों में, 100% से कम न ले ले। ऐसा करने के लिए, आपको ऑटो मान के साथ मार्जिन प्रॉपर्टी का उपयोग करके तालिका शैली में इंडेंट जोड़ना चाहिए, जैसा कि उदाहरण 2 में दिखाया गया है।

उदाहरण 2: एक तालिका को इसके साथ संरेखित करना मार्जिन का उपयोग करना

इस उदाहरण में, पृष्ठ पर सभी तालिकाएँ केंद्र संरेखण पर सेट हैं।

पृष्ठभूमि का रंग

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

उदाहरण 3: पृष्ठभूमि का रंग

इस उदाहरण का परिणाम चित्र में दिखाया गया है। 1.

चावल। 1. पृष्ठभूमि का रंग बदलें

यदि हम एक ज़ेबरा पैटर्न बनाना चाहते हैं, जो विभिन्न रंगों की वैकल्पिक रेखाओं को दिया गया नाम है, तो हमें :nth-child छद्म-वर्ग का उपयोग करना चाहिए, इसे tr चयनकर्ता में जोड़ना चाहिए। ज़ेबरा को केवल तालिका के मुख्य भाग तक विस्तारित करने के लिए, न कि उसके शीर्षलेख तक, हम तत्वों का उपयोग करके उन्हें एक दूसरे से अलग करते हैं और (उदाहरण 4).

उदाहरण 4: ज़ेबरा बनाना

इस उदाहरण का परिणाम चित्र में दिखाया गया है। 2.

चावल। 2. ज़ेबरा

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

इसी प्रकार, पंक्तियों को नहीं, बल्कि स्तंभों को रंग से हाइलाइट किया जाता है; इसके लिए आपको tbody चयनकर्ता td:nth-child(even) का उपयोग करना चाहिए।

कोशिकाओं के अंदर मार्जिन

मार्जिन सेल बॉर्डर और उसकी सामग्री के बीच की दूरी है। मार्जिन के बिना, तालिका में पाठ फ्रेम से "चिपक जाता है", जिससे इसकी धारणा ख़राब हो जाती है, लेकिन मार्जिन जोड़ने से पाठ की पठनीयता में सुधार होता है। इस उद्देश्य के लिए, पैडिंग स्टाइल प्रॉपर्टी का उपयोग किया जाता है, जो टीडी या वें चयनकर्ता के साथ काम करता है, जैसा कि ऊपर उदाहरण 3 और 4 में दिखाया गया है। आमतौर पर, एक एकल मान निर्दिष्ट किया जाता है, जो तब सेल की सामग्री के आसपास खाली जगह निर्दिष्ट करता है सभी पक्ष एक साथ. जब आपको अलग-अलग फ़ील्ड को लंबवत (पहला मान) और क्षैतिज रूप से (दूसरा मान) सेट करने की आवश्यकता होती है तो दो मान लिखे जाते हैं।

कोशिकाओं के बीच की दूरी

सेल्स के बीच एक छोटी सी खाली जगह होती है, जो तब तक दिखाई नहीं देती जब तक कि आप सेल्स के लिए कोई बॉर्डर सेट न कर दें पृष्ठभूमि का रंग. यह रिक्ति प्रारंभ में 2px है और इसे तालिका चयनकर्ता (उदाहरण 5) में जोड़कर बॉर्डर-स्पेसिंग प्रॉपर्टी का उपयोग करके बदला जा सकता है।

उदाहरण 5: बॉर्डर-स्पेसिंग का उपयोग करना

तालिका (बॉर्डर-स्पेसिंग: 3px; / * कोशिकाओं के बीच का स्थान * /) हेड वें (पृष्ठभूमि: #e08156; / * हेडर पृष्ठभूमि रंग * / रंग: # 333; / * टेक्स्ट रंग * /) td, th (पैडिंग: 5px) ; /* कोशिकाओं में फ़ील्ड्स */ पृष्ठभूमि: #4सी715बी; /* कोशिकाओं का पृष्ठभूमि रंग */ रंग: #f5e8d0;

इस शैली को किसी भी तालिका में जोड़ने पर हमें चित्र में दिखाया गया परिणाम मिलता है। 3.

चावल। 3. कोशिकाओं के बीच की दूरी के साथ तालिका दृश्य

यदि बॉर्डर-पतन गुण को पतन मान के साथ तालिका में जोड़ा जाता है, तो बॉर्डर-स्पेसिंग को नजरअंदाज कर दिया जाता है, क्योंकि कोशिकाओं के बीच अब कोई दूरी नहीं है।

सीमाएँ और फ़्रेम

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

उदाहरण 6: टेबल बॉर्डर बनाते समय बॉर्डर-संक्षिप्त संपत्ति का उपयोग करना

बॉर्डर-संक्षिप्त गुण के साथ और उसके बिना टेबल बॉर्डर के बीच का अंतर चित्र में दिखाया गया है। 4.

चावल। 4. बॉर्डर-पतन का उपयोग करते समय तालिका दृश्य

चित्र में. चित्र 4ए डिफ़ॉल्ट तालिका फ़्रेम दिखाता है। कृपया ध्यान दें कि तालिका के अंदर सभी पंक्तियों की मोटाई दोगुनी है। बॉर्डर-पतन जोड़ने से यह सुविधा हट जाती है, और सभी रेखाओं की मोटाई समान हो जाती है (चित्र 4बी)।

पंक्तियों का कोशिकाओं के सभी तरफ होना जरूरी नहीं है, लेकिन एक पंक्ति या स्तंभ को दूसरे से अलग करने के लिए डिज़ाइन किया जा सकता है। ऐसा करने के लिए, हम बॉर्डर-बॉटम, बॉर्डर-लेफ्ट और अन्य समान गुणों का उपयोग करते हैं। तत्वों पर बॉर्डर लागू करें , , और यह संभव नहीं है, इसलिए हम उन्हें तालिका और टीडी चयनकर्ता (उदाहरण 7) में जोड़ते हैं।

उदाहरण 7. रेखाओं के बीच की रेखाएँ

इस उदाहरण का परिणाम चित्र में दिखाया गया है। 5.

चावल। 5. क्षैतिज रेखाओं वाली तालिका

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

उदाहरण 8: सेल सामग्री को क्षैतिज रूप से संरेखित करना

इस उदाहरण में, सामग्री बाईं ओर संरेखित है, और सामग्री - केंद्र में। उदाहरण का परिणाम नीचे दिखाया गया है (चित्र 6)।

चावल। 6. कोशिकाओं में पाठ को संरेखित करना

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

उदाहरण 9. सेल सामग्री को लंबवत रूप से संरेखित करना

इस उदाहरण में, टेक्स्ट शीर्ष किनारे पर संरेखित है। उदाहरण का परिणाम चित्र में दिखाया गया है। 7.

पाठ का उद्देश्य:तालिका गुणों और सीएसएस तालिका लेआउट सिद्धांतों का परिचय

आइए बुनियादी सीएसएस तालिका गुणों को देखें

सीमा

संपत्ति को एक में माना जाता है और इसमें एक साथ कई संपत्तियां शामिल होती हैं:

• झालर की शैली
• सीमा चौड़ाई
• सीमा रंग

एक सामान्य नियम भी है:

तालिका.पतन( सीमा-पतन:पतन; ) तालिका.पृथक(सीमा-पतन:अलग; )

परिणाम:

चौड़ाई और ऊंचाई
(टेबल की ऊंचाई और चौड़ाई)

मान:

उदाहरण:

पाठ संरेखित
(क्षैतिज संरेखण)

मान:

• केंद्र (केन्द्र)
• बाएँ (बाएँ किनारे के साथ)
• दायां (दायां किनारा)
• औचित्य (चौड़ाई)

ऊर्ध्वाधर- align
(ऊर्ध्वाधर संरेखण)

मान:

• आधार रेखा (आधार रेखा के साथ)
• उप (उपसूचकांक के रूप में)
• सुपर (सुपरइंडेक्स की तरह)
• शीर्ष (शीर्ष किनारे के साथ)
• मध्य (बीच में)
• नीचे (निचले किनारे के साथ)
• % (लाइन स्पेसिंग ऊंचाई का)

उदाहरण:

गद्दी
(तालिका में इंडेंट)

पृष्ठभूमि-रंग (पृष्ठभूमि)
रंग (पाठ रंग)

सीएसएस तालिका लेआउट

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

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

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

दो स्तंभों के साथ सारणीबद्ध लेआउट

सबसे आम लेआउट विधियों में से एक दो कॉलम है, अर्थात। पेज दो भागों में बंटा हुआ है.

उदाहरण:पृष्ठ के मुख्य फ़्रेम को दो कॉलम से सेट करें: पहला - एक निश्चित आकार के साथ, दूसरा - ब्राउज़र के शेष क्षेत्र के लिए। CSS शैलियों का उपयोग करके कार्य पूरा करें ()

परिणाम:

उदाहरण:तय करना अलग पृष्ठभूमिसेल (दो स्तंभों को एक दूसरे से अलग करने के लिए) और स्तंभों के बीच की दूरी निर्धारित करें (विभाजक)

/* बाएं सेल के लिए */ td#left( चौड़ाई:200px; पृष्ठभूमि: #ccc; बॉर्डर:1px ठोस काला; /* अस्थायी रूप से सीमाओं को चिह्नित करें */ ) /* दाएं सेल के लिए */ td#right( पृष्ठभूमि: #fc3; सीमा: 1px ठोस काला; /* अस्थायी रूप से सीमाओं को चिह्नित करें */ ) /* विभाजक के लिए */ #razdel(चौड़ाई: 10px; /* स्तंभों के बीच की दूरी */)

एक साथ:

विभाजक के लिए एक नया सेल जोड़ा गया है।
परिणाम:

उदाहरण:आसन्न कोशिकाओं की सीमा पर एक बिंदीदार रेखा का उपयोग करके तालिका स्तंभों के बीच एक विभाजक बनाएं

/* बाएँ सेल के लिए */ td#left( चौड़ाई:200px; पृष्ठभूमि: #ccc; /* बाएँ स्तंभ की पृष्ठभूमि का रंग */ /* नया */ बॉर्डर-दाएँ: 1px डैश्ड #000; /* दाएँ डैश्ड बॉर्डर विकल्प * / )

एक साथ:

परिणाम:

तीन स्तंभों के साथ तालिका लेआउट

एक निश्चित या "द्रव" लेआउट की अवधारणा है।

निश्चित सीएसएस लेआउट

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

उदाहरण:तीन कॉलम वाला पेज टेम्पलेट बनाएं. एक निश्चित तालिका लेआउट का उपयोग करें:

• बायां कॉलम - 150 पिक्सेल;
• मध्य स्तंभ - 400 पिक्सेल;

परिणाम:

रबर मॉकअप

• टेबल की चौड़ाई"रबर" डिज़ाइन का उपयोग करते समय ब्राउज़र विंडो की चौड़ाई के % के रूप में सेट करें. वह। जब ब्राउज़र विंडो बदलती है, तो तालिका का आकार भी बदल जाता है।
• सभी कोशिकाओं की चौड़ाईस्थापित किया जा सकता है प्रतिशत में.
• दूसरा विकल्प है कब कुछ कोशिकाओं की चौड़ाईस्थापित है प्रतिशत में, ए कुछ - पिक्सेल में.

महत्वपूर्ण:तालिका की चौड़ाई की परवाह किए बिना, सभी स्तंभों की चौड़ाई का योग 100% होना चाहिए।

उदाहरण:

• बायां स्तंभ - 20%;
• मध्य स्तंभ - 40%;
• दायां स्तंभ - 40%;

स्तंभों के लिए पृष्ठभूमि सेट करें और स्तंभों को बॉर्डर से दृष्टिगत रूप से अलग करें।

प्रदर्शन:

परिणाम:

आइए दूसरे विकल्प पर विचार करें, जब केंद्रीय कॉलम की चौड़ाई ब्राउज़र द्वारा स्वचालित रूप से चुनी जाती है; एक उदाहरण निम्नलिखित चित्र है:

उदाहरण:तीन कॉलम वाला पेज टेम्पलेट बनाएं. एक द्रव तालिका लेआउट का उपयोग करें:

• बायां कॉलम - 150 पिक्सेल;
• मध्य स्तंभ - 40%;
• दायां स्तंभ - 200 पिक्सेल;

स्तंभों के लिए पृष्ठभूमि सेट करें और स्तंभों को बॉर्डर से दृष्टिगत रूप से अलग करें।

परिणाम:
परिणाम लगभग वही होगा, केवल केंद्रीय स्तंभ के कारण "खिंचाव" होगा।

द्रव लेआउट में नेस्टेड तालिका का उपयोग करना

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

• मूल तालिका दो कक्षों के साथ बनाई गई है। तालिका की चौड़ाई प्रतिशत के रूप में निर्धारित की गई है.
• बाएँ सेल के लिए(पहला कॉलम) चौड़ाई निर्धारित है पिक्सेल में.
• सही सेल चौड़ाई(अन्य स्तंभों के लिए आधार) निर्दिष्ट नहीं है. इस सेल के अंदर एक दूसरी तालिका डाली गई है, जिसमें दो सेल भी शामिल हैं।
• नेस्टेड तालिका कोशिकाओं के लिए, चौड़ाई प्रतिशत के रूप में निर्धारित की गई है.
• आंतरिक टेबल की चौड़ाई 100 प्रतिशत पर सेट की जानी चाहिएताकि यह तालिका बाहरी तालिका में सभी खाली स्थान ले ले।
• केंद्र और दाएं कॉलम की चौड़ाई की गणना सेल की चौड़ाई के सापेक्ष की जाती है, न कि संपूर्ण बाहरी तालिका की।

उदाहरण:तीन कॉलम वाला पेज टेम्पलेट बनाएं. नेस्टेड तालिका के साथ द्रव लेआउट का उपयोग करें:

• बायां कॉलम - 150 पिक्सेल;
• मध्य स्तंभ - 60%;
• दायां स्तंभ - 40%;

कॉलम के लिए पृष्ठभूमि सेट करें.

प्रदर्शन:

1 2 3 यह सुनिश्चित करने के लिए कि तालिकाओं के बीच कोई "अंतर" नहीं है, सेलपैडिंग और सेलस्पेसिंग टैग विशेषताएँ यहाँ आवश्यक हैं। परिणाम: पाठ का उद्देश्य:तालिका गुणों और सीएसएस तालिका लेआउट सिद्धांतों का परिचय आइए बुनियादी सीएसएस तालिका गुणों को देखें सीमा संपत्ति को एक में माना जाता है और इसमें एक साथ कई संपत्तियां शामिल होती हैं: झालर की शैली सीमा चौड़ाई सीमा रंग एक सामान्य नियम भी है: तालिका.पतन( सीमा-पतन:पतन; ) तालिका.पृथक(सीमा-पतन:अलग; ) परिणाम: चौड़ाई और ऊंचाई (टेबल की ऊंचाई और चौड़ाई) मान: उदाहरण: पाठ संरेखित (क्षैतिज संरेखण) मान: केंद्र (केन्द्र) बाएँ (बाएँ किनारे के साथ) दायां (दायां किनारा) औचित्य (चौड़ाई) ऊर्ध्वाधर- align (ऊर्ध्वाधर संरेखण) मान: आधार रेखा (आधार रेखा के साथ) उप (उपसूचकांक के रूप में) सुपर (सुपरइंडेक्स की तरह) शीर्ष (शीर्ष किनारे के साथ) मध्य (बीच में) नीचे (निचले किनारे के साथ) % (लाइन स्पेसिंग ऊंचाई का) उदाहरण: गद्दी (तालिका में इंडेंट) पृष्ठभूमि-रंग (पृष्ठभूमि) रंग (पाठ रंग) सीएसएस तालिका लेआउट बड़ी संख्या में टेबल गुणों और उनके डिज़ाइन में विविधताओं के कारण, टेबल लंबे समय से वेब पेज लेआउट के लिए एक मानक रहे हैं। यदि आप तालिका की सीमाओं को अदृश्य बनाते हैं, तो आप इसकी अलग-अलग कोशिकाओं को पृष्ठ के अलग-अलग ब्लॉक के रूप में उपयोग कर सकते हैं: शीर्ष लेख, मेनू, पाद लेख, आदि। लेकिन यह पूरी तरह से सही नहीं है, क्योंकि प्रत्येक टैग का अपना उद्देश्य होता है, और तालिकाओं का उपयोग पेज लेआउट के लिए नहीं किया जाना चाहिए था। हालाँकि, किसी विकल्प की कमी ने डिजाइनरों को इस विशेष लेआउट पद्धति का उपयोग करने के लिए प्रेरित किया। अब एक और तरीका है - परतों का उपयोग करना, जिसने धीरे-धीरे इस प्रकार के काम में तालिकाओं को वेब पेज से बदल दिया है। हालाँकि, हमारे समय में भी, कुछ डिज़ाइनर टेबल लेआउट का सफलतापूर्वक उपयोग करते हैं। दो स्तंभों के साथ सारणीबद्ध लेआउट सबसे आम लेआउट विधियों में से एक दो कॉलम है, अर्थात। पेज दो भागों में बंटा हुआ है. आमतौर पर, बाईं ओर मुख्य सामग्री के लिए मेनू और अतिरिक्त तत्व होते हैं, और दाईं ओर मुख्य सामग्री होती है। इस मामले में, बाएं हिस्से की चौड़ाई एक निश्चित मान पर सेट की जाती है, अर्थात। कठोरता से, और दाहिना भाग पृष्ठ के शेष क्षेत्र को घेर लेता है। इस मामले में, आपको चौड़ाई संपत्ति (100%) के माध्यम से संपूर्ण तालिका (तालिका टैग) की कुल चौड़ाई को प्रतिशत में सेट करने की आवश्यकता है, और पहले सेल (टीडी टैग) के लिए चौड़ाई (चौड़ाई संपत्ति भी) को पिक्सेल में सेट करें या प्रतिशत. उदाहरण:पृष्ठ के मुख्य फ़्रेम को दो कॉलम से सेट करें: पहला - एक निश्चित आकार के साथ, दूसरा - ब्राउज़र के शेष क्षेत्र के लिए। CSS शैलियों का उपयोग करके कार्य पूरा करें () प्रदर्शन: </सिर> <शरीर > <टेबल आईडी = "मेकेट" सेलस्पेसिंग = "0" > <tr > <टीडी आईडी = "बाएं" > 1</टीडी> <टीडी आईडी = "सही" > 2</टीडी> </tr> </टेबल> ... 1 2 ... परिणाम: आइए अब तालिका के दो स्तंभों को एक दूसरे से दृष्टिगत रूप से अलग करने का प्रयास करें। उदाहरण:अलग-अलग सेल पृष्ठभूमि सेट करें (दो कॉलम को एक दूसरे से अलग करने के लिए) और कॉलम के बीच की दूरी सेट करें (विभाजक) प्रदर्शन: आइए नई शैली गुण जोड़ें: /* बाएं सेल के लिए */ td#left( चौड़ाई:200px; पृष्ठभूमि: #ccc; बॉर्डर:1px ठोस काला; /* अस्थायी रूप से सीमाओं को चिह्नित करें */ ) /* दाएं सेल के लिए */ td#right( पृष्ठभूमि: #fc3; सीमा: 1px ठोस काला; /* अस्थायी रूप से सीमाओं को चिह्नित करें */ ) /* विभाजक के लिए */ #razdel(चौड़ाई: 10px; /* स्तंभों के बीच की दूरी */) एक साथ: </सिर> <शरीर > <टेबल आईडी = "मेकेट" सेलस्पेसिंग = "0" > <tr > <टीडी आईडी = "बाएं" > 1</टीडी> <टीडी आईडी = "रेज़डेल" > <टीडी आईडी = "सही" > 2</टीडी> </tr> </टेबल> 1 2 विभाजक के लिए एक नया सेल जोड़ा गया है। परिणाम: स्तंभों के बीच विभाजक को भी कम प्रमुख बनाया जा सकता है। ऐसा करने के लिए, हम बॉर्डर शैलियों का उपयोग करेंगे। उदाहरण:आसन्न कोशिकाओं की सीमा पर एक बिंदीदार रेखा का उपयोग करके तालिका स्तंभों के बीच एक विभाजक बनाएं प्रदर्शन: आइए कोशिकाओं के लिए नए बॉर्डर गुण जोड़ें: /* बाएँ सेल के लिए */ td#left( चौड़ाई:200px; पृष्ठभूमि: #ccc; /* बाएँ स्तंभ की पृष्ठभूमि का रंग */ /* नया */ बॉर्डर-दाएँ: 1px डैश्ड #000; /* दाएँ डैश्ड बॉर्डर विकल्प * / ) एक साथ: </सिर> <शरीर > <टेबल आईडी = "मेकेट" सेलस्पेसिंग = "0" > <tr > <टीडी आईडी = "बाएं" > 1</टीडी> <टीडी आईडी = "सही" > 2</टीडी> </tr> </टेबल> 1 2 परिणाम: तीन स्तंभों के साथ तालिका लेआउट एक निश्चित या "द्रव" लेआउट की अवधारणा है। निश्चित सीएसएस लेआउट का उपयोग करते हुए निश्चित लेआउट संपूर्ण तालिका की चौड़ाई पिक्सेल में निर्दिष्ट है, और फिर, मॉनिटर और ब्राउज़र विंडो के रिज़ॉल्यूशन की परवाह किए बिना, तालिका की चौड़ाई हमेशा समान रहेगी। इस मामले में बाकी कॉलमों की चौड़ाई भी तय होनी चाहिए. आप एक सेल की चौड़ाई निर्दिष्ट नहीं कर सकते हैं, फिर इसकी गणना शेष सेल और संपूर्ण तालिका के आकार के आधार पर स्वचालित रूप से की जाएगी। उदाहरण:तीन कॉलम वाला पेज टेम्पलेट बनाएं. एक निश्चित तालिका लेआउट का उपयोग करें: बायां कॉलम - 150 पिक्सेल; मध्य स्तंभ - 400 पिक्सेल; प्रदर्शन: </सिर> <शरीर > <टेबल आईडी = "मेकेट" सेलस्पेसिंग = "0" > <tr > <टीडी आईडी = "बाएं" > 1</टीडी> <टीडी आईडी = "केंद्रीय" > 2</टीडी> <टीडी आईडी = "सही" > 3</टीडी> </tr> </टेबल> 1 2 3 परिणाम: रबर मॉकअप टेबल की चौड़ाई"रबर" डिज़ाइन का उपयोग करते समय ब्राउज़र विंडो की चौड़ाई के % के रूप में सेट करें. वह। जब ब्राउज़र विंडो बदलती है, तो तालिका का आकार भी बदल जाता है। सभी कोशिकाओं की चौड़ाईस्थापित किया जा सकता है प्रतिशत में. दूसरा विकल्प है कब कुछ कोशिकाओं की चौड़ाईस्थापित है प्रतिशत में, ए कुछ - पिक्सेल में. महत्वपूर्ण:तालिका की चौड़ाई की परवाह किए बिना, सभी स्तंभों की चौड़ाई का योग 100% होना चाहिए। उदाहरण: बायां स्तंभ - 20%; मध्य स्तंभ - 40%; दायां स्तंभ - 40%; स्तंभों के लिए पृष्ठभूमि सेट करें और स्तंभों को बॉर्डर से दृष्टिगत रूप से अलग करें। प्रदर्शन: </सिर> <शरीर > <टेबल आईडी = "मेकेट" सेलस्पेसिंग = "0" > <tr > <टीडी आईडी = "बाएं" > 1</टीडी> <टीडी आईडी = "केंद्रीय" > 2</टीडी> <टीडी आईडी = "सही" > 3</टीडी> </tr> </टेबल> 1 2 3 परिणाम: आइए दूसरे विकल्प पर विचार करें, जब केंद्रीय कॉलम की चौड़ाई ब्राउज़र द्वारा स्वचालित रूप से चुनी जाती है; एक उदाहरण निम्नलिखित चित्र है: उदाहरण:तीन कॉलम वाला पेज टेम्पलेट बनाएं. एक द्रव तालिका लेआउट का उपयोग करें: बायां कॉलम - 150 पिक्सेल; मध्य स्तंभ - 40%; दायां स्तंभ - 200 पिक्सेल; स्तंभों के लिए पृष्ठभूमि सेट करें और स्तंभों को बॉर्डर से दृष्टिगत रूप से अलग करें। प्रदर्शन: </सिर> <शरीर > <टेबल आईडी = "मेकेट" सेलस्पेसिंग = "0" > <tr > <टीडी आईडी = "बाएं" > 1</टीडी> <टीडी आईडी = "केंद्रीय" > 2</टीडी> <टीडी आईडी = "सही" > 3</टीडी> </tr> </टेबल> 1 2 3 परिणाम: परिणाम लगभग वही होगा, केवल केंद्रीय स्तंभ के कारण "खिंचाव" होगा। द्रव लेआउट में नेस्टेड तालिका का उपयोग करना यदि दो स्तंभों की चौड़ाई प्रतिशत में और तीसरे की पिक्सेल में सेट की गई है, तो आप केवल एक तालिका से काम नहीं चला पाएंगे। इसलिए, यदि संपूर्ण तालिका की चौड़ाई 100 प्रतिशत है, पहला कॉलम 200 पिक्सेल है, और शेष कॉलम 20 प्रतिशत हैं, तो एक साधारण गणना से पता चलता है कि पहले कॉलम का आकार 60 प्रतिशत है। इस स्थिति में, पिक्सेल में निर्दिष्ट मान ब्राउज़र द्वारा स्वीकार नहीं किया जाएगा, और आकार प्रतिशत के रूप में सेट किया जाएगा। मूल तालिका दो कक्षों के साथ बनाई गई है। तालिका की चौड़ाई प्रतिशत के रूप में निर्धारित की गई है. बाएँ सेल के लिए(पहला कॉलम) चौड़ाई निर्धारित है पिक्सेल में. सही सेल चौड़ाई(अन्य स्तंभों के लिए आधार) निर्दिष्ट नहीं है. इस सेल के अंदर एक दूसरी तालिका डाली गई है, जिसमें दो सेल भी शामिल हैं। नेस्टेड तालिका कोशिकाओं के लिए, चौड़ाई प्रतिशत के रूप में निर्धारित की गई है. आंतरिक टेबल की चौड़ाई 100 प्रतिशत पर सेट की जानी चाहिएताकि यह तालिका बाहरी तालिका में सभी खाली स्थान ले ले। केंद्र और दाएं कॉलम की चौड़ाई की गणना सेल की चौड़ाई के सापेक्ष की जाती है, न कि संपूर्ण बाहरी तालिका की। उदाहरण:तीन कॉलम वाला पेज टेम्पलेट बनाएं. नेस्टेड तालिका के साथ द्रव लेआउट का उपयोग करें: बायां कॉलम - 150 पिक्सेल; मध्य स्तंभ - 60%; दायां स्तंभ - 40%; कॉलम के लिए पृष्ठभूमि सेट करें. प्रदर्शन: 1 2 3 यह सुनिश्चित करने के लिए कि तालिकाओं के बीच कोई "अंतर" नहीं है, सेलपैडिंग और सेलस्पेसिंग टैग विशेषताएँ यहाँ आवश्यक हैं। परिणाम: इस लेख में आप देखेंगे कि कैसे उपयोग करें सीएसएस शैलियाँप्रारूप तालिकाएँ. इंटरनेट के शुरुआती दिनों में, डिज़ाइनर अक्सर लेआउट बनाने के लिए तालिकाओं का उपयोग करते थे। अब लगभग सभी साइटें चिह्नित हैं सीएसएस सहायता, और तालिकाओं का उपयोग उनके इच्छित उद्देश्य के लिए किया जाता है - डेटा प्रदर्शित करने के लिए। टेबल लेआउट के लिए टैग तालिका का उपयोग करके बनाया जा सकता है निम्नलिखित टैग: निम्नलिखित टैग का उपयोग करके एक तालिका बनाई जा सकती है: तालिका के शीर्षक (अधिक हद तक हस्ताक्षर की तरह) को परिभाषित करता है। तालिका में एक कॉलम को परिभाषित करता है। किसी तालिका में स्तंभों के समूह को परिभाषित करता है. एक तालिका बनाता है. किसी तालिका में एक या अधिक पंक्तियों को परिभाषित करता है। तालिका में एक कक्ष बनाता है. तालिका के नीचे दिखाई देने वाली पंक्तियों को परिभाषित करता है। प्रत्येक तालिका कॉलम के लिए एक शीर्षक परिभाषित करता है। तालिका के शीर्ष पर प्रस्तुत एक या अधिक पंक्तियों को संग्रहीत करने के लिए डिज़ाइन किया गया। किसी तालिका में एक पंक्ति बनाता है. जैसा कि आप देख सकते हैं, तालिकाओं में बड़ी संख्या में टैग का उपयोग किया जा सकता है, प्रत्येक विशिष्ट मामले में हम उतनी ही अधिक सीएसएस शैलियों का उपयोग कर सकते हैं। नीचे चर्चा की जाएगी सीएसएस गुण, तालिकाओं को प्रारूपित करने के लिए उपयोग किया जाता है। सीमाओं सेल तालिका टैग में वर्णित सीमाओं को प्राप्त नहीं करते हैं। टेबल सेल की सीमाओं को बॉर्डर प्रॉपर्टी का उपयोग करके वर्णित किया जा सकता है, लेकिन यह एक अंतर पैदा करता है। थ, टीडी (बॉर्डर:2पीएक्स ठोस काला;) इस स्थान को CSS बॉर्डर-स्पेसिंग प्रॉपर्टी का उपयोग करके हटाया जा सकता है (IE के लिए आपको टेबल टैग की सेलस्पेसिंग विशेषता की आवश्यकता होगी)। हालाँकि, यदि आप जगह हटा देते हैं, तो बॉर्डर आकार में दोगुना हो जाएगा। तालिका (बॉर्डर-स्पेसिंग:0;) दोहरी सीमाओं और रिक्त स्थान से छुटकारा पाने के लिए, मूल्य Collapse के साथ border-collapse संपत्ति का उपयोग करें। तालिका (सीमा-पतन:पतन;) इंडेंटेशन इंडेंट (में HTML विशेषतासेलपैडिंग) को पैडिंग प्रॉपर्टी का उपयोग करके परिभाषित किया गया है। केवल कोशिकाओं पर लागू किया जा सकता है ( ) या शीर्षकों के अंतर्गत कक्षों में ( ) . थ, टीडी (पैडिंग:10पीएक्स 12पीएक्स 13पीएक्स 14पीएक्स;) संरेखण पाठ-संरेखण संपत्ति टेक्स्ट-एलाइन (HTML में एलाइन विशेषता) और वर्टिकल-एलाइन गुण एक टेबल सेल के भीतर सामग्री को संरेखित करते हैं। टेक्स्ट-संरेखण गुण (मान: बाएँ, दाएँ, केंद्र, औचित्य) सामग्री को क्षैतिज रूप से संरेखित करता है। टैग का दायरा: , , . वें, टीडी, तालिका (पाठ-संरेखण: केंद्र;) लंबवत-संरेखण संपत्ति लंबवत-संरेखण गुण (मान: शीर्ष, आधार रेखा, नीचे, मध्य) सामग्री को लंबवत रूप से संरेखित करता है। आवेदन का दायरा: वें , टीडी . थ, टीडी (ऊर्ध्वाधर-संरेखण:नीचे;) स्तंभों को प्रारूपित करें आप चौड़ाई गुण और पृष्ठभूमि समूह गुण को col और colgroup टैग पर लागू कर सकते हैं। यदि आप किसी कॉलम को हाइलाइट करना चाहते हैं या उसे किसी विशिष्ट चौड़ाई पर सेट करना चाहते हैं तो यह सुविधाजनक है। कक्षा और आईडी किसी विशिष्ट सेल या तालिका को प्रारूपित करने के लिए, कक्षाओं, पहचानकर्ताओं आदि के बारे में न भूलें। मित्रों को बताओ ट्विटर सैमसंग गेम... एंड्रॉइड डेस्कटॉप गायब हो गया है या लॉन्चर काम नहीं कर रहा है! अगला लेख एक्सपीरिया कंपेनियन - एक्सपीरिया को अपडेट करने और पुनर्स्थापित करने के लिए विंडोज पीसी पर एक नया एप्लिकेशन ये भी पढ़ें Android के लिए सर्वश्रेष्ठ संगीत प्लेयर 2024-03-13 00:03:49 हब, स्विच और राउटर क्या है? 2024-03-12 00:04:38 JSON संक्षिप्त नाम डिकोडिंग 2024-03-11 00:04:21 एक दिलचस्प प्रभाव के साथ jQuery छवि गैलरी 2024-03-09 00:04:15