Tableless web design هي طريقة ونهج لتصميم صفحات الانترنت بدون استخدام HTML Tables لتخطيط الصفحة، واستخدام <div> بدلا منها عن طريق CSS Positioning، هذه الطريقة حلت محل الجداول في التصميم يمكنك التحقق من ذلك ا إذا استعرضت أكواد للمواقع الأجنبية الحديثة مثلا wordpress، ستجد أنه الأغلبية امتنع عن استعمال الجداول. المعيايير تقول أنه يمكن استخدام جداول HTML فقط لعرض البيانات المجدولة.
لهذه الطريقة الحديثة مجموعة من المميزات منها:
- قابلية الوصول: استخدام هذه الطريقة يسهل الوصول لمحتوى الصفحة لمجموعة من الأجهزة مثل PDA ، mobile phone.
- تقليل bandwidth: وذلك لأنه كثير من الجداول كانت تستخدم فقط لتخطيط الصفحة يعني كثير من <table> <tr> <td> فضلا عن المحتوى نفسه، استبدال هذه الأكواد بـ <div> وبعض التنسيقات يقلل من وزن الصفحة ويساعد على التحميل السريع للصفحة خصوصا لدى الأجهزة المحمولة والتي يعد الـ bandwidth من الموارد المهمة فيها.
- فصل المحتوى عن العرض: كانت الجداول سابقا جزء من التنسيق الأساسي للصفحة وكان التعديل في نمط معين يلزم التغيير في خصائص الجدول، أما بهذه الطريقة فالتعديل سهل عن طريق إضافة أو تعديل أنماط CSS والتي غالبا تكون منفصلة عن المحتوى.
- سرعة عرض وتحميل الموقع على المتصفح: عندما يكون تخطيط الصفحة الرئيسي عبارة عن جدول، يعرض الجدول بعد تحميل كافة محتوياته، وربما تكون محتوياته كثيرة! بعكس عندما تخطط وتقسم بـ <div> لذا يلاحظ أن المواقع بالطريقة الجديدة أسرع بالتحميل على المتصفح.
لا يوجد مساوئ لهذه الطريقة سوى أنها تتطلب جهد أكبر للمبتدئين ومعرفة جيدة بـ CSS، نلاحظ حتى Adobe أزالت خيار Table Layout من آخر نسخة Dreamweaver CS3. من يريد استعمال هذه الطريقة يجب أن يأخذ بعين الاعتبار أنه تطبيق معايير CSS تختلف متصفح لآخر لذا ينصح بتجربة الموقع على مجموعة من المتصفحات أثناء عملية التصميم ليكون موقعك Cross-browser compatible .
يوجد طريقة لتحويل جميع الجداول من صفحة ما إلى div layout من خلال Dreamweaver عن طريق:
Modify > Layout Mode > Convert Tables to Layers ولكنها ليست مفيدة إذا وجدت تعديلات كثيرة في خصائص الجدول!.
روابط مفيدة حول الموضوع:
