हमें डिज़ाइन में <table> का उपयोग क्यों नहीं करना चाहिए?

Question

टेबल के साथ वेबसाइटों को डिज़ाइन नहीं किया जाना चाहिए, इसके लिए कुछ स्पष्ट और तार्किक कारण क्या हैं? उद्योग में इस विचार को चलाने के क्या लाभ हैं? तालिका का उपयोग कब करना ठीक है?

Comments

बड़े पैमाने पर इतने पर चर्चा की stackoverflow.com/questions/83073/...

— गैब्रिएल Petrioli

उदाहरण के लिए ऐडवर्ड्स के भीतर, Google स्वयं तालिकाओं का उपयोग करता है। लाखों विज्ञापनदाताओं के साथ लॉगिंग और डायनेमिक डेटा के साथ काम करना <table>एक सीएसएस ग्रिड के आसपास कोड करना बहुत आसान है । मैं कुछ अनुप्रयोगों के लिए datatables.net का उपयोग करता हूं और आप उनकी साइट पर उस jquery प्लगइन का उपयोग करने वाले की एक सूची देख सकते हैं। साइटों के बहुत सारे अभी भी अच्छे कारणों के लिए तालिकाओं का उपयोग करते हैं। मैं केवल तालिकाओं का उपयोग करता हूं, जब बहुत सारे गतिशील डेटा के साथ काम करते हैं, जिन्हें कॉलम पेजिंग आदि द्वारा क्रमबद्ध करने की आवश्यकता होती है, लेकिन पेज लेआउट के लिए नहीं कि सीएसएस क्या है।

— अंगियो

Answer 1

1) टेबल्स का उपयोग पेज लेआउट के लिए नहीं किया जाना चाहिए क्योंकि वे हैं:

• ब्राउज़र को रेंडर करने के लिए धीरे-धीरे डाउनलोड करना होगा - यदि ठीक से रेंडर करने के लिए तालिका के सभी - नहीं तो

• उन्हें गैर-टेबल लेआउट की तुलना में अधिक HTML की आवश्यकता होती है, जिसका अर्थ है धीमी लोडिंग और रेंडरिंग, साथ ही साथ एक बढ़ा बैंडविड्थ उपयोग

• वे बनाए रखने के लिए एक दुःस्वप्न हो सकते हैं क्योंकि वे जल्दी से जटिल हो सकते हैं

• वे पाठ की नकल को तोड़ सकते हैं

• वे स्क्रीन पाठकों को नकारात्मक रूप से प्रभावित करते हैं और आपकी सामग्री को कुछ उपयोगकर्ताओं के लिए अप्राप्य बना सकते हैं

• वे उचित सिमेंटिक मार्कअप का उपयोग करने के रूप में लचीले नहीं हैं

• पृष्ठ लेआउट के लिए उनका उपयोग कभी नहीं किया गया था

• एक उत्तरदायी लेआउट में तालिकाओं को नियंत्रित करना बहुत मुश्किल है

2) सारणीबद्ध डेटा के लिए एक तालिका का उपयोग करें। तालिकाओं के लिए यही है।

यह भी देखें: लोग डिव के साथ टेबल क्यों बना रहे हैं?

Comments

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

— गुप्त

डिज़ाइनर जो टेबल से पूरी तरह बचते हैं, वे नहीं जानते कि वे क्या कर रहे हैं। उन्होंने गलत समझा है कि "पेज लेआउट के लिए तालिकाओं का उपयोग न करें" का अर्थ है।

— जॉन कोंडे

यह पूरी तरह से तालिकाओं से बचने के लिए बेवकूफ है, लेकिन संपर्क जानकारी के लिए तालिकाओं के वैध विकल्प हैं। एक परिभाषा सूची एक अच्छा विकल्प है, खासकर जब एक hCard को लागू करते हैं: cagintranet.com/archive/…

— Lèse majesté

@ लितसो: आपको DLयह तय करने से पहले डब्ल्यू 3 सी के अपने चश्मे को पढ़ना चाहिए कि यह किसके लिए अच्छा है या अच्छा नहीं है।

— लेजे मेजेस्टे

एक स्थिति यह भी है: उन्हें HTML में रखे बिना टेबल-आधारित लेआउट बनाने के लिए टेबल सीएसएस टैग। कुछ आला मामले हैं जहां टेबल अभी भी लेआउट के लिए सबसे अच्छा / सबसे आसान विकल्प हैं। मेरा मतलब देखने के लिए एक नज़र @ css-tricks.com/fluid-width-equal-height-columns लें ।

— इवान प्लाइस

Answer 2

तालिकाएँ सारणीबद्ध डेटा के लिए होती हैं, न कि डिज़ाइन के लिए। लोग अक्सर पृष्ठों को "तालिका रहित" बनाने के पीछे की प्रेरणा को गलत समझते हैं।

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

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

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

Answer 3

टेबल्स में डेटा शामिल होना चाहिए, न कि तत्वों को डिज़ाइन करना।

Answer 4

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

Comments

क्यों होता है पतन?

— क्रिस बैलेंस

Answer 5

तालिकाओं का उपयोग नहीं करने का असली कारण है:

तालिका का डिफ़ॉल्ट लेआउट है: table-layout:fixed

यह ब्राउज़र को तालिका का विश्लेषण करने और कोशिकाओं को उनके अंदर के तत्वों को ठीक करने के लिए कहता है, जिसमें कुछ समय लगता है। (यही कारण है कि तालिकाओं जटिल डेटा के लिए बहुत अच्छे हैं)

निचला रेखा: तालिका को उसके अंदर की सभी सामग्री के बाद रेंडर किया जाएगा , जैसा कि DIV तत्वों का उपयोग करते समय विरोध किया जाता है।

Answer 6

मैं निश्चित रूप से मिश्रित तरल में वेब डिजाइन संरचना के लिए तालिकाओं का उपयोग करता हूं और मैं जानता हूं कि कई लोग कहते हैं कि टेबल नोबस के लिए हैं दूसरों का कहना है कि वे पुराने स्कूल के लोगों के लिए हैं जो हमेशा कहते हैं कि DIVS सर्वश्रेष्ठ हैं लेकिन सच्चाई यह है कि तालियां किसी चीज के लिए बेहतर हैं और DIVS के लिए दूसरी बात।

क्या बेहतर एक है <br>या एक <p></p>? वही चीज़

मेरे नए 2015 वेब डिज़ाइन में मेरे और मेरे पुराने टेबल किसी को भी मेरे अनुकूल मोबाइल 100% चौड़ाई वाले बट्स को 2 साइड कॉलम 200px प्रत्येक के साथ मिला सकते हैं।

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

डिफ़ॉल्ट टेबल लेआउट कहने वालों को तय किया गया है? मैं आपको एक उदाहरण देता हूं

<table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="200">left</td>
    <td width="100%">middle</td>
    <td width="200">right</td>
  </tr>
</table>

क्या अब आपको क्षमता दिखाई दे रही है? इसे पीसी और सेलफोन पर देखें। आह हाँ और मुझे बूटस्ट्रैप की भी ज़रूरत नहीं है।

अब divs के साथ ऐसा करने के लिए आपको संरेखित फ्लोट और बकवास प्रदर्शित करने के लिए बहुत सारे CSS कोड लिखने होंगे। किसने लिखा कम कोड? मेरे! ग्राहकों को क्या चाहिए? एक आदमी 1 साल में या 1 महीने में एक पेज खत्म कर रहा है?

अब divs के साथ डिजाइन में सुधार करने देता है

<div style="width:100%; min-width:1000px; height:200px;">top menu or nav</div>
<table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="200">left</td>
    <td width="100%">middle</td>
    <td width="200">right</td>
  </tr>
</table>
<div style="width:100%; min-width:1000px; height:200px;">top menu or nav</div>

इतना सुंदर 5 कॉलम डिजाइन लेआउट divs और तालिकाओं का उपयोग कर।

आपका जवाब है: वे दोनों एक साथ बेहतर काम करते हैं और तेज़ हैं और यह टीवी और छोटे सेलफोन पर भी किसी भी डिज़ाइन पर अच्छा लगेगा।