वास्तविक तालिका बनाम। डिव तालिका

Question

यह

<table> 
    <tr> 
     <td>Hello</td> 
     <td>World</td> 
    </tr> 
</table> 

इस के साथ किया जा सकता है:

<div> 
    <div style="display: table-row;"> 
     <div style="display: table-cell;">Hello</div> 
     <div style="display: table-cell;">World</div> 
    </div> 
</div> 

अब, वहाँ प्रदर्शन के मामले में इन दोनों के बीच कोई अंतर और/या गति प्रस्तुत करना या वे सिर्फ एक ही कर रहे हैं है ?

Answer 1

यह divs के साथ डेटा तालिकाओं को अनुकरण करने के लिए अर्थात् गलत है और सामान्य रूप से प्रतिपादन के रूप में प्रदर्शन के लिए अप्रासंगिक है। बोतल की गर्दन जावास्क्रिप्ट या बहुत लंबे पृष्ठों से आती है जिसमें बहुत से घोंसले वाले तत्व होते हैं जो आम तौर पर पुराने दिनों में लेआउट बनाने के लिए 100 नेस्टेड टेबल होते हैं।

उनके लिए क्या मतलब है और div के लिए टेबल का उपयोग करें। डिस्प्ले टेबल-पंक्ति और सेल गुण डेटा लेआउट के लिए टेबल बनाने के बाद div लेआउट का अधिक उपयोग करना है। उनको एक लेआउट कॉलम और पंक्तियों के समान देखें, जिन्हें आप समाचार पत्र या पत्रिका में ढूंढ सकते हैं।

प्रदर्शन बुद्धिमान आप, div उदाहरण के साथ और अधिक बाइट्स की जोड़ी lol :)

Answer 2

तालिका को तब तक प्रस्तुत नहीं किया जाएगा जब तक कि उसके सभी मार्कअप डाउनलोड नहीं हो जाते हैं। जबकि व्यक्तिगत divs को उनके मार्कअप डाउनलोड होने के तुरंत बाद प्रस्तुत किया जाएगा। मुझे लगता है कि कुल समय वही होगा, लेकिन divs बेहतर प्रदर्शन और अधिक प्रतिक्रिया की धारणा देगा।

Answer 3

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

Answer 4

इस बारे में कई चर्चाएं हैं और डिली टेबल आमतौर पर स्टाइल में लचीलापन के कारण ऊपरी हाथ प्राप्त करती है। यहां एक लिंक है - http://css-discuss.incutio.com/wiki/Tables_Vs_Divs

Answer 5

पहले उदाहरण में, मैं प्रदर्शन के बारे में चिंता नहीं करता, लेकिन अर्थशास्त्र के बारे में अधिक जानकारी नहीं देता। यदि यह सारणीबद्ध डेटा है, तो <table> का उपयोग करें। यदि यह केवल लेआउट तत्व का प्रतिनिधित्व करने वाले तत्व ब्लॉक हैं, तो <div> का उपयोग करें।

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

यदि यह चिंता बड़े डेटा के कारण होती है, तो मैं उस डेटा के पेजिंग/फ़िल्टरिंग को पेश करने पर विचार करता हूं जिसे आप दिखाना चाहते हैं।

Answer 6

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

Answer 7

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

Answer 8

प्रदर्शन के विषय पर बस मेरे दो सेंट में फेंकना। छोटे (100 पंक्तियों के तहत, उदाहरण के लिए) टेबल के लिए, डीवीवी का उपयोग करके प्रदर्शन में काफी अंतर नहीं आएगा।

आप दूसरी ओर बहुत लंबे डेटासेट उत्पन्न करने के लिए, चाहते हैं, आप पूरी तरह से नीचे हाथ पारंपरिक HTML तालिकाओं का उपयोग करना चाहिए।

संक्षिप्त स्पष्टीकरण:

यह सब मेरी कंपनी के परियोजना, जहां मैं एक जावास्क्रिप्ट वर्ग लिखा procedurally SQL डेटा (यह मॉड्यूल की एक रिपोर्टिंग तरह है) के आधार पर मेरे लिए टेबल उत्पन्न करने के लिए से पैदा की। वैसे भी, मुझे डीआईवी पसंद है इसलिए मैंने इसे डीवीवी आधारित लिखा, ओपी उदाहरण की तरह।

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

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

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

<script type="text/javascript"> 
var time_start = new Date().getTime(); 
var NUM_ROWS = 5000; 
var NUM_CELLS = 8; 
var OLD_STYLE = 1; // toggle 0/1, true/false 
if(OLD_STYLE) 
{ 
    var table = document.createElement('table'); 
    document.body.appendChild(table); 
    for(var a = 0; a < NUM_ROWS; a++) 
    { 
     var row = document.createElement('tr'); 
     for(var b = 0; b < NUM_CELLS; b++) 
     { 
      var cell = document.createElement('td'); 
      cell.innerHTML = 'cell'; 
      row.appendChild(cell); 
     } 
     table.appendChild(row); 
    } 
} 
else 
{ 
    var table = document.createElement('div'); 
    document.body.appendChild(table); 
    for(var a = 0; a < NUM_ROWS; a++) 
    { 
     var row = document.createElement('div'); 
     row.setAttribute('style','display: table-row; padding: 2px;') 
     for(var b = 0; b < NUM_CELLS; b++) 
     { 
      var cell = document.createElement('div'); 
      cell.setAttribute('style','display: table-cell; padding: 2px'); 
      cell.innerHTML = 'cell'; 
      row.appendChild(cell); 
     } 
     table.appendChild(row); 
    } 
} 
var dt = (new Date().getTime() - time_start)/1000; 
console.log(dt + ' seconds'); 
</script> 

Answer 9

मेरी राय में, divs का उपयोग करने का एकमात्र कारण स्टाइलिंग और ब्राउजर आकार के आधार पर लेआउट समायोजित करने के लिए है। यदि यह तोड़ नहीं है, तो इसे ठीक न करें। हालांकि सीएसएस के साथ divs शैली के लिए आसान है।

टेबल्स: पेशेवर- आप एक जटिल जटिल लेआउट प्राप्त कर सकते हैं कि आप इसे कैसे चाहते हैं। अधिक भरोसेमंद। कॉन्स-टेबल जटिल सीएसएस स्टाइल के साथ कभी-कभी थोड़ा अजीब हो जाता है। जिम्मेदार वेबसाइटों के लिए अच्छा नहीं है।

डिव्स: ब्राउज़र इनपुट, शैली के आधार पर अधिक लचीला और आसान के आधार पर समायोजित कर सकते हैं।