بداية، إليك هذا الوصف البسيط للوسوم الأساسية الخاصة بالجداول :
|
وسوم تعريف الجدول |
<TABLE>...</TABLE> |
|
Table Row وسوم تعريف الصف في الجدول |
<TR>...</TR> |
|
Table Data وسوم تعريف الخلايا في الصف وتعريف محتويات كل خلية |
<TD> Cell Data </TD> |
مثال :
إليك هذا الجدول الصغير المكون من ثلاثة صفوف وعمودين (أي خليتين في كل صف).
|
<TABLE> <TR> <TD> الإسلام </TD> </TR> <TD> الشهادتان </TD> </TR> <TD> الصلاة </TD> </TR> </TABLE> |
الخصائص التي تستخدم مع الوسم <TABLE> ... </TABLE>:
|
BORDER |
تقوم هذه الخاصية بإضافة حدود للجدول وتحديد سماكتها، والقيمة الإفتراضية لها هي صفر أي لا حدود <TABLE BORDER="5"> |
| WIDTH |
نستخدم هذه الخاصية لتحديد عرض الجدول ككل. وهناك أسلوبين لتحديد العرض: المطلق أي بكتابة الرقم الذي يمثل العرض بصورة مباشرة. والنسبي أي كتابة رقم نسبي مئوي يحدد عرض الجدول حسب عرض نافذة المتصفح. (أي أن عرض الجدول سيختلف باختلاف عرض نافذة المتصفح). <TABLE WIDTH="600"> |
| HEIGHT |
لتحديد ارتفاع الجدول، ويكون تحديد هذا الإرتفاع من خلال قيمة مطلقة تحدد الإرتفاع بالبيكسل. أو قيمة نسبية تحدد ارتفاع الجدول بالنسبة لإرتفاع صفحة المتصفح <TABLE HEIGHT="500"> |
| CELLSPACING |
لتحديد المسافة بين كل خلية من خلايا الجدول <TABLE CELLSPACING="10"> |
| CELLPADDING |
لتحديد المسافة الفاصلة بين الحدود وبداية النص في كل خلية. أو لنقل: تحديد حجم الهوامش لخلايا الجدول. <TABLE CELLPADDING="10"> |
| ALIGN |
لتحديد محاذاة الجدول أفقياً على الصفحة يميناً أو يساراً. وهو يأخذ القيم right, left <TABLE ALIGN="Left"> |
| BGCOLOR |
ويستخدم لتحديد لون الخلفية للجدول <TABLE BGCOLOR="#00FFFF"> |
الخصائص التي تستخدم مع الوسم <TR> ... </TR>:
|
ALIGN |
لتحديد محاذاة النص أفقياً داخل الخلايا التي يتكون منها الصف، والقيم المحتملة لها هي Right, Left, Center والقيمة الإفتراضية هي Center |
|
VALIGN |
لتحديد المحاذاة العمودية للنص داخل خلايا الصف، وذلك إما للأعلى أو للأسفل أو في المنتصف أو على امتداد الخط الأساسي للخلية. وقيمها على التوالي هي: Top, Bottom, Middle, Baseline |
|
BGCOLOR |
لتحديد لون الخلفية للخلايا التي يتكون منها الصف. وهنا يتم تجاهل لون الخلفية المحدد ضمن وسم <TABLE> ويتم تطبيق اللون المحدد هنا. |
الخصائص التي تستخدم مع الوسم <TD> ... </TD>:
| ALIGN |
تحدد محاذاة النص الموجود في الخلية أفقياً، والقيم المستخدمة هي Left, Center, Right |
| VALIGN |
تحدد المحاذاة العمودية للنص، وهو يأخذ القيم Top, Middle, Bottom, Baseline |
| WIDTH |
تحدد عرض الخلية، وذلك بكتابة القيمة المباشرة للعرض المطلوب بالبيكسل، أو بكتابة رقم يمثل النسبة المئوية. ويكفي تحديد العرض للخلايا في أحد الصفوف لكي يتم تطبيقه على كل الخلايا في كل الصفوف. |
| HEIGHT |
تحدد الإرتفاع المطلوب للخلية في الصف، وذلك بالطرق المباشرة أو النسبية. وقيامك بتحديد ارتفاع إحدى الخلايا في الصف يؤدي إلى تطبيقه على كل الخلايا فيه. |
| BGCOLOR |
تحدد لون خلفية الخلية |
| COLSPAN |
يقوم بدمج الخلية الحالية مع العدد المطلوب من الخلايا التي تليها أفقياً <TD COLSPAN="n"> حيث n هو عدد الخلايا التي سيتم دمجها |
| ROWSPAN |
يقوم بدمج الخلية الحالية مع العدد المطلوب من الخلايا التي تليها عمودياً (أي أسفلها). <TD ROWSPAN="n"> وبالطبع n هو عدد الخلايا التي سيتم دمجها |
فائدتان :
-
هناك نوع خاص من الخلايا التي يتم تعريفها باستخدام الوسوم <TH> ... </TH> وهي اختصار Table Header. والفرق الوحيد بينها وبين <TD> ... </TD> هو أن النص الذي تحتويه يظهر بخط أسود عريض ومحاذاته في منتصف الخلية بصورة إفتراضية. (ليس بالشيء المهم، كما أعتقد)، خاصة وأن الخصائص المستخدمة معها هي نفس خصائص <TD> وبنفس التفاصيل التي ذكرت.
-
من الوسوم المستخدمة في الجداول هي <CAPTION> لائحة المعطلين</CAPTION> وهي تختص بإضافة عنوان رئيسي للجدول ككل. لذلك فهي عندما تكتب يتم وضعها مباشرة بعد الوسم <TABLE> وبصورة مستقلة وليس ضمن وسوم الصفوف أو الخلايا.
تمرين تطبيقي :