टेबल-लेआउट - सीएसएस-ट्रिक्स

table-layoutसंपत्ति परिभाषित करता है क्या ब्राउज़र एल्गोरिथ्म तालिका पंक्तियों, कोशिकाओं, और स्तंभों बाहर बिछाने के लिए उपयोग करना चाहिए।

table ( table-layout: fixed; )

जैसा कि CSS2.1 विनिर्देश में समझाया गया है, सामान्य रूप से टेबल लेआउट आमतौर पर स्वाद का मामला है और डिजाइन विकल्पों के आधार पर अलग-अलग होगा। हालांकि, ब्राउज़र स्वचालित रूप से कुछ बाधाओं को लागू करेंगे जो परिभाषित करेंगे कि टेबल कैसे रखी गई हैं। यह तब होता है जब table-layoutसंपत्ति auto(डिफ़ॉल्ट) पर सेट होती है । लेकिन इन बाधाओं को उठा सकते हैं जब table-layoutसेट किया जाता है fixed।

मूल्यों

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

fixedकिसी भी मूल्य के प्रभाव के लिए, तालिका की चौड़ाई को auto( widthसंपत्ति के लिए डिफ़ॉल्ट ) के अलावा कुछ और सेट करना होगा । नीचे दिए गए डेमो में, सभी टेबल की चौड़ाई 100% निर्धारित की गई है, जो मानती है कि हम टेबल को उसके मूल कंटेनर को क्षैतिज रूप से भरना चाहते हैं।

एक निश्चित तालिका लेआउट एल्गोरिथ्म के प्रभावों को देखने का सबसे अच्छा तरीका एक डेमो का उपयोग कर रहा है।

CodePen पर Louis Lazaris (@impressivewebs) द्वारा सीएसएस की टेबल-लेआउट संपत्ति के लिए पेन डेमो देखें।

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

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

आगे के उदाहरणों से यह स्पष्ट हो सकता है। निम्नलिखित डेमो में, तालिका में एक तत्व होता है जिसका पहला तत्व चौड़ाई है 400px। इस मामले में सूचना, टॉगल करने table-layout: fixedका कोई प्रभाव नहीं है।

ऐसा इसलिए होता है क्योंकि डिफ़ॉल्ट लेआउट एल्गोरिथ्म अनिवार्य रूप से कह रहा है "पहले स्तंभ को 400px चौड़ा बनाएं, और उनकी सामग्री के आधार पर शेष कॉलम वितरित करें"। चूंकि अन्य तीन स्तंभों में एक-दूसरे के समान सामग्री है, इसलिए कोई बदलाव नहीं होगा। लेकिन अब दूसरे स्तंभों में से कुछ में अतिरिक्त पाठ्य सामग्री जोड़ें:

कोड लेन पर लुईस लाजरिस (@impressivewebs) द्वारा कोल चौड़ाई और चर सामग्री के साथ सीएसएस की टेबल-लेआउट संपत्ति के लिए पेन डेमो देखें।

अब यदि आप टॉगल बटन पर क्लिक करते हैं, तो आप सामग्री के बावजूद कॉलम को एक निश्चित लेआउट को समायोजित करने के लिए देखेंगे। एक बार फिर वही बात हो रही है; पहले स्तंभ को 400px पर सेट किया गया है, फिर शेष स्तंभों को समान रूप से विभाजित किया गया है। लेकिन इस बार, क्योंकि एक कॉलम में अतिरिक्त सामग्री है, अंतर ध्यान देने योग्य है।

एक निश्चित लेआउट एल्गोरिथ्म कॉलम की चौड़ाई कैसे निर्धारित करता है

निम्नलिखित दो डेमो को यह समझने में मदद करनी चाहिए कि तालिका की पहली पंक्ति वह है जो सेट की गई तालिका की कॉलम चौड़ाई को परिभाषित करने में मदद करती है table-layout: fixed।

कोड 1 पर Louis Lazaris (@impressivewebs) द्वारा परिभाषित चौड़ाई में सेल 1 के साथ CSS के टेबल-लेआउट के लिए पेन डेमो देखें।

उपरोक्त डेमो में, तालिका की पहली पंक्ति के पहले सेल की चौड़ाई 350px है। टॉगल करना table-layout: fixedअन्य स्तंभों को समायोजित करता है, लेकिन पहले वाला समान रहता है। अब निम्न डेमो आज़माएँ:

CodePen पर Louis Lazaris (@impressivewebs) द्वारा परिभाषित चौड़ाई में सेल 2 के साथ CSS के टेबल-लेआउट के लिए पेन डेमो देखें।

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

एक निश्चित लेआउट एल्गोरिथ्म के लाभ

उपयोग करने के सौंदर्य लाभ table-layout: fixedऊपर के प्रदर्शनों से स्पष्ट होना चाहिए। लेकिन अन्य प्रमुख लाभ प्रदर्शन है। युक्ति निश्चित एल्गोरिथम को "तेज़" एल्गोरिथम के रूप में संदर्भित करता है, और अच्छे कारण के लिए। स्तंभों का आकार निर्धारित करने से पहले ब्राउज़र को पूरी तालिका की सामग्री का विश्लेषण करने की आवश्यकता नहीं है; इसे केवल पहली पंक्ति का विश्लेषण करने की आवश्यकता है। तो परिणाम तालिका के लेआउट का एक तेज प्रसंस्करण है।