2010-04-01 16 views
11

मुझे पता है कि टेबल-आधारित लेआउट पर सीएसएस पोजिशनिंग पसंद करते हुए कई अच्छे तर्क हैं। मैं क्या सोच रहा हूं कि सीएसएस मॉडल टेबल की सभी क्षमताओं के संबंध में पूरा हो गया है (अपेक्षाकृत आधुनिक ब्राउज़र मान रहा है)। क्या ऐसे लेआउट हैं जो टेबल प्राप्त कर सकते हैं जो सीएसएस के साथ असंभव या अव्यवहारिक हैं?सीएसएस की स्थिति क्या कर सकती है?

उत्तर

5

यदि मैं कर सकता था तो मैं सीएसएस आधारित लेआउट पर स्विच करूंगा। Sematic तर्क सही हैं, लेकिन व्यावहारिक विचार हैं।टेबल्स देगा:

  • बिल्कुल 'नाव रैप' जहां एक div अगली पंक्ति में गिर जाएगी रोकने क्योंकि के लिए यह
  • आप एक ही ऊंचाई कॉलम देना
  • गतिशील लेआउट जहां चौड़ाई की अनुमति देने के लिए पर्याप्त स्थान नहीं है वहाँ और ऊंचाइयों रन-टाइम
  • colspans और rowspans प्रदान जब तक नहीं जाना जाता है
  • कैसे टेबल :)
बिना सामान करने के लिए पूछ अतः प्रश्नों की संख्या कम

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

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

एक परिपूर्ण (मेरे लिए) दुनिया में, हमारे पास टैबलेट डेटा के लिए <table> एस होगा, और दूसरा, लेआउट के लिए टैग के लगभग समान सेट - इसे <layout> (इसी पंक्ति और सेल टैग के साथ) पर कॉल करें। या, <table> टैग पर 'मोड' विशेषता जोड़ें - मान 'डेटा' और 'लेआउट' होंगे ताकि स्क्रीन पाठकों और खोज इंजनों को पता चले कि क्या करना है। शायद एचटीएमएल 6 में ...

संपादित करें: मैं 'फ्लोट रैप' चीज़ के बारे में जोर से जोड़ता हूं - SO पर एक वर्तमान प्रश्न है जो बहुत अच्छी तरह से काम करता है here। यह सही नहीं है, और यह भी मुझे बहुत जटिल है, लेकिन यह कई मामलों में समस्या का समाधान करेगा।

+0

+0, दूसरे और तीसरे के लिए -1, चौथे और पांचवें के लिए +1। : डी – ANeves

+1

@ एसआर पीटी: मुझे खुशी है कि आपने मुझे पहले के लिए +0 के बदले +0 दिया है ... गंभीरता से, मैंने इस सामान के अधिकांश भाग के लिए आंशिक कामकाज देखा है, लेकिन वास्तव में कभी भी गतिशील चौड़ाई (मेरा तीसरा) नहीं। क्या आपके पास कुछ है? – Ray

4

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

टेबल्स लंबवत स्थिति और पूर्ण ऊंचाई कॉलम के लिए निश्चित रूप से आसान हैं, लेकिन फिर इसे सीएसएस से दूर किया जा सकता है।

+0

मैं प्रोग्रामिंग में कोनों को काटने की वकालत करने वाला नहीं हूं लेकिन ऐसे मामले हैं जहां "हैक" कुछ "आदर्श" तरीका करने से बेहतर है। एचटीएमएल टेबल काम करते हैं। हर ब्राउज़र में। हमेशा। वे समझने और रखरखाव करने के लिए सरल हैं। जब divs को डालने की बात आती है तो सीएसएस इसके विपरीत होता है। – Nemi

+0

@ नीमी - बू! तो इसके लिए मानक क्या हैं? –

+0

+ -0 मैं सम्मान से असहमत हूं। वहां * ऐसी स्थितियां हैं जिन्हें टेबल या जावास्क्रिप्ट के बिना संभाला नहीं जा सकता है। सीएसएस मानक के डिजाइनरों ने लेआउट में उपयोग के लिए 'टेबल' के विकल्प प्रदान करने में एक खराब काम किया - क्यों, मुझे नहीं पता।"आसान तरीका" के रूप में, मैंने आपको यह बताया कि जब विकल्प पांच-पंक्ति '

' निर्माण, या सीएसएस की 80 लाइनों और आईई 6 और 7 के लिए तीन ब्राउज़र-विशिष्ट हैक्स और शायद 8, प्लस ए के बीच है जावास्क्रिप्ट का ब्लॉक क्योंकि (सफारी | ओपेरा | xyz) इस और छद्म वर्ग का समर्थन नहीं करते हैं, "आसान तरीका" वास्तव में सही तरीका है। –

0

भयानक दिखने वाले लोग?

गंभीरता से, हालांकि। सं।

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

0

आप सीएसएस के साथ एक ही काम कर सकते हैं, लेकिन यह आमतौर पर सुरुचिपूर्ण नहीं है।

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

+0

मुझे यकीन नहीं है कि मैं तर्क "वे टैबलेट के लिए हैं" डेटा खरीदते हैं। आपको एहसास है कि http/html स्टेटिक सामग्री के लिए है, है ना? और सत्र में वेब ऐप्स और बचत स्थिति उस पर एक विकृति है, है ना? किसी चीज़ के लिए टूल का उपयोग करना क्योंकि यह अच्छी तरह से काम करता है, भले ही इसे मूल रूप से उस उपयोग के लिए नहीं बनाया गया हो, गलत नहीं है। यह सिर्फ स्मार्ट है। – Nemi

+0

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

-1

save you time

+0

किस बलिदान पर? –

+0

यह देखकर खुशी हुई कि आप मेरे उत्तर – Anurag

1

मैं एक मिल गया है! ऐसा कुछ है जो मुझे सीएसएस के साथ असंभव लगता है, लेकिन टेबल के साथ संभव है। मैंने कल इस पर एक सवाल पूछा और जवाब मिला।

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

संपादित करें: थोड़ा सा परीक्षण दिखाता है कि यह केवल फ्लोट के साथ ही सच है। यदि आपके तत्व इनलाइन या इनलाइन-कुछ प्रदर्शित करते हैं, तो आप कंटेनर पर white-space:nowrap सेट कर सकते हैं। हालांकि इस मामले में ऐसा लगता है (वैसे भी एफएफ में) तत्वों के बीच एक रहस्यमय जगह है, जो कल मेरे उद्देश्यों के लिए एक समस्या होगी।

+0

से सहमत हैं मुझे यकीन नहीं है कि यह सच है। सीएसएस में रैपिंग व्यवहार को नियंत्रित करने के तरीके हैं। – jlew

+0

तो कल किसी ने मेरे प्रश्न में मुझसे झूठ बोला। अगर मैं इसे पा सकूं तो हटा दूंगा। – Tesserex

+0

शायद वे किसी प्रकार के सीमित परिदृश्य में सही हैं। एक सामान्य बयान के रूप में, मुझे नहीं लगता कि यह सही है। – jlew

6

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

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

+0

+1 "वास्तविक कारण के लिए" – ANeves

+0

@sr pt - मैं असहमत हूं। अंतिम परिणाम वह है जो उपयोगकर्ता देखता है। यदि सभी सीएसएस डिज़ाइन का उपयोग करना आपको अंदर अच्छा महसूस करता है, लेकिन आपको तीन गुना लंबा लगता है, तो आप अपनी कंपनी के समय और धन की लागत के अलावा कुछ भी नहीं कर रहे हैं। – Nemi

+0

दान सही है - 'टैब्यूलर' की एक अच्छी परिभाषा 'सामान है जो पंक्तियों और स्तंभों में अच्छी तरह से रेखाबद्ध होती है'। अधिकांश डेटा एंट्री फॉर्मों की तरह। समाचार पत्र शैली कॉलम की तरह। अधिकांश वेबसाइटों की मुख्य संरचना की तरह। – Ray

0

सीएसएस की स्थिति क्या कर सकती है?
सिद्धांत रूप में, कुछ भी नहीं, क्योंकि आप display: table;, display: table-cell; या display के लिए ऐसे अन्य मानों का उपयोग कर सकते हैं।

< ArgumentOnSemanticsUsabilityAndAcessibility/>

+0

ठीक है, हाँ। लेकिन यह इसे एक टेबल में बनाता है इसलिए मैं इस सवाल की भावना के बाहर विचार करता हूं। – jlew

+0

लेकिन 'सुनिश्चित [फ्लोटेड इत्यादि] तत्वों के अलावा' स्पिल 'और' तरल कॉल/पंक्ति स्पैन 'नहीं है, मैं कुछ भी नहीं देख सकता जो वे कर सकते हैं कि आप सीएसएस के साथ प्राप्त नहीं कर सकते हैं। अधिकांश स्थितियों के लिए इस खेल में एकमात्र बजाने योग्य कार्ड 'समय बचाने' है। – ANeves

-2

उन्हें (टेबल्स) मार्कअप में उपयोग करें और आप अपने सिर के बारे में स्थिति या पार ब्राउज़र संगतता के बारे में तोड़ने के लिए नहीं है । टेबल्स लगभग ब्राउज़रों के समान काम करते हैं

संबंधित मुद्दे