كلنا نعلم أن استخدام الجداول من أول و أهم المهارات التى يتعلمها مصمم المواقع فيتعلم كيف يقوم بإنشاء جداول لتنسيق الصفحة، و يضع الكثير من الجداول بداخل بعضها (nested tables) حتى يحصل على الشكل الذى يريده و لكن هل سألت نفسك، هل هذه هى أفضل وسيلة لتنسيق الصفحات؟ لنجيب عن هذا السؤال دعنى أسألك سؤالا آخر، هل كانت لديك صفحة كبيرة مليئة بالجداول و أردت أن تعدل شيئًا فى الكود؟ لابد أنك قد وجدت الكثير من <td> , </td> , <tr> , </tr> فلا تعلم كل واحد منها لأى خلية فى أى جدول و ماذا لو عدلت فى الكود، و عن طريق الخطأ وضعت <td> فى غير مكانها؟ يتغير شكل الصفحة تمامًا و ينهار التصميم، فتحاول البحث هنا و هناك عن مكان هذا الـ <td> البائس و قد يحالفك الحظ، أو ينتهى الأمر بإعدة تصميم الصفحة من البداية !! مأساة ... أما المشكلة الحقيقية فهى حين تتجرأ و تفكر فى تغيير تصميم موقعك كله ... عليك استخراج البيانات من الجداول فى كل الصفحات و إعادة تعبئتها فى جداول جديدة للتصميم الجديد سنفترض أن موقعك متوسط الحجم (مثلا 200 -500 صفحة) أظن الموضوع متعب لدرجة أنك قد تتوب عن فكرة تغيير الموقع أصلا !! إذن فنحن متفقون على أنه على الرغم من أن الجداول تقوم بتنسيق الصفحات بشكل مناسب و لكنها ليست الحل الأمثل و لكن ما البديل؟ قبل أن أجيب دعنى أسألك، هل يمكنك أن تخبرنى ،بنظرة الخبير (دون رؤية الكود) ما أقل عدد من الجداول يمكن أن تحتويه صفحة مثل هذه: http://www.csszengarden.com كم قلت؟ لا يوجد بها أية جداول على الإطلاق لا تصدق؟ افتح كود الصفحة و تأكد بنفسك و ماذا عن هذه الصفحة؟ http://www.csszengar.../151.css&page=0 و هذه؟ http://www.csszengar.../096.css&page=6 و هذه؟ http://www.csszengar.../148.css&page=0 و هذه؟ http://www.csszengar.../149.css&page=0 وهذه؟ http://www.csszengar.../088.css&page=7 افتح تلك الصفحات و تأكد منها و سأنتظرك هنا حتى تعود... حسنًا ، هل عدت؟ ما رأيك؟ ليست المفاجأة أن هذه الصفحات لا تحتوى على جداول فحسب، و لكن أن كل الصفحات السابقة لها نفس كود HTML تمامًا !!! كل الفرق بينها أن لكلٍ منها ملف css مختلف كل التغيير فى الألوان و الصور و التنسيق و الخط ...إلخ موجود فى ملف واحد هو ملف css ذلك الموقع يوجد به أكثر من 150 تصميم مختلف لنفس صفحة HTML !! و هل فتحت كود الصفحة؟ كيف يبدو؟ كود بسيط و واضح هكذا <p class="p1">بعض النص هنا</p> فقط بلا تعقيدات و لا <table width="100%" align="center" border="1"> <tr> <td>بعض النص هنا</td> </tr> <table> انظر كيف تبدو الصفحة دون css http://www.csszengar...den-sample.html إذن كيف استطاعوا فعل هذا؟ يستخدم هذا الموقع تقنية css positioning، حيث يستخدم كود html بسيط و يضع النص داخل وسوم (tags) مثل p , div , span , h1 , ul , li , ...إلخ ثم يحدد فى ملف css كيف يبدو النص داخل هذه الوسوم و بالتالى يظل الكود بسيطًا ، سهل التعديل، خفيف و سريع التحميل ثم ماذا لو أردت أن تقوم بتغيير تصميم الموقع بأكمله؟ لن تمس صفحة html واحدة كل ما عليك تعديل ملف css واحد و يتغيير تمامًا شكل الموقع كله بهذه الطريقة تكون قد فصلت تمامًا المحتوى عن التصميم و سهلت التعديل فيهما، و هذا هو الاتجاه فى الفترة القادمة ، و هذا ما أشارت إليه توصيات www.w3c.org فالجداول كان المقصود من وجودها عرض بيانات مجدولة و ليس تنسيق الصفحات لن أخوض هنا فى تفاصيل كيفية تطبيق هذه الطريقة ، و إنما يهدف هذا الموضوع إلى لفت الانتباه إلى هذه التقنية، و أترك التفاصيل لهذه الروابط: هذه بعض المواقع التى تعطى فكرة بسيطة عن CSS http://www.westciv.c...y/css_tutorial/ http://www.brainjar.com/css/using/ http://www.wpdfd.com...sics/index.html http://www.createwebmagic.com/css101/whati...fb3294e84ea30a0 http://www.communitymx.com/content/article...A87013F0E8B6A50 http://www.digital-w...ticles/css_101/ http://www.w3.org/TR/CSS21/ و هذه بعض المواقع لمناقشة الموضوعات الأكثر تقدمًا http://css.maxdesign.com.au/index.htm http://www.brainjar....ss/positioning/ http://www.digital-web.com/articles/conver..._a_page_to_css/ http://www.w3.org/TR/REC-CSS2/box.html http://www.positioni...g.net/index.php http://cssvault.com/resources.php هذه مواقع تقدم تنسيق جاهز للصفحات بأشكال مختلفة يمكنك استخدامها مباشرة http://intensivstati...ss/template.php http://www.glish.com/css/#techniques http://www.bluerobot.com/web/layouts/ http://www.thenoodleincident.com/tutorials...sson/boxes.html http://www.wannabegirl.org/firdamatic/ و هذه صفحات بها الكثير من الروابط الأخرى http://www.dezwozhere.com/links.html http://www.d.umn.edu/itss/support/Training...design/css.html http://www.cbel.com/style_sheets/ و هذا موقع رائع به الكثير من المقالات التى غيرت نظرتى لتصميم المواقع http://www.alistapart.com/topics/css/ و موقع سردال كان من المواقع العربية الرائدة فى تبنى هذه التقنية http://www.serdal.com/css و هذا ملف لشرح CSS باللغة العربية ( إعداد : سامى محمود الرباعية ) http://www.cb4a.com/...pro/CSS/css.htm و هذا موقع يقدم دروسًا باللغة العربية http://www.c4arab.co...n.php?lssid=115 و هذه مواقع أخرى مفيدة http://www.w3schools...css/default.asp http://www.htmlhelp.com/reference/css/ هذا كتاب من أفضل الكتب التى صدرت فى هذا المجال More Eric Meyer on CSS http://babyblue.thuthao.info/modules.php?n...=article&sid=53 و الآن، هل ستظل تستخدم الجداول؟