تنسيق الجداول

يتم إنشاء الجداولtables عن طريق العلامة<table>ة مع استخدام بعض الصفاتattributesكما يتضح لنا من الجدول التالي:

الصفة	المعنى
هامش الخلية cellpadding	هي عبارة عن المسافة بين حدود الخلية والنص المكتوب فيها.
المسافة بين الخلايا cellspacing	هي عبارة عن المسافة بين الخلايا المجاورة.
حد الجدول border	وهو عبارةعن عرض الحد الخارجي للجدول بحيث يتم تحديد قيمته بوحدات البكسلpixel, وفي حالة تحديد قيمته لتكون صفراً، ففي هذه الحالة يظهر الجدول بلا حدود وهو مايعرف باسم Borderless table.
عرض الجدول width	وهو عبارة عن قيمة تحدد عرض الجدول كنسبة مئوية من عرض الشاشة.
لون الحد bordercolor	وهو عبارة عن لون الحد الخارجي لكل خلية في الجدول.
لون الخلفية bgcolor	وهو عبارة عن لون الخلفية لجميع الخلايا الموجودة في الجدول.

 

كما تستخدم أيضاً بعضtagsلإنشاء الجدول كما هو واضح في الجدول التالي:

العلامة tag	المعنى	الاستخدام
<table>	إنشاء جدول	تستخدم هذه العلامة tagلإنشاء الجدول.
<caption>	إنشاء عنوان للجدول	تستخدم هذه العلامة tagلإنشاء عنوان للجدول ويظهر هذا العنوان في أعلى أوأسفل الجدول.
<tr>	إنشاء صف row في الجدول	تستخدم هذه العلامة tagلإنشاء صف في الجدول حيث أن أي جدول يتكون من مجموعة من الصفوف.
<th>	إنشاء عنوان للبيانات في الجدول	تستخدم هذه العلامةtag لإنشاء عنوان للبيانات في الجدول حيث يظهر العنوان بخط عريض bold ويوجد في منتصف الخلية centered.
<td>	إنشاء نص عادي في الخليةcell	تستخدم هذه العلامة tagلإنشاء نص عادي في الخلية cell.

توضع القيم التي تحدد خواص الجدول بداخل علامة إنشاء الجدول <table…..>, وفي الجدول الذي أنشأناه بالمثال السابق ثم يظهر الجدول, وإنما ظهرت محتويات خلايا الجدول, والسبب في ذلك هو أن متصفح الإنترنت اعتبر أن قيمة حدود الجدول هي صفر, وبالتالي لم تظهر حدود الجدول, وإنما ظهرت محتويات الجدول فقط.

وتستخدم الخاصية”  “border= التي توضع بداخل علامة الجدول في تحديد عرض حدود الجدول بالبيكسيل، فالكود التالي على سبيل المثال يقوم بإنشاء جدول عرض حدوده 2بيكسيل:

والشكل التالي يوضح الجدول داخل صفحة الويب: