لماذا يجب تجنب استخدام الجداول المتداخلة

الجداول المتداخلة بطيئة صفحات الويب الخاصة بك

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

ما هو جدول متداخل؟

جدول متداخل هو جدول HTML يحتوي على جدول آخر بداخله. فمثلا:




العمود 1
العمود 2
العمود 3

العمود 1




عمود الجدول المتداخل 1
عمود الجدول المتداخل 2



العمود 3

العمود 1
العمود 2
العمود 3

متداخلة جداول السبب صفحات لتنزيل المزيد ببطء

لن يؤدي جدول واحد على صفحة ويب إلى تحميل الصفحة ببطء أكبر (ضمن السبب). ولكن في اللحظة التي تضع فيها جدولًا واحدًا في جدول آخر ، يصبح الأمر أكثر تعقيدًا عند عرض المستعرض ، بحيث يتم تحميل الصفحة ببطء أكبر. وكلما ازداد عدد الجداول المتداخلة داخل بعضها البعض ، سيتم تحميل الصفحة أبطأ.

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

جداول للتخطيط

يجب ألا تستخدم جداول التخطيط في صفحات الويب الخاصة بك. وهي تتطلب دائمًا تقريبًا استخدام الجداول المتداخلة ، بحيث يتم تحميل صفحة ويب تخطيط الجدول ببطء أكثر من نفس التصميم المعروض في CSS.

أيضا ، إذا كنت تحاول كتابة XHTML صالح ، يجب عدم استخدام الجداول للتخطيط على الإطلاق. الجداول هي للبيانات المجدولة (مثل جداول البيانات) ، وليس للتخطيط. بدلاً من ذلك ، يجب عليك استخدام CSS للتخطيط - تتجلى تصاميم CSS بسرعة أكبر وتساعدك على الحفاظ على XHTML صالح.

تصميم أسرع تحميل الجداول

إذا صممت جدولًا بصفوف متعددة ، فيمكن غالبًا تحميله بسرعة أكبر إذا كتبت كل صف كجدول منفصل. على سبيل المثال ، يمكنك كتابة جدول مثل هذا:




الصف العلوي

العمود الأيسر
العمود الأيمن

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



الصف العلوي




العمود الأيسر
العمود الأيمن

تحويل الجداول المتداخلة إلى جدول واحد

قد تشعر أن كل هذه معلومات جيدة ، ولكن لديك جدول يجب أن يحتوي على جدول آخر متداخل فيه. في حين أن هذا قد يكون صحيحًا ، فغالبًا ما يمكنك تحويل الجداول المتداخلة إلى جداول مفردة أكثر تعقيدًا باستخدام السمات الموجودة في خلايا الجدول. على سبيل المثال ، في الجدول المتداخل في الأعلى ، يمكنني تحويل هذا إلى جدول واحد بسمة colspan فقط:





العمود 1
colspan = "2" > العمود 2
العمود 3

العمود 1
عمود الجدول المتداخل 1
عمود الجدول المتداخل 2
العمود 3

العمود 1
colspan = "2" > العمود 2
العمود 3

يحتوي هذا الجدول أيضًا على فائدة استخدام أحرف أقل من الجدول المتداخل ، لذلك سيتم تنزيله بشكل أسرع بسبب ذلك أيضًا.