هل مازلت تستخدم الجداول ؟!

كلنا نعلم أن استخدام الجداول من أول و أهم المهارات التى يتعلمها مصمم المواقع
فيتعلم كيف يقوم بإنشاء جداول لتنسيق الصفحة، و يضع الكثير من الجداول بداخل بعضها (nested tables) حتى يحصل على الشكل الذى يريده

و لكن هل سألت نفسك، هل هذه هى أفضل وسيلة لتنسيق الصفحات؟

لنجيب عن هذا السؤال دعنى أسألك سؤالا آخر، هل كانت لديك صفحة كبيرة مليئة بالجداول و أردت أن تعدل شيئًا فى الكود؟
لابد أنك قد وجدت الكثير من <td> , </td> , <tr> , </tr> فلا تعلم كل واحد منها لأى خلية فى أى جدول
و ماذا لو عدلت فى الكود، و عن طريق الخطأ وضعت <td> فى غير مكانها؟
يتغير شكل الصفحة تمامًا و ينهار التصميم، فتحاول البحث هنا و هناك عن مكان هذا الـ <td> البائس
و قد يحالفك الحظ، أو ينتهى الأمر بإعدة تصميم الصفحة من البداية !!
مأساة ...

أما المشكلة الحقيقية فهى حين تتجرأ و تفكر فى تغيير تصميم موقعك كله ...
عليك استخراج البيانات من الجداول فى كل الصفحات و إعادة تعبئتها فى جداول جديدة للتصميم الجديد
سنفترض أن موقعك متوسط الحجم (مثلا 200 -500 صفحة)
أظن الموضوع متعب لدرجة أنك قد تتوب عن فكرة تغيير الموقع أصلا !!

إذن فنحن متفقون على أنه على الرغم من أن الجداول تقوم بتنسيق الصفحات بشكل مناسب و لكنها ليست الحل الأمثل

و لكن ما البديل؟

قبل أن أجيب دعنى أسألك، هل يمكنك أن تخبرنى ،بنظرة الخبير (دون رؤية الكود) ما أقل عدد من الجداول يمكن أن تحتويه صفحة مثل هذه:
http://www.csszengarden.com

كم قلت؟
لا يوجد بها أية جداول على الإطلاق
لا تصدق؟
افتح كود الصفحة و تأكد بنفسك

و ماذا عن هذه الصفحة؟
http://www.csszengarden.com/?cssfile=/151/151.css&page=0

و هذه؟
http://www.csszengarden.com/?cssfile=/096/096.css&page=6

و هذه؟
http://www.csszengarden.com/?cssfile=/148/148.css&page=0

و هذه؟
http://www.csszengarden.com/?cssfile=/149/149.css&page=0

وهذه؟
http://www.csszengarden.com/?cssfile=/088/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.csszengarden.com/zengarden-sample.html

إذن كيف استطاعوا فعل هذا؟

يستخدم هذا الموقع تقنية css positioning، حيث يستخدم كود html بسيط و يضع النص داخل وسوم (tags) مثل p , div , span , h1 , ul , li , ...إلخ
ثم يحدد فى ملف css كيف يبدو النص داخل هذه الوسوم
و بالتالى يظل الكود بسيطًا ، سهل التعديل، خفيف و سريع التحميل

ثم ماذا لو أردت أن تقوم بتغيير تصميم الموقع بأكمله؟
لن تمس صفحة html واحدة
كل ما عليك تعديل ملف css واحد و يتغيير تمامًا شكل الموقع كله

بهذه الطريقة تكون قد فصلت تمامًا المحتوى عن التصميم و سهلت التعديل فيهما، و هذا هو الاتجاه فى الفترة القادمة ، و هذا ما أشارت إليه توصيات www.w3c.org

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

لن أخوض هنا فى تفاصيل كيفية تطبيق هذه الطريقة ، و إنما يهدف هذا الموضوع إلى لفت الانتباه إلى هذه التقنية، و أترك التفاصيل لهذه الروابط:

هذه بعض المواقع التى تعطى فكرة بسيطة عن CSS
http://www.westciv.com/style_master/academy/css_tutorial/
http://www.brainjar.com/css/using/
http://www.wpdfd.com/editorial/basics/index.html
http://www.createwebmagic.com/css101/whati...fb3294e84ea30a0
http://www.communitymx.com/content/article...A87013F0E8B6A50
http://www.digital-web.com/articles/css_101/
http://www.w3.org/TR/CSS21/

و هذه بعض المواقع لمناقشة الموضوعات الأكثر تقدمًا
http://css.maxdesign.com.au/index.htm
http://www.brainjar.com/css/positioning/
http://www.digital-web.com/articles/conver..._a_page_to_css/
http://www.w3.org/TR/REC-CSS2/box.html
http://www.positioniseverything.net/index.php
http://cssvault.com/resources.php

هذه مواقع تقدم تنسيق جاهز للصفحات بأشكال مختلفة يمكنك استخدامها مباشرة
http://intensivstation.ch/css/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/book/netpro/CSS/css.htm

و هذا موقع يقدم دروسًا باللغة العربية
http://www.c4arab.com/showasection.php?lssid=115

و هذه مواقع أخرى مفيدة
http://www.w3schools.com/css/default.asp
http://www.htmlhelp.com/reference/css/


هذا كتاب من أفضل الكتب التى صدرت فى هذا المجال
More Eric Meyer on CSS
http://babyblue.thuthao.info/modules.php?n...=article&sid=53


و الآن، هل ستظل تستخدم الجداول؟