الطريق إلى تصاميم خالية من الجداول
مدرج تحت قسم: مقالات
وسم <table> أو الجدول يكاد يكون الوسم الأكثر استخداما لتخطيط مواقعنا بالشكل الذي يراه المصمم مناسبا، ولكن منذ أن ظهرت منظمات كـمنظمة مشروع معايير الويب WaSP، وظهور متصفحات كـالفايرفوكس، بدأ مصممو صفحات الويب بالاتجاه نحو صفحات تتبع نظم ولوائح ومعايير منظمة الويب العالمية والوصول إلى تصاميم تعتمد على معاييير الXHTML مع الCSS خالية من الجداول.
عندما ظهرت الجداول في لغة الHTML ظهرت لسبب واحد، ألا وهو لجدولة البيانات، أي لإظهار بيانات كالمقارانات أو الجداول أو الرسوم البيانية على شكل جدول، ولكن مع ظهور خاصية border=0 التي تتيح إخفاء حدود الجداول قام المصممون باستخدامها لتخطيط المواقع وإداج الصور.
حسنا، ما المشكلة في استخدام هذه الجداول لخطيط الموقع؟
هي ليست مشكلة واحدة عزيزي القارئ، بل هي مشاكل عديدة سأسرد الأهم منها:
- الجداول بطيئة
في أغلب متصفحات الويب في الوقت الحالي، إذا لم تقم بتعريف عرض الجدول عند التصميم، فإن المتصفح سيتوجب عليه تحميل جميع الصور والنصوص الموجودة داخل الجدول قبل أن يستطيع عرضها على الزائر، حتى لو استخدمت الCSS في هذه الجداول فالمشكلة لا تزال قائمة حيث أنك لم تقم بتعريف عرض الجدول، والمشكلة تكبر مع استخدامك للجداول المتفرعة، أي جدول داخل جدول داخل جدول وهكذا، وهذا يسبب الكثير من البطء في موقعك. - توافق الXHTML
ببساطة إذا كنت تستخدم الجداول في تصميم الصفحة فإنك تخالف معايير XHTML والسبب في ذلك كما ذكرت آنفا أن الجداول أنشئت لعرض البيانات المجدولة tablular data كالصورة التي أرفقتها فوق أي كالبيانات التي تستخلص في العادة من برامج قواعد البيانات وما يشابهها. - الجداول تكون خدّاعة
لقد سمعت الكثير الكثير من الشكاوي حول عدم ظهور بعض المواقع بالشكل الصحيح مع هذا المتصفح ولكنها تظهر بالشكل الصحيح مع المتصفح الآخر. والسبب في بعض الأحيان يكون أن المصمم قد نسي إغلاق وسم هنا أو هناك في هذه الجداول وحتى عند التأكد من عدم وجود مشاكل مع الوسوم فإن المشكلة الأكبر هي عند الإنتهاء من التصميم يصبح تخطيط الصفحة كبير ومعقد جدا حتى يصعب عليك التعديل عليه في المستقبل، وفي بعض الأحيان لن يكون عندك خيار آخر إلا تصميم الصفحة من جديد وتخسر بذلك الوقت والجهد الكثير، وكان بإمكانك الإستعاضة عنها باستخدام الCSS وعندما تريد التعديل فإنك تعدل على ملف الCSS الخاص بالموقع وإضافة وسم div هنا أو هناك وتوفر عليك الوقت والجهد. - مشاكل الطباعة
أنا متأكد إنك في بعض الأحيان عندما تريد أن تطبع صفحة من موقع مصمم بالجداول فستجد أجزاء من الصفحة لا تظهر في الطباعة وستجد هذه الأجزاء المقطوعة تطبع في صفحات منفصلة مما يسبب الكثير من الصداع للمستخدم، ولكن عندما تستخدم الCSS في تصميمك فبإمكانك تصميم مخطط لصفحتك فقط للطباعة، أي عندما يريد الزائر طباعة صفحة من موقعك فالمتصفح يقوم باستدعاء ملف التخطيط الخاص بالطباعة وإظهار الأجزاء التي تريد أن تظهرها في الصفحة وإخفاء الأجزاء الغير مهمه، ولقراءة المزيد عن تخطيط الطباعة للصفحة باستخدام الCSS. - قابلية الموقع
المتصفحات النصية (ومنها محركات البحث) ومتصفحات الجيب أو الهواتف الخليوية تعاني كثيرا من تصاميم الجداول، ولا تستطيع قرائتها بالشكل الصحيح، في الواقع فإن منظمة الويب العالمية وفي مقالها لنصائح تصميم الصفحات فأنها تقول “لا تستخدموا الجداول في التصميم” حيث بتصميمك لصفحتك باستخدام الCSS بإمكانك تصميم التخطيط المناسب للمتصفح، سواء كان متصفح جيب أو متصفح الشاشة أو حتى المتصفح العادي للحاسب. - الكفاءة
المواقع المصممة باستخدام الCSS تقدم الكثير من المرونة للمستخدم والمصمم، حيث ليس فقط بإمكان الصمم التعديل على التصميم الكامل للصفحة بتعديل ملف واحد فقط، ولكن أيضا توفير تصاميم بديلة للموقع لاختيارها من قبل المستخدم.
أمثلة لتصاميم جاهزة بدون جداول
فكر بالمستقبل
التوجه الحالي للمتصفحات والمنظمة العالمية للويب يذهب إلى تصاميم تقوم على XHTML مع توافق الCSS حيث أن من المهم عزيزي المصمم أن تفهم وتفرق بين التصميم والمحتوى، فعندما تريد التعديل على التصميم تذهب إلى ملف التصميم، وعندما تريد التعديل على المحتوى تذهب إلى المحتوى، وبهذا يكون موقعك مرتب ومرن. “اكتب مرة، استخدم في أي مكان، لكل الأشخاص” موقعك باستخدام الCSS سيكون قابل للتصفح من أي جهاز و في كل مكان.
المراجع
عن الكاتب
عبدالرحمن العتيبة أحد مؤسسي ورئيس التحرير في موقع المشروع، يهوى برمجة وتطوير الويب بكافة أنواعها، وله خبرة تتعدى 10 سنوات في هذا المجال، يعتبر نفسه من "أشد" مناصري المصادر المفتوحة، وأنها "في يوم ما" ستقضي على كل برنامج محتكر ومغلق مصدره. يعتقد بوجود القمر، ولكنه للأسف لم يصل إليه إلى الآن. يمكنك متابعته على twitter وعلى مدونته.
جزاك الله خير أخي Bo3oof …
عبدالعزيز
ويجزاك أخي عبدالعزيز، وشاكر لك مرورك الكريم
الله يعطيك العافية على هذا المقال ,,, و نتمنى ان نرى دروس Step by step لعمل موقع متوسط المستوى بالـCSS
يزاك الله خير بوعوف مقال روعة
جزاك الله عنا كل الخير يا أستاذ
فعلا تلك النقطة التي ذكرت ان الناس بدأت تستعمل الجداول عندما ذهرت خاصية اخفاء حدود الجداول، وأيضا لأنهم وجدو انها سهلة جدا ، ومحرر فرونت بيج صعب عليه التعامل مع div عكس الجداول، لكن مشكلة توجه أغلب المصممين الى الجداول، هي برامج تقسيم القوالب مثل image ready او fireworks و باقي البرامج
واكبر مشكلة الجداول التي لا يعرفها البعض هي تلك التي ذكرت فيما يخص الطباعة، حيث تبدو الصفحة ممددة على الجانبين الأيمن و الأيسر، وهي مشكلة لا حل لها الا بنسخ المحتوى في ملف نصي، لكن هذا سيؤدي بتشتيت المحتوى
وايا عند نسخ محتوى الصفحة الى ملف الوورد ستكون هناك صعوبة في تشابه ما كان في الموقع و ما نسخ في الملف
ان من يتعامل مع ال div سيجد متعة في تصميمه، حيث انك ان كنت صممت عمل في ورقة بقلم الرصاص وجئت لتطبقه في الموقع وكان تصميمك في الورقة يعتمد على حسابات دقيقة بالبكسل و النسب المئوية، سيكون تطبيقك للعمل تمام الشبه لما صممته ان اعتمدت على الصناديق او المساحة المحجوزة(div)، عكس ان اعتمدت على الجداول
مرة أخرى بارك الله فيك على الموضوع المميز كعادتك
بارك الله فيك اخي كلام رائع
و كما قال الاخ محمد نتمنى ان نرى دروس Step by step لعمل موقع متوسط المستوى بالـCSS
ويجزاكم جميعا على مروركم وتعقيبكم الكريم
نعم بالضبط أخي زيزوار، المشكلة في بعض المصممين إنهم يقسمون صورة مواقعهم ببرامج كالphotoshopt والبرنامج يعطيك صفحة مرتبه آليا بالتقاسيم التي حدتها على الصورة ولكن بالجداول، والمصمم يكمل تصميمه من هذه النقطه وأغلبهم لا يبالي إذا كان التصميم بالطريقة الصحيحية أم خاظئة، أهم شيء إن الموقع يظهر بالصورة المطلوبة وإن كان الثمن بطئ الموقع وعدم توافقه، أنا أنصح بالابتعاد تماما عن برنامج الFrontpage وإذا كان لابد للمصمم من أن يستخدم برنامج مساعد أو كما يطلق عليهم WYSIWYG فأنصح بAdobe Dreamweaver والا اكتفي ببرنامج notepad++
وشكرا لكم إخواني
أما بالنسبة لدروس الخطوة بخطوة، فإن شاء الله إذا كان لدي المزيد من الوقت فسأبدأ بكاتبتها، ولكن في الوقت الحالي أتمنى من الأخوة الذهاب إلى صفحة الأمثلة التي أرفقتها مع المقال ومحاولة التعلم منها ولو القليل حتى تكون لديكم فكرة عن كيفية تطبيق التصاميم الخالية من الجداول إلى حين بداية كتابة مقالات التعلم.
بارك الله فيك أخي Bo3oof وجزاك الله كل خير
شرح بسيط وجميل والأهم من هذا وذاك أنه مهم جداً لمن يريد بناء موقع أو تصميمه
بارك الله فيك،
أخوك
توجد صفحة بها الكثير من الأمثلة الرائعة و أنا تعلمت منها
http://intensivstation.ch/templates/
وأكرر شكري لك أخي Bo3oof
عبدالعزيز
شكرا جزيلا أخي عبدالعزيز على هذا الموقع الرائع،
وتمت إضافته إلى قائمة الأمثلة.
مع تحياتي
السلام عليكم
المصيبة الكبرى التي اراها على الاقل انا . انه باستخدام ال DIV لا يمكنك ان تستخدم ال WYSIWYG بشكل مريح وطلق. لا بل سوف تعود دائما للتعديل اليدوي .
اتوقع ان الانجاز المستقبلي هو انشاء برنامج يتعامل مع الخلايا التي نقوم بانشائها على انها كالجدول بالتصميم اي ان اداه ال ال WYSIWYG يجب ان تكون متطورة اكثر ليتم التصميم بشكل فيجوال بدون الرجوع الى الكود وتعديل الارقام .
بصراحة اجد التصميم بالجداول اسهل .
والسهولة اعتبرها مقياس جيد لانها اسرع
ال DIV جيدة ولكن اخي زيزوار يعرف تماما المشاكل التي واجهتنا مرة وخصوصا لو تصورت معي الشكل التالي
لديك خليتين او صندوقين DIV الاول محاذي الثاني كان عرض الخلية وطولها على سبيل المثال
100×100 بكسل
الخلية الاولى فيها نص والثانية فيها صورة
الان لنفرض جدلا ان الصورة تم تعديلها بصورة اكبر وكان الحجم الخاص بالصورة هو 250 بكسل رضا ؟ سوف تطفو الخلية الخاصة بالصور فوق الخلية الخاصة بالنص وبهذة الحالة لو استخدمت الجداول فالخلايا تتاثر ببعضها اي ان كبرت خلية عن حجمها لسبب اجباري كوجود ملف فلاش اكبر او وصورة اكبر فانها تتطوع وتزيح مكان على الصفحة بعكس ال DIV التي سوف تسمح للخلية ان تطفوا فوقها او تحتها بحسب ال Z Index
وهذا سبب مهم جدا
ناهيك عن ان اداة التحكم بالخلايا ال DIV وانشئها ودمج خليتين واقصد ضمن برامج التصميم ما زالات قاصرة ولا تعطي الانطباع المطلوب .
كلنا نحلم بالانتقال الى ال DIV فهي جيدة وقوية ولكن ال TABLE بصراحة امتن في التصميم وان كنا نتحدث عن سرعة العرض فاقول لك ان الانرتنت اصبحت سريعة بما يكفي . ومحررات الويب تضع عرض الجداول بشكل اتوماتيكي.
مع جزيل التقدير للموقع الذي ازورة للمرة الاولى ولن تكون الأخيرة .
وعليكم السلام ورحمة الله تعالى وبركاته، حياك الله أخي بيشو،
أنت ذكرتني بالجدل الذي دار بيني وبين أحد الأخوة، ماهو أفضل visual basic أم c++؟
المشكلة عزيزي بيشو هنا تكمن في مالذي تريده أنت، نحن هنا نسعى إلى الارتقاء بالمصممين العرب إلى الاحتراف، ولا نريدهم مجرد هواه، كل شيء في بالك يعمل بالجداول سوف يعمل بالCSS وأحسن، وليس أنا أقول هذا الكلام بل هي منظمة الويب العالمية وأنا أؤكد لك هذا من واقع خبرتي.
نرجع للمقارنة التي ذكرتها في السابق، بالفيجوال بيسك أنا مستعد أصمم برنامج كامل وحلو ويرضيني ولكن (بتحكم قليل بالخصائص) بوقت قليل، ولكن إذا أردت أن أسعى للإحترافية في برمجياتي والتحكم بكل البرنامج وكل صغيره وكبيرة والمرونة فسأكيد سأذهب للسي.
برامج الWYSIWYG وتصميم الجداول بالتأكيد سهلة وسريعة وتفضي في بعض الأحيان بالغرض اذا كان الموقع بسيط، لكن السؤال هنا هل هي احترافية؟
أخي الكريم لا يوجد أي وجه للمقارنه بين الCSS والجداول، كما ذكرت لك في البداية من يقارن بالاثنين كمن يقارن الفيجوال بيك مع السي.
نحن كما ذكرت لك في السابق نسعى إلى الوصول إلى الاحترافية في تصاميمنا ومتابعة معايير منظمة الويب العالمية لكي تكون مواقعنا تعمل على كل المتصفحات.
وأنصحك أخي بيشو بالمرور على الأمثلة للتصاميم التي أرفقتها مع المقال لكي ترى بنفسك كيف تستطيع التحكم بكل صغيرة وكبيرة بالCSS
وشاكر لك مرورك وتعقيبك الكريم،
صديقي بوعوف
لو سمحت فضلا لا امرا فقط اريني مثال واحد عن الحالة التي ذكرتها لك.
يعني اريد ان تتاثر الخلايا الاخرى ببيعضها .
الموضوع ليس احترافية ان اكتب بيدي . الاحترافية هي السرعة .
هذا على الاقل معياري انا .
وان كانت ال CCS تصميممها اسرع من الجداول . فثق اني سوف اتجه اليها .
أخي الكريم بيشو، لا يجب أن تستخدم خاصية z-index في CSS، في الحقيقية قليلة هي المواقع التي تستخدم هذه الخاصية، أما حجم الصناديق وتأثرها ببعضها البعض فهذا يمكن تطبيقه لو أردت، ليس لدي رابط أعطيك إياه لكي تعرف كيف تقوم بذلك، لكنني متأكد من أنك تستطيع فعل ذلك.
مسألة أخرى، أنت كمطور مواقع لا تبحث عن السهولة لنفسك وتنسى ما هو في صالح الموقع والزائر، هذا الأمر ينطبق مع البرمجة، يمكن لأي شخص أن يقوم بإنشاء برنامج بسيط لإدارة محتويات الموقع، لكن إن أردت الأمان العالي والإتقان فلا بد من الغوص في الصعب، لا بد من إنفاق بعض الوقت للتعلم والإتقان والتطور المستمر الدائم، أي شيء غير ذلك فمعناه الجمود والتوقف على ما تعلمناه في الماضي، وإن رضينا بالماضي وما حققناه فيه فهذا يعني أننا لم نعود مطوري مواقع أو مبرمجين، الأمر ينطبق مع كل المحترفين، سواء كانوا أطباء أو مهندسين أو غيرهم.
نصيحة: عليكم بكتاب Eric Meyer on CSS وكذلك More Eric Meyer on CSS.
مقال ممتاز جدا ..
كفيت ووفيت ..
إضافه لموضوع الفرق بين السرعه في الـ table و Div
فالمعروف ان الجدول يتحمل خليه ثم الخليه التي تليها بالتسلسل وهذا يعتبر نوعا ما نوعا من انواع البطء .
بعكس الـ Div اللي يحمل المحويات بالتوازي
ولكن السوال هو ان الجميع يعارض استخدام الجداول ولكنك ترى نفسك احيانا مجبرا على ذلك كإستخدام الـ grid على سبيل المثال
فهل يوجد طريقه لتخطي ذلك ؟
تحياتي
أخي العزيز البحر
ربما اختلط عليك الأمر قليلا، أنا موضوعي يهدف إلى التخلص من استخدام الجداول في تخطيط الصفحة أو layout أي يعني وضع الصور أو المقدمة header أو footer وترتيبهم باستخدام الجداول والاستعاضة عنها باستخدام divs.
والجداول أصلا صممت لكي يتم استخدامها في البيانات المجدولة وGrid، أي ﻻ يجب عليك استخدام div هنا والا صعبت عليك المسألة واختلط عليك الأمر.
الهدف كله في النهاية هو استخدام كل وسم في مكانه الصحيح والذي صمم لأجله، أي انك تستخدم وسم table في البيانات المجدولة أو في grid، وتستخدم وسم div مثلا في التقسيم لمخطط الصفحة وهكذا…
أتمنى أن أكون قد وضحت لك الفكرة.
شكرا لكم على المقال .. انا اتجهت للتصميم بـ
شكرا أخي
الجداول أعتقد بأنها صارت مزعجة عندما تريد أن تصمم شيءا جديدا و خارجا عن المألوف
لأنها “تجبرك” على التصميم بإنتظام و أفقية و لا تساعدك على إنشاء تصاميم إبداعية
شكرا