HTML: لماذا يفضل استعمال DIV ليس Table؟

لماذا يفضل استعمال DIV ليس Table

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

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

بطء قراءة المتصفحات للجداول:

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

سوء مظهر عملية التحميل للجداول:

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

لماذا يفضل استعمال DIV ليس Table

تقليل وزن الصفحة:

استعمال الجداول ينتج عنه الكثير من التفاصيل داخل نص الكود مما يرفع الوزن لصفحات الموقع والذي بدوره يؤثر سلبا على سرعة تحميل الصفحة وعلى معدل استهلاك البيانات (الترافك).

امتلاك الـ DIV تاج مرونة أكبر:

عند استخدام الـ DIV تاج نجد أن التكامل ما بينه وبين كل من صفحات التنسيق CSS والنصوص البرمجية المكتوبة بلغات أخرى كالـ PHP و JavaSicrpt تحمل مرونة أكبر وقدرا أقل من التعقيد.

سهولة التعديل لاحقا:

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

DIV تاج صديق لمحركات البحث:

يدرك محترفوا  SEO أو ما يسمى مجازا صداقة محركات البحث أن إعداد الموقع لأداء أفضل مع محركات البحث والتعديل في الـ HTML لملائمة محركات البحث يكون أسهل وأكثر جدوى في المواقع التي تعتمد على DIV تاج في بنية الصفحة بمراحل من التي تعتمد على الجداول.
قد يكون البعض متخوفا من تغيير نمط تعود عليه لفترة طويلة، لكني أعد جميع من يصمم المواقع بواسطة الجداول فيما لو فرغ من وقته القليل لتعلم الـ HTML و CSS بحال أفضل وعمل أكثر احترافية ومرونة، ومن حسن الحظ أنها من السهولة بحيث تدخل من هنا لتتعلم كل هذه التقنيات في وقت قصير وبشكل ممتع.
  • جزاك الله خيراً، يشرفني أن أكون أول من علق على موضوعك، في انتظار موضوعاتك القادمة.

  • كلام رائع جداً.. شكراً لك

    لكن هناك حالة لانستطيع أن نصمم فيها الصفحة بـ الـ Div والحل الوحيد لذلك هو طريقة الجداول.. حد بعرفها ؟

    • مممم ممكن فى نظام جوملا 1.0 … او ان الصفحه نفسها مطلوب فيها جدول

    • السلام عليكم ورحمة الله.
      أعتقد أن الحالة التي تتكلم عنها هي حالة الإيميل. هل أنا مخطئ؟

      • نعم.. كلامك مزبوط الطريقة الوحيدة لتصميم الرسائل الإحترافية مثل Newsletter هي بطريقة الجداول وهي معقدة وصعبة شوي

    • جزاك الله خيرا.
      لدي إضافة: حتى div سيقل استخدامه كثيرا مع البدء في استخدام وسوم header, footer, nav, article, section, aside في html5.

      • Nawar

        بالفعل ، فطبقا لمواصفات HTML5 ، الوسم div لا يُنصح استخدامه الا في حالة عدم وجود وسم آخر مناسب
        و شكرا لطرح الموضوع ، و فى انتظارك اسبوعيا بأذن الله

  • mohamed

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

    التوفيق لك ,,,

  • من على الكوكب اليوم ما زال يستعمل الجداول ؟.. أطالب بإعدامهم !!

    • سلام الله عليكم و رحمته و بركاته

      أشكر الأخ محمد على المعلومات الجميلة التي قدمها لنا.
      بخصوص أخي شريف ، نعم هناك من يستعمل الجداول لحد الان و كمثال جوجل 😀

  • AbdullahWeber

    رائع يامحمد ! , مقال جدّا مفيد .. وبالفعل الجداول أصبحت من العصر الحجري

  • @w

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

    اما div فهو اختصار division ومعناها قسم او جزء و تستخدم لتقسيم صفحتك كما تحب مثل ما p اختصار ل paragraph ومخصصه لعرض جزء نصي من مقال .. و هكذا دواليك

  • تركي الجابر

    شكراً محمد على هالكلام الجميل والمعلومات المفيده سأرسل هالمقال كل ما كان يدافع مع الجداول لأنه يتقنها باحتراف 🙂

    والصراحة هذي احد معاييري في تقييم المواقع.

  • Mobarak Musaied

    مقال جيد جداً يخدم كثير من المصممين الذين يتعاملون بالجداول

    وانا مجرب شخصياً التعامل من div
    فهو اسهل بكثير ويقدم لك متعة في التعامل مع الصفحة وسهولة في التعديل ويقدمك لعملائك كمحترف

  • محمد زهران

    انا فعلا بستخدم الـ div منذ وقت ليس بالقصير بالإضافة إلي ul لإضافة المرونه علي الأكواد .. ( مبرمج )

  • عادل

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

  • سلطان

    مقال حلو جدا صديقي محمد.. وإن شاء الله يفيد المصممين والمطورين

    ومتأكد عندك الكثير في إنتظارك

  • أخي محمد شكرا على هذه المقالة, فمنذ فترة سألني صديق لي سؤال عن نفس موضوع هذه المقالة, ووجدت فيها الجواب الشافي.

  • الـ DIV اكثر مرونة من الجداول ويعطي مطور المواقع خيارات اكثر وانسيابيه في التعامل ,, لكن من يستخدم الجداول ليس جاهل ولا عايش في العصر الحجري مثل ما يقول البعض ,, كل مطور ويب له حرية ان يصمم موقعه كيفما يشاء وبا الطريقة التي تعجبة هو وليس شرط ان تعجب غيره ,, ولو كانت الجداول في العصر الحجري لما وجدت اصلا ً ,, هناك اشخاص تعودو على الجداول ولا يحبون التعامل مع الـ DIV هذا شي راجع لهم لكنهم ليسو متخلفين وعايشين في العصر الحجري ,, بل التخلف هو ان تفرض طريقة على انها الافضل وتجبر غيرك على العمل بها

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

    نترقب مقالاتك الأسبوعية بشغف ^_^

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

  • محمد النحراوي

    من وجهة نظري أن إستخدام الجداول أيسر واكثر تنظيماً خاصة عند تنظيم بيانات كثيرة أو معقدة مثل جداول البيانات (وهذه وجهة نظري والتي أعلم أن هناك من يرى عكسها)

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

  • تدوينة رائعة جداً ومفيده
    افضل استخدام ال div عن ال table بكثير

  • شكرا على المعلومات القيمة
    فعلا تأثير Div أقوى من تأثيرات الجداول في محركات البحث وكذلك تحميل الصفحة
    أنا كذلك أحب التعامل أكثر مع Div
    لكن في بعض الاكواد لا أجد سبيل سوى الجداول

تعليقات عبر الفيسبوك