css bootstrap الجدول الفعلي مقابل. جدول Div



table html css (8)

برأيي ، السبب الوحيد لاستخدام div هو تصميم وضبط التخطيط بناءً على حجم المتصفح. إذا لم تكن مكسورة ، فلا تصلحها. الأسس هي أسهل في الاسلوب مع المغلق.

الجداول: الايجابيات ، يمكنك الحصول على تخطيط معقد للغاية بالضبط كيف تريد ذلك. أكثر موثوقية. جداول cons-get غريبا بعض الشيء أحياناً مع css معقدة. ليست جيدة للمواقع المسؤولة.

Divs: يمكن ضبطه بناءً على إدخال المستعرض ، وأكثر مرونة وأسهل في التصميم.

هذه

<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 ، لول :)


Answer #2

أردت أن أذكر أنه إذا كنت تستخدم بنية الجدول بدلا من div من المستخدمين يمكن أن يحمل CMD (أو ALT في windows) لتحديد منطقة معينة من البيانات من الجدول لنسخ. هذه البيانات أيضا يلصق بسهولة جدا في برنامج Excel وغيرها من برامج العمل المماثلة.


Answer #3

مجرد رمي في بلدي سنتا على موضوع الأداء. بالنسبة للجداول الصغيرة (أقل من 100 صف ، على سبيل المثال) ، فإن استخدام وحدات DIV لن يؤدي إلى الكثير من الأداء.

إذا كنت تريد إنشاء مجموعات بيانات طويلة جدًا ، من جهة أخرى ، يجب عليك استخدام تسلسل HTML التقليدي تمامًا.

شرح موجز:

كل هذا أنتج من مشروع شركتي ، حيث كتبت فئة جافا سكريبت لإنشاء جداول من الناحية الإجرائية بالنسبة لي على أساس بيانات SQL (إنه نوع من التقارير عن الوحدة النمطية). على أي حال ، أنا أحب DIVs لذلك أنا كتبت ذلك ليكون المستندة إلى DIV ، يشبه إلى حد كبير المثال OP.

بعد بعض الأداء البشع (في IE8 على وجه الخصوص) ، قررت إعادة كتابته باستخدام الجداول فقط لأنه بيانات جدولة بسيطة ، بشكل عام. الجداول ، لأي سبب من الأسباب ، تبلغ ضعف السرعة على جهازي في Chrome. وينطبق الشيء نفسه على رحلات السفاري.

ومع ذلك ، ولأنني لا أستطيع تقديم رمز العمل الخاص بي ، فقد كتبت القليل من المقاييس التي تسمح لك فقط بمحاولة إما المنهجية. سترى أنها متماثلة تقريبًا ، وتستخدم واحدة فقط 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 #4

في المقام الأول ، لا داعي للقلق بشأن الأداء ، ولكن المزيد حول الدلالات. إذا كانت البيانات مجدولة ، فاستخدم <table> . إذا كان يتم حظر العناصر التي تمثل عنصر تخطيط ، فاستخدم <div> .

إذا كنت حقاً قلقًا بشأن الأداء ، فستظل الإجابة تعتمد على العميل المستخدم. ومن المعروف MSIE على سبيل المثال أن تكون بطيئة في تقديم الجدول. يجب عليك على الأقل اختبار نفسك في متصفحات مختلفة.

إذا كان سبب هذا القلق هو البيانات الكبيرة ، فحينئذٍ سأعتبر إدخال الترحيل / التصفية للبيانات التي توشك على عرضها.


Answer #5

هناك العديد من المناقشات حول هذا الجدول وعادة ما يحصل على الجدول الأعلى اليد العليا بسبب مرونته في التصميم. هنا رابط واحد - http://css-discuss.incutio.com/wiki/Tables_Vs_Divs


Answer #6

لن يتم عرض الجدول حتى يتم تنزيل كل علاماته. بينما سيتم عرض divs الفردية بمجرد تنزيل الترميز. أعتقد أن الوقت الإجمالي سيكون هو نفسه ، لكن الأقسام ستعطي فكرة عن أداء أفضل واستجابة أكثر.


Answer #7

إذا كنت تعرض بيانات جدولة ، فيجب عليك استخدام جدول - ذلك ، والعناصر ذات الصلة ، تحتوي على جميع الدلالات اللازمة لتمثيل جدول البيانات. فوضى من divs لا شيء.





html-table