السلام عليكم ورحمة الله تعالى وبركاته، وبعد

وسم <table> أو الجدول يكاد يكون الوسم الأكثر استخداما لتخطيط مواقعنا بالشكل الذي يراه المصمم مناسبا، ولكن منذ أن ظهرت منظمات كـمنظمة مشروع معايير الويب WaSP، وظهور متصفحات كـالفايرفوكس، بدأ مصممو صفحات الويب بالاتجاه نحو صفحات تتبع نظم ولوائح ومعايير منظمة الويب العالمية والوصول إلى تصاميم تعتمد على معاييير الXHTML مع الCSS خالية من الجداول.

مثال للجدول

عندما ظهرت الجداول في لغة الHTML ظهرت لسبب واحد، ألا وهو لجدولة البيانات، أي لإظهار بيانات كالمقارانات أو الجداول أو الرسوم البيانية على شكل جدول، ولكن مع ظهور خاصية border=0 التي تتيح إخفاء حدود الجداول قام المصممون باستخدامها لتخطيط المواقع وإداج الصور والخ…

حسنا، ما المشكلة في استخدام هذه الجداول لخطيط الموقع؟

هي ليست مشكلة واحدة عزيزي القارئ، بل هي مشاكل عديدة سأسرد الأهم منها:

  • الجداول بطيئة

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

  • توافق الXHTML

    ببساطة إذا كنت تستخدم الجداول في تصميم الصفحة فإنك تخالف معايير XHTML والسبب في ذلك كما ذكرت آنفا أن الجداول أنشئت لعرض البيانات المجدولة tablular data كالصورة التي أرفقتها فوق أي كالبيانات التي تستخلص في العادة من برامج قواعد البيانات وما يشابهها.

  • الجداول تكون خدّاعة

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

  • مشاكل الطباعة

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

  • قابلية الموقع

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

  • الكفاءة

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

أمثلة لتصاميم جاهزة بدون جداول

فكر بالمستقبل

التوجه الحالي للمتصفحات والمنظمة العالمية للويب يذهب إلى تصاميم تقوم على XHTML مع توافق الCSS حيث أن من المهم عزيزي المصمم أن تفهم وتفرق بين التصميم والمحتوى، فعندما تريد التعديل على التصميم تذهب إلى ملف التصميم، وعندما تريد التعديل على المحتوى تذهب إلى المحتوى، وبهذا يكون موقعك مرتب ومرن. “اكتب مرة، استخدم في أي مكان، لكل الأشخاص” موقعك باستخدام الCSS سيكون قابل للتصفح من أي جهاز و في كل مكان.

المراجع

هذا وصلى الله على محمد وعلى آله وصحبه وسلم،

مع تحياتي،