ما المقصود بــ Tableless web design ؟

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 ولكنها ليست مفيدة إذا وجدت تعديلات كثيرة في خصائص الجدول!.

روابط مفيدة حول الموضوع:

Tableless Layouts

Why tables for layout is stupid

CSS Layout Techniques

7 تعليقات to “ما المقصود بــ Tableless web design ؟”

  1. يزيد Says:

    موضوع اكثر من جيد شكرا

  2. علا من غزة Says:


    واااو
    هذا الموضوع بالتحديد هو ما ابحث عنه بالضبط في هذه الفترة .. بعد ما لاحظت ولاحظ زوار مدونتي بطء تحميلها … انا فعلا استعملت الجداول بكثرة ..

    “عندما يكون تخطيط الصفحة الرئيسي عبارة عن جدول، يعرض الجدول بعد تحميل كافة محتوياته، وربما تكون محتوياته كثيرة”

    !!!

    توي الي عرفت هالمعلومة

    بالتأكيد لازم اعيد قراءته وشكرا كتير على الروابط المرفقة

    تحياتي🙂

  3. صندوق Says:

    أهلا أخي يزيد.

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

  4. علا من غزة Says:


    جاري تعديل كود المدونة .. ان شاء الله يومين بالكتير وتكون النسخة الجديدة نازلة

    بس زادت معايا كمية من اكسير التفاؤل

    فا يرجى الحضور فورا للاستلام

    تحياتي🙂

  5. نور Says:

    السلام عليكم و رحمة الله
    عندي إستفسار صغير .. ما المقصود بالـ bandwidth
    بإنتظار الرد لأنه طُلب مني عمل تقرير حوله و لا أعلم ما هو أساسا و ذُكر هنا في الشرح

  6. smttz Says:

    كمية البيانات التي تنقل خلال فترة معينة من الزمن.
    معلومات أكثر :
    http://en.wikipedia.org/wiki/Bandwidth

  7. المكتب الاعلامى للمهندس اشرف بدر الدين عضو مجلس الشعب عن جماعه الاخوان المسلمين Says:

    http://naebashmoon.blogspot.com/

أضف تعليقاً

إملأ الحقول أدناه بالمعلومات المناسبة أو إضغط على إحدى الأيقونات لتسجيل الدخول:

WordPress.com Logo

أنت تعلق بإستخدام حساب WordPress.com. تسجيل خروج   / تغيير )

صورة تويتر

أنت تعلق بإستخدام حساب Twitter. تسجيل خروج   / تغيير )

Facebook photo

أنت تعلق بإستخدام حساب Facebook. تسجيل خروج   / تغيير )

Google+ photo

أنت تعلق بإستخدام حساب Google+. تسجيل خروج   / تغيير )

Connecting to %s


%d مدونون معجبون بهذه: