दिलचस्प पोस्ट
बड़ी पाठ फ़ाइलों को पायथन में पढ़ो, लाइन में लाइन में बिना इसे स्मृति में लोड किए बिना JQuery के साथ एक div की दृश्यमान ऊंचाई प्राप्त करें आर में दो भूखंडों को अलग कैसे करें? डेटाबेस में प्रत्येक तालिका में अभिलेखों की संख्या को सूचीबद्ध करने के लिए प्रश्न जब TaskCompletionSource <T> का उपयोग किया जाना चाहिए? टूटी हुई WPF डेटा बाइंडिंग का पता कैसे लगा सकता है? " (स्क्वायर कोष्ठ) से त्रुटि Django MEDIA_URL और MEDIA_ROOT JSR 303 मान्यकरण, यदि एक फ़ील्ड "कुछ" के बराबर है, तो ये अन्य फ़ील्ड रिक्त नहीं होनी चाहिए कोनालर 2 – एनजीफ़ोर नंबर का उपयोग करने के बजाय संग्रह <iframe> डोमेन पर जावास्क्रिप्ट प्रवेश अभिभावक DOM? सी # का इस्तेमाल करते हुए ओलेडीबी का इस्तेमाल करके सीएसवी को पार्स करना एक गैर-प्रशासक उपयोगकर्ता खाते से एक Windows सेवा को प्रारंभ / बंद करें Xib के साथ एक पुन: प्रयोज्य UIView बनाना (और स्टोरीबोर्ड से लोड करना) हनीकॉब एक्शन बार से एप्लिकेशन आइकन और शीर्षक निकालें

HTML में लेआउट के लिए तालिकाओं का उपयोग क्यों नहीं करें?

यह सामान्य राय है कि टेबल को HTML में लेआउट के लिए उपयोग नहीं किया जाना चाहिए।

क्यूं कर?

मैंने कभी भी (या शायद ही कभी ईमानदार होना) इस बात के लिए अच्छे तर्क देखा। सामान्य जवाब हैं:

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

    शायद मुझे या मेरे साथी डेवलपर्स को वेब पेज देखभाल बनाए रखना है … क्या एक मेज कम रखरखाव है? मुझे लगता है कि एक टेबल का उपयोग करना divs और CSS का उपयोग करने से अधिक आसान है।

    वैसे … क्यों लेआउट और एक मेज से सामग्री की div या span अच्छा जुदाई का उपयोग कर रहा है? केवल div के साथ एक अच्छा लेआउट प्राप्त करने के लिए अक्सर नेस्टेड डिवाइज़ की बहुत आवश्यकता होती है

  • कोड की पठनीयता
    मुझे लगता है कि यह दूसरा रास्ता है ज्यादातर लोग एचटीएमएल समझते हैं, कुछ सीएसएस समझते हैं।

  • एसईओ के लिए तालिकाओं का उपयोग न करने के लिए बेहतर है
    क्यूं कर? क्या कोई यह सबूत दिखा सकता है कि यह क्या है? या Google से एक कथन है कि तालिकाओं को एसईओ परिप्रेक्ष्य से हतोत्साहित किया जाता है?

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

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

तालिका के बजाय divs + css का उपयोग करने के लिए मैं वास्तव में अच्छे तर्कों में रुचि रखता हूं

वेब के समाधान से एकत्रित समाधान "HTML में लेआउट के लिए तालिकाओं का उपयोग क्यों नहीं करें?"

मैं अपने तर्कों के माध्यम से एक के बाद एक जा रहा हूँ और उन में त्रुटियों को दिखाने का प्रयास करें।

लेआउट से सामग्री को अलग करना अच्छा है लेकिन यह एक भ्रामक तर्क है; क्लिच थिंकिंग

यह सब पर भ्रामक नहीं है क्योंकि HTML जानबूझकर बनाया गया था एक तत्व का दुरुपयोग पूरी तरह से प्रश्न से बाहर नहीं हो सकता (सभी के बाद, नए रूढ़िवादी अन्य भाषाओं में भी विकसित हुए हैं), लेकिन संभावित नकारात्मक प्रभावों को प्रतिबाधा होना चाहिए। इसके अतिरिक्त, भले ही <table> तत्व का दुरुपयोग करने के खिलाफ कोई तर्क नहीं थे, कल हो सकता है क्योंकि जिस तरह से ब्राउज़र विक्रेताओं तत्व के लिए विशेष उपचार लागू होते हैं आखिरकार, वे जानते हैं कि " <table> तत्व केवल सारणीय डेटा के लिए हैं" और इस तथ्य का उपयोग प्रस्तुति इंजन में सुधार करने के लिए, प्रक्रिया में आसानी से बदल कर कैसे <table> व्यवहार कर सकते हैं, और इस तरह से मामलों को तोड़ते हैं जहां पहले इसका दुरुपयोग किया गया था

तो क्या? क्या मेरे मालिक की देखभाल है? क्या मेरे उपयोगकर्ता देखभाल करते हैं?

निर्भर करता है। क्या आपके मालिक नुकीले बालों वाली है? तब वह परवाह नहीं कर सकता अगर वह सक्षम है, तो वह परवाह है, क्योंकि उपयोगकर्ताओं को होगा

शायद मुझे या मेरे साथी डेवलपर्स को वेब पेज देखभाल बनाए रखना है … क्या एक मेज कम रखरखाव है? मुझे लगता है कि एक मेज का उपयोग करना divs और css का उपयोग करने से अधिक आसान है।

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

वैसे … क्यों लेआउट और एक मेज से सामग्री की div या span अच्छा जुदाई का उपयोग कर रहा है? केवल div के साथ एक अच्छा लेआउट प्राप्त करने के लिए अक्सर नेस्टेड डिवाइज़ की बहुत आवश्यकता होती है

गहरे नीडि़त <div> s एक विरोधी पैटर्न हैं जैसे टेबल लेआउट। अच्छे वेब डिजाइनरों को उनमें से कई की आवश्यकता नहीं है दूसरी तरफ, यहां तक ​​कि इस तरह के गहरे-नेस्टेड डिवाओं में टेबल लेआउट की कई समस्याएं नहीं हैं। वास्तव में, वे कुछ भागों में सामग्री को तार्किक रूप से विभाजित करके अर्थपूर्ण संरचना में योगदान भी दे सकते हैं।

कोड की पठनीयता मुझे लगता है कि यह दूसरी तरफ है। ज्यादातर लोग एचटीएमएल समझते हैं, सीएसएस समझते हैं। यह आसान है

"अधिकांश लोग" इससे कोई फर्क नहीं पड़ता पेशेवर मामले पेशेवरों के लिए, टेबल लेआउट HTML + CSS की तुलना में बहुत अधिक समस्याएं बनाते हैं यह कहने की तरह है कि मुझे जीवीएम या एमएक्स का उपयोग नहीं करना चाहिए क्योंकि नोटपैड ज्यादातर लोगों के लिए आसान है या फिर मुझे लेटेक्स का उपयोग नहीं करना चाहिए क्योंकि ज्यादातर लोगों के लिए एमएस वर्ड सरल है

एसईओ के लिए तालिकाओं का उपयोग न करने के लिए बेहतर है

मुझे नहीं पता कि यह सच है और इसका प्रयोग तर्क के तौर पर नहीं होगा, लेकिन यह तर्कसंगत होगा। प्रासंगिक डेटा के लिए खोज इंजन खोज जबकि टेबुलर डेटा प्रासंगिक हो सकता है, यह शायद ही कम है कि उपयोगकर्ता क्या खोज रहे हैं। उपयोगकर्ता पृष्ठ के शीर्षक या इसी तरह प्रमुख पदों में प्रयुक्त शब्दों के लिए खोज करते हैं इसलिए यह तालिकाबद्ध सामग्री को फ़िल्टरिंग से बाहर करने के लिए तार्किक होगा और इस प्रकार एक बड़े फैक्टर द्वारा प्रसंस्करण समय (और लागत!) को काटने के लिए।

टेबल्स धीमे हैं अतिरिक्त टैब्स तत्व को डालने की आवश्यकता है। यह आधुनिक वेब ब्राउज़र के लिए मूंगफली है

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

मुझे कुछ बेंचमार्क दिखाएं जहां एक तालिका का उपयोग एक पृष्ठ को धीमा कर देता है।

दुर्भाग्य से, मेरे पास कोई बेंचमार्क डेटा नहीं है। मुझे स्वयं में दिलचस्पी होगी क्योंकि यह सही है कि इस तर्क में एक निश्चित वैज्ञानिक कठोरता की कमी है

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

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

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

यहाँ एक सिमलीर थ्रेड से मेरे प्रोग्रामर का जवाब है I

सिमेंटिक्स 101

पहले इस कोड को देखें और सोचें कि यहां क्या गलत है …

 class car { int wheels = 4; string engine; } car mybike = new car(); mybike.wheels = 2; mybike.engine = null; 

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

सिमेंटिक्स 102

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

निष्कर्ष

क्या आगंतुक नोटिस करेंगे? नहीं। क्या आपके मालिक की देखभाल है? शायद। क्या हम कभी कभी प्रोग्रामर के रूप में कोनों को काटते हैं? ज़रूर। लेकिन हमें? नहीं, यदि आप सिमेंटिक मार्कअप का उपयोग करते हैं तो कौन लाभ उठाता है? आप – और आपकी पेशेवर प्रतिष्ठा अब जाओ और सही काम करो

स्पष्ट उत्तर: सीएसएस जेन गार्डन देखें। यदि आप मुझे बताते हैं कि आप टेबल-आधारित लेआउट के साथ आसानी से ऐसा कर सकते हैं (याद रखें – HTML नहीं बदल रहा है) तो सभी तरह से लेआउट के लिए तालिकाओं का उपयोग करें

दो अन्य महत्वपूर्ण चीजें पहुंच और एसईओ हैं

दोनों के बारे में जानकारी किस क्रम में प्रस्तुत की जाती है। अगर पेज पर दूसरी नेस्टेड तालिका की दूसरी पंक्ति के तीसरे सेल में आप इसे टेबल-आधारित लेआउट में डालते हैं तो आप पृष्ठ के शीर्ष पर अपने नेविगेशन को आसानी से पेश नहीं कर सकते।

तो आपके उत्तर में रखरखाव, पहुंच और एसईओ हैं।

आलसी मत बनो सही और उचित तरीके से काम करें, भले ही वे सीखना थोड़ा कठिन हो।

यह डुप्लिकेट प्रश्न देखें।

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

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

अगर आप जानते हैं कि आप क्या कर रहे हैं और अच्छे उपकरण हैं, सीएसएस वास्तव में लेआउट के लिए तालिकाओं पर महत्वपूर्ण फायदे हैं और जब तक प्रत्येक आइटम स्वयं को छोड़ने का औचित्य नहीं ठहराता है, एक साथ ले जाता है यह आम तौर पर इसके लायक है

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

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

जो केवल यह दिखाता है कि यहां तक ​​कि सख्त डीआईवी और सीएसएस धर्म की वकालत करते हैं, वे अपने नियमों का पालन नहीं कर सकते। आप इसे उस दिशानिर्देश के रूप में उपयोग कर सकते हैं, जिसमें आप इनका पालन करते हैं।

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

लेआउट के लिए एक तालिका वह खराब नहीं होगी लेकिन आप अपने लेआउट को सिर्फ एक मेज से अधिक समय तक नहीं प्राप्त कर सकते हैं। बहुत जल्द आपके पास 2 या तीन नेस्टेड टेबल हैं यह बहुत बोझिल हो जाता है

  • यह पढ़ने के लिए बहुत मुश्किल है यह राय पर निर्भर नहीं है उनके पास कोई भी पहचान चिन्ह नहीं है, जिन पर कोई पहचान चिन्ह नहीं है।

  • प्रस्तुति से सामग्री को अलग करना एक अच्छी बात है क्योंकि यह आप पर ध्यान केंद्रित करने की अनुमति देता है कि आप क्या कर रहे हैं फूला हुआ पन्नों के दो सुराग को मिलाते हुए पढ़ना कठिन होता है

  • शैलियों के लिए सीएसएस आपके ब्राउज़र को फाइलों को कैश करने की अनुमति देता है और बाद के अनुरोध बहुत तेज़ हैं यह बड़ा है

  • टेबल्स आपको एक डिज़ाइन में लॉक करते हैं ज़रूर, सभी को सीएसएस जेन गार्डन की लचीलेपन की जरूरत नहीं है, लेकिन मैंने कभी भी उस साइट पर काम नहीं किया है, जहां मुझे डिजाइन और थोड़ी सी जगह बदलने की ज़रूरत नहीं थी। यह सीएसएस के साथ बहुत आसान है।

  • टेबल शैली के लिए कठिन हैं आपके पास उनके साथ बहुत अधिक लचीलापन नहीं है (यानी आपको अभी भी एक तालिका की शैलियों को पूरी तरह से नियंत्रित करने के लिए HTML विशेषताओं को जोड़ने की आवश्यकता है)

मैंने संभवतः 4 वर्षों में गैर-टैब्यूलर डेटा के लिए तालिकाओं का उपयोग नहीं किया है मैंने वापस नहीं देखा है

मैं वास्तव में एंडी Budd द्वारा सीएसएस महारत पढ़ने का सुझाव देना चाहूंगा। यह बढ़िया है।

Ecx.images-amazon.com पर छवि http://ecx.images-amazon.com/images/I/41TH5NFKPEL._SL500_BO2,204,203,200_PIsitb-dp-500-arrow,TopRight,45,64_OU01_AA240_SH20_.jpg

लेआउट से सामग्री को अलग करना अच्छा है
लेकिन यह एक भ्रामक तर्क है; क्लिच थिंकिंग

यह एक भ्रामक तर्क है क्योंकि HTML तालिकाओं लेआउट हैं! सामग्री तालिका में मौजूद डेटा है, प्रस्तुतिकरण तालिका ही है यही कारण है कि एचटीएमएल से सीएसएस को अलग करना कई बार मुश्किल हो सकता है। आप प्रस्तुति से सामग्री को अलग नहीं कर रहे हैं, आप प्रस्तुतिकरण को प्रस्तुति से अलग कर रहे हैं! नेस्टेड डिवाईस का एक ढेर किसी तालिका से अलग नहीं है – यह केवल टैग का एक अलग सेट है

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

मुझे लगता है कि टेबल बनाम डिविज़ आपके आवेदन की ज़रूरतों के लिए नीचे आता है I

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

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

सीएसएस / डीआईवी – यह डिजाइन लड़कों के लिए सिर्फ नौकरियां है, है ना? सैकड़ों घंटे मैंने डीआईवी / सीएसएस मुद्दों को डीबग करना खर्च किया है, इंटरनेट को तलाशने के लिए एक अस्पष्ट ब्राउज़र के साथ काम करने वाले कुछ मार्कअप का हिस्सा – यह मुझे पागल ड्राइव करता है। आप एक छोटे से परिवर्तन करते हैं और पूरे लेआउट भयानक गलत होता है – जहां पर उस तर्क का तर्क है कुछ घूमते हुए 3 पिक्सल के इस तरह चलते हुए कुछ और 2 पिक्सेल दूसरे दूसरे को लाइन में लाते हैं। यह किसी तरह मुझे किसी न किसी तरह गलत लगता है सिर्फ इसलिए कि आप शुद्ध हैं और कुछ ऐसा करने के लिए "सही काम नहीं है" का अर्थ यह नहीं है कि आपको इसका उपयोग नं डिग्री और सभी परिस्थितियों में करना चाहिए, खासकर यदि यह आपके जीवन को 1000 गुना आसान बना देता है

आखिरकार मैंने वाणिज्यिक आधार पर विशुद्ध रूप से फैसला किया है, हालांकि मैं कम से कम उपयोग कर रहा हूं, अगर मुझे 20 घंटे काम करने की आशा है तो मुझे एक डीआईवी सही ढंग से लगाया जाए, तो मैं एक मेज पर रहूंगा। यह गलत है, यह शुद्धवादियों को परेशान करता है, लेकिन ज्यादातर मामलों में यह कम समय लगता है और प्रबंधन के लिए सस्ता है। इसके बाद मैं ग्राहक के रूप में काम करने पर आवेदन कर सकता हूं, क्योंकि शुद्धियों को खुश करने के बजाय वे सभी के बाद बिलों का भुगतान करते हैं और सीएसएस / डीआईवी के प्रयोग को लागू करने वाले प्रबंधक को मेरी बहस करते हैं – मैं केवल ग्राहकों को अपने वेतन का भुगतान बताता हूं!

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

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

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

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

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

यदि वह आपको "डब्ल्यूटीएफ" नहीं कहता तो आपको वास्तव में कूल सहायता को नीचे डालना होगा।

मुझे सीएसएस पसंद है I यह अद्भुत स्टाइल विकल्प और कुछ शांत स्थिति उपकरण प्रदान करता है, लेकिन एक लेआउट इंजन के रूप में यह कमी है। कुछ प्रकार की गतिशील ग्रिड पोजीशनिंग सिस्टम होने की आवश्यकता है। अपने अक्षरों को पहले जानने के बिना कई अक्षों पर बॉक्स को संरेखित करने का एक सीधा तरीका यदि आप इसे <table> या <gridlayout> या जो कुछ भी कहते हैं तो मैं बहुत डर नहीं देता, लेकिन यह एक बुनियादी लेआउट सुविधा है जो कि सीएसएस से गायब है।

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

आह। पर्याप्त वेंटिंग आगे बढ़ो और अपने सिर को रेत में वापस लाओ।

508 के अनुपालन के अनुसार (नेत्रहीन रूप से दिये गए स्क्रीन रीडर के लिए), टेबल्स का उपयोग केवल डेटा रखने के लिए किया जाना चाहिए, लेआउट के लिए नहीं, क्योंकि यह स्क्रीन रीडर को बेकार कर देता है। या तो मुझे बताया गया है।

यदि आप प्रत्येक divs के नाम निर्दिष्ट करते हैं, तो आप उन्हें सीएसएस के साथ-साथ एक साथ त्वचा भी बना सकते हैं। वे जिस तरह से आप की जरूरत है उन्हें बैठने के लिए एक दर्द का थोड़ा और अधिक है

हाल के एक प्रोजेक्ट से यहां html का एक खंड है:

 <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>{DYNAMIC(TITLE)}</title> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <link rel="stylesheet" type="text/css" href="./styles/base.css" /> </head> <body> <div id="header"> <h1><!-- Page title --></h1> <ol id="navigation"> <!-- Navigation items --> </ol> <div class="clearfix"></div> </div> <div id="sidebar"> <!-- Sidebar content --> </div> <!-- Page content --> <p id="footer"><!-- Footer content --></p> </body> </html> 

और यहाँ एक टेबल आधारित लेआउट के समान कोड है।

 <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>{DYNAMIC(TITLE)}</title> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <link rel="stylesheet" type="text/css" href="./styles/base.css" /> </head> <body> <table cellspacing="0"> <tr> <td><!-- Page Title --></td> <td> <table> <tr> <td>Navitem</td> <td>Navitem</td> </tr> </table> </td> </tr> </table> <table> <tr> <td><!-- Page content --></td> <td><!-- Sidebar content --></td> </tr> <tr> <td colspan="2">Footer</td> </tr> </table> </body> </html> 

The only cleanliness I see in that table based layout is the fact that I'm overzealous with my indentation. I'm sure that the content section would have a further two embedded tables.

Another thing to think about: filesizes . I've found that table-based layouts are twice the size of their CSS counterparts usually. On our hig-speed broadband that isn't a huge issue but it is on those with dial up modems.

I'd like to add that div-based layouts are easer to mantain, evolve, and refactor. Just some changes in the CSS to reorder elements and it is done. From my experience, redesign a layout that uses tables is a nightmare (more if there are nested tables).

Your code also has a meaning from a semantic point of view.

No arguments in DIVs favour from me.

I'd say : If the shoe fits, wear it.

It's worth noting that it's difficult if not impossible to find a good DIV+CSS method of rendering contents in two or three columns, that is consistent on all browsers, and still looks just the way I intended.

This tips the balance a bit towards tables in most of my layouts, and altough I feel guilty of using them (dunny why, people just say it's bad so I try to listen to them), in the end , the pragmatic view is it's just easier and faster for me to use TABLEs. I'm not being payed by the hour, so tables are cheaper for me.

CSS layouts are generally much better for accessibility, provided the content comes in a natural order and makes sense without a stylesheet. And it's not just screen readers that struggle with table-based layouts: they also make it much harder for mobile browsers to render a page properly.

Also, with a div-based layout you can very easily do cool things with a print stylesheet such as excluding headers, footers and navigation from printed pages – I think it would be impossible, or at least much more difficult, to do that with a table-based layout.

If you're doubting that separation of content from layout is easier with divs than with tables, take a look at the div-based HTML at CSS Zen Garden , see how changing the stylesheets can drastically change the layout, and think about whether you could achieve the same variety of layouts if the HTML was table based… If you're doing a table-based layout, you're unlikely to be using CSS to control all the spacing and padding in the cells (if you were, you'd almost certainly find it easier to use floating divs etc. in the first place). Without using CSS to control all that, and because of the fact that tables specify the left-to-right and top-to bottom order of things in the HTML, tables tend to mean that your layout becomes very much fixed in the HTML.

Realistically I think it's very hard to completely change the layout of a div-and-CSS-based design without changing the divs a bit. However, with a div-and-CSS-based layout it's much easier to tweak things like the spacing between various blocks, and their relative sizes.

The fact that this is a hotly debated question is a testament to the failure of the W3C to anticipate the diversity of layout designs which would be attempted. Using divs+css for semantically-friendly layout is a great concept, but the details of implementation are so flawed that they actually limit creative freedom.

I attempted to switch one of our company's sites from tables to divs, and it was such a headache that I totally scrapped the hours of work I had poured into it and went back to tables. Trying to wrestle with my divs in order to gain control of vertical alignment has cursed me with major psychological issues that I will never shake as long as this debate rages on.

The fact that people must frequently come up with complex and ugly workarounds to accomplish simple design goals (such as vertical alignment) strongly suggests that the rules are not nearly flexible enough. If the specs ARE sufficient, then why do high-profile sites (like SO) find it necessary to bend the rules using tables and other workarounds?

I guess it's true that using the table element for layout has little to do with tabular data. So what? Does my boss care? Do my users care?

Google and other automated systems do care, and they're just as important in many situations. Semantic code is easier for a non-intelligent system to parse and process.

Having had to work with a website that involved 6 layers of nested tables generated by some application, and having had it generate invalid HTML, it was in fact a 3 hour job to rectify it breaking for a minor change.

This is of course the edge case, but table based design is unmaintainable. If you use css, you separate the style out so when fixing the HTML you have less to worry about breaking.

Also, try this with JavaScript. Move a single table cell from one place to another place in another table. Rather complicated to perform where div/span would just work copy-paste-wise.

"Does my boss care"

If I were your boss. You would care. 😉 If you value your life.

Layout flexibility
Imagine you're making a page with a large number of thumbnails.
DIVs :
If you put each thumbnail in a DIV, floated left, maybe 10 of them fit on a row. Make the window narrower, and BAM – it's 6 on a row, or 2, or however many fit.
TABLE:
You have to explicitly say how many cells are in a row. If the window is too narrow, the user has to scroll horizontally.

Maintainability
Same situation as above. Now you want to add three thumbnails to the third row.
DIVs:
Add them in. The layout will automatically adjust.
TABLE: Paste the new cells into the third row. Oops! Now there are too many items there. Cut some from that row and put them on the fourth row. Now there are too many items there. Cut some from that row… (etc)
( Of course, if you're generating the rows and cells with server-side scripting, this probably won't be an issue. )

I think that boat has sailed. If you look at the direction the industry has taken you will notice that CSS and Open Standards are the winners of that discussion. Which in turn means for most html work, with the exception of forms, the designers will use divs instead of tables. I have a hard time with that because I am not a CSS guru but thats the way it is.

Also, don't forget, tables don't quite render well on mobile browsers. Sure, the iPhone has a kick-ass browser but everyone doesn't have an iPhone. Table rendering can be peanuts for modern browsers, but it's a bunch of watermelons for mobile browsers.

I have personally found that many people use too many <div> tags, but in moderation, it can be extremely clean and easy to read. You mention that folks have a harder time reading CSS than tables; in terms of 'code' that maybe true; but in terms of reading content (view > source) it is a heck of a lot easier to understand the structure with stylesheets than with tables.

Looks like you are just used to tables and that's it. Putting layout in a table limits you for just that layout. With CSS you can move bits around, take a look at http://csszengarden.com/ And no, layout does not usally require a lot of nested divs.

With no tables for layout and proper semantics HTML is much cleaner, hence easier to read. Why should someone who cannot understand CSS try to read it? And if someone considers himself to be webdeveloper then the good grasp of CSS is a must.

SEO benefits come from the ability to have most important content higher up the page and having better content-to-markup ratio.

http://www.hotdesign.com/seybold/

  • 508 Compliance – the ability for a screenreader to make sense of your markup.
  • Waiting for render – tables don't render in the browser until it gets to the end of the </table> element.

The whole idea around semantic markup is the separation of markup and presentation, which includes layout.

Div's aren't replacing tables, they have their own use in separating content into blocks of related content (, ). When you don't have the skills and are relying on tables, you'll often have to separate your content in to cells in order to get the desired layout, but you wont need to touch the markup to achieve presentation when using semantic markup. This is really important when the markup is being generated rather than static pages.

Developers need to stop providing markup that implies layout so that those of us who do have the skills to present content can get on with our jobs, and developers don't have to come back to their code to make changes when presentation needs change.

This isn't really about whether 'divs are better than tables for layout'. Someone who understands CSS can duplicate any design using 'layout tables' pretty straightforwardly. The real win is using HTML elements for what they are there for. The reason you would not use tables for non-tablular data is the same reason you don't store integers as character strings – technology works much more easily when you use it for the purpose for which it is desgined. If it was ever necessary to use tables for layout (because of browser shortcomings in the early 1990s) it certainly isn't now.

Tools that use table layouts can become extraordinarily heavy due to the amount of code required to create the layout. SAP's Netweaver Portal by default uses TABLE to layout their pages.

The production SAP portal at my current gig has a home page whose HTML weighs over 60K and goes seven tables deep, three times within the page. Add in the Javascript, the misuse of 16 iframes with similar table issues inside of them, overly heavy CSS etc, and the page weighs over 5MB.

Taking the time to lower the page weight so you can use your bandwidth to do engaging activities with users is worth the effort.

It's worth figuring out CSS and divs so the central content column loads and renders before the sidebar in a page layout. But if you are struggling to use floating divs to vertically align a logo with some sponsorship text, just use the table and move on with life. The Zen garden religion just doesn't give much bang for the buck.

The idea of separating content from presentation is to partition the application so different kinds of work affect different blocks of code. This is actually about change management. But coding standards can only examine the present state of code in a superficial manner.

The change log for an application that depends on coding standards to "separate content from presentation" will show a pattern of parallel changes across vertical silos. If a change to "content" is always accompanied by a change to "presentation", how successful is the partitioning?

If you really want to partition your code productively, use Subversion and review your change logs. Then use the simplest coding techniques — divs, tables, JavaScript, includes, functions, objects, continuations, whatever — to structure the application so that the changes fit in a simple and comfortable manner.

Because it's HELL to maintain a site that uses tables, and takes a LOT longer to code. If you're scared of floating divs, go take a course in them. They're not difficult to understand and they're approximately 100 times more efficient and a million times less a pain in the ass (unless you don't understand them — but hey, welcome to the world of computers).

Anyone considering doing their layout with a table better not expect me to maintain it. It's the most ass-backwards way to render a website. Thank god we have a much better alternative now. I would NEVER go back.

It's scary that some folks might not be aware of the time and energy benefits from creating a site using modern tools.

Tables are not in general easier or more maintainable than CSS. However, there are a few specific layout-problems where tables are indeed the simplest and most flexible solution.

CSS is clearly preferable in cases where presentational markup and CSS support the same kind of design, no one in their right mind would argue that font -tags are better than specifying typography in CSS, since CSS gives you the same power than font -tags, but in a much cleaner way.

The issue with tables, however, is basically that the table-layout model in CSS is not supported in Microsoft Internet Explorer. Tables and CSS are therefore not equivalent in power. The missing part is the grid-like behavior of tables, where the edges of cells align both vertically and horizontally, while cells still expand to contain their content. This behavior is not easy to achieve in pure CSS without hardcoding some dimensions, which makes the design rigid and brittle (as long as we have to support Internet Explorer – in other browsers this is easliy achieved by using display:table-cell ).

So it's not really a question of whether tables or CSS is preferable, but it is a question of recognizing the specific cases where use of tables may make the layout more flexible.

The most important reason for not using tables is accessibility. The Web Content Accessibility Guidelines http://www.w3.org/TR/WCAG10/ advice againt using tables for layout. If you are concerned about accessibility (and in some cases you may be legally obliged to), you should use CSS even if tables are simpler. Note that you can always create the same layout with CSS as with tables, it might just require more work.

I was surprised to see some issues were not already covered, so here are my 2 cents, in addition to all the very valid points made earlier:

.1. CSS & SEO:

a) CSS used to have a very significant impact on SEO by allowing to position the content in the page wherever you want. A few years ago, Search Engines were giving a significant emphasis to "on-page" factors. Something at the top of the page was deemed more relevant to the page than something located at the bottom. "Top of the page" for a spider meant "at the beginning of the code". Using CSS, you could organize your keyword-rich content at the beginning of the code, and still position it wherever you liked in the page. This is still somewhat relevant, but on page factors are less and less important for page ranking.

b) When the layout is moved over to CSS, the HTML page is lighter and therefore loads faster for a search engine spider. (spiders don't bother downloading external css files). Fast loading pages is an important ranking consideration for several search engines, including Google

c) SEO work often requires testing and changing things, which is much more convenient with a CSS based layout

.2. Generated content:

A table is considerably easier to generate programmically than the equivalent CSS layout.

 foreach ($comment as $key=>$value) { echo "<tr><td>$key</td><td>$value</td></tr>"; } 

Generating a table is simple and safe. It is self-contained and integrates well within any template. To do the same with CSS is considerably harder and may be of no benefit at all: hard to edit the CSS stylesheet on the flight, and adding the style inline is no different from using a table (content is not separated from layout).

Further, when a table is generated, the content (in variables) is already separated from the layout (in code), making it as easy to modify.

This is one reason why some very well designed websites (SO for instance) still use table layouts.

Of course, if the results need to be acted upon through JavaScript, divs are worth the trouble.

.3. Quick conversion testing

When figuring out what works for a specific audience, it is useful to be able to change the layout in various ways to figure out what gets the best results. A CSS based layout makes things considerably easier

.4. Different solutions for different problems

Layout tables are usually dissed because "everybody knows divs & CSS" are the way to go.

However the fact remains that tables are faster to create, easier to understand and are more robust than most CSS layouts. (Yes, CSS can be as robust, but a quick look through the net on different browsers and screen resolutions shows it's not often the case)

There are a lot of downsides to tables, including maintenance, lack of flexibility… but let's not throw the baby with the bath water. There are plenty of professional uses for a solution which is both quick and reliable.

Some time ago, I had to rewrite a clean and simple CSS layout using tables because a significant portion of the users would be using an older version of IE with really bad support for CSS

I, for one, am sick and tired of the knee-jerk reaction "Oh noes! Tables for layout!"

As for the "it wasn't intended for that purpose and therefore you shouldn't use it this way" crowd, isn't that hypocrisy? What do you think of all the CSS tricks you have to use to get the darn thing working in most browsers? Were they meant for that purpose?