كلنا نعلم أن استخدام الجداول من أول و أهم المهارات التى يتعلمها مصمم المواقع
فيتعلم كيف يقوم بإنشاء جداول لتنسيق الصفحة، و يضع الكثير من الجداول بداخل بعضها (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
و الآن، هل ستظل تستخدم الجداول؟