html

هذا الموضوع سيكون من قسمين حول الجداول. وقد قمنا بتجزئتها إلى قسمين وذلك لأهمية هذا الموضوع وتعدد خصائص الجداول واحتمالات استخدامها في صفحات الويب, حيث تعد الجداول من أقوى الأدوات التي تتضمنها لغة HTML.

بداية، إليك هذا الوصف البسيط للوسوم الأساسية الخاصة بالجداول

<TABLE>...<‎/TABLE>	وسوم تعريف الجدول
<TR>...<‎/TR>	Table Row وسوم تعريف الصف في الجدول
<TD> Cell Data <‎/TD>	Table Data وسوم تعريف الخلايا في الصف وتعريف محتويات كل خلية

والآن لنتكلم بصورة أكثر دقة وتفصيلاً:
هذه هي الوسوم التي نبدأ بها لإدراج جدول مكون من خلية واحدة أو من مليون خلية… الأمر سيان

والآن بعد إدراج هذين الوسمين، هناك سؤالين ينبغي الإجابة عليهما. الأول: كم عدد الصفوف التي نريدها في الجدول؟ ثلاثة، أربعة، مائة؟ لا بأس، قم بإضافة الوسوم

بنفس عدد الصفوف التي تريدها. ولنفترض هنا أنها ثلاثة.

<TABLE>

<‎/TABLE>

والسؤال الثاني هو، كم عدد الخلايا (أو الأعمدة) التي نريدها في كل صف؟
وهنا نضيف الوسوم

بنفس عدد الخلايا المطلوب. ومن البديهي أن نكتبها بين الوسوم <TR> ... <‎/TR> طالما أن الخلايا هي جزء من الصفوف. وهنا سأفترض أننا نريد خليتين في كل صف، وبذلك يجب تكرار كتابتها مرتين لكل صف.
وأذكرك أن النص الذي نريد إدراجه في الخلية يكتب ضمن هذين الوسمين.

<TABLE>

<TR>

<‎/TR>

<TR>

<‎/TR>

<TR>

<‎/TR>

<‎/TABLE>

هل اتضحت لك الصورة الآن. أنظر إلى نتيجة العمل التي حصلنا عليها.

Data	Data
Data	Data
Data	Data

هناك شيء ما ينقص. بالطبع ... الحدود. انتظر قليلاً وستعرف الخاصية التي تقوم بإضافة الحدود للجدول وغيرها من الخصائص الأخرى. لأنني قبل أن أستمر أود أن ألفت نظرك لمسألة معينة في الجداول. وهي أن طريقة التعامل معها تتم على ثلاثة مستويات:

مستوى الجدول ككل
مستوى الصفوف ككل أو كل واحد على حده
مستوى الخلايا ككل أو كل واحدة على حده.

ولكل من هذه المستويات خصائصه التي ينفرد بها كما أن هناك خصائص مشتركة تستخدم مع كل الوسوم.

نبدأ بمناقشة الخصائص التي تستخدم مع الوسوم <TABLE> ... <‎/TABLE> وسأقوم أولاً بسردها لك، ومن ثم إدراج بعض الأمثلة التي توضحها.

BORDER	تقوم هذه الخاصية بإضافة حدود للجدول وتحديد سماكتها، والقيمة الإفتراضية لها هي صفر أي لا حدود ‎<TABLE BORDER="5">‎ ‎<TABLE BORDER="0">‎
WIDTH	نستخدم هذه الخاصية لتحديد عرض الجدول ككل. وهناك أسلوبين لتحديد العرض: المطلق أي بكتابة الرقم الذي يمثل العرض بصورة مباشرة. والنسبي أي كتابة رقم نسبي مئوي يحدد عرض الجدول حسب عرض نافذة المتصفح. (أي أن عرض الجدول سيختلف باختلاف عرض نافذة المتصفح). ‎<TABLE WIDTH="600">‎ ‎<TABLE WIDTH="80%">‎
HEIGHT	لتحديد ارتفاع الجدول، ويكون تحديد هذا الإرتفاع من خلال قيمة مطلقة تحدد الإرتفاع بالبيكسل. أو قيمة نسبية تحدد ارتفاع الجدول بالنسبة لإرتفاع صفحة المتصفح ‎<TABLE HEIGHT="500">‎ ‎<TABLE HEIGHT="100%">‎
CELLSPACING	لتحديد المسافة بين كل خلية من خلايا الجدول ‎<TABLE CELLSPACING="10">‎
CELLPADDING	لتحديد المسافة الفاصلة بين الحدود وبداية النص في كل خلية. أو لنقل: تحديد حجم الهوامش لخلايا الجدول. ‎<TABLE CELLPADDING="10">‎
ALIGN	لتحديد محاذاة الجدول أفقياً على الصفحة يميناً أو يساراً. وهو يأخذ القيم right, left ‎<TABLE ALIGN="Left">‎ ‎<TABLE ALIGN="Right">‎
BGCOLOR	ويستخدم لتحديد لون الخلفية للجدول ‎<TABLE BGCOLOR="#00FFFF">‎

هذه هي الخصائص المستعملة مع الجدول. وسأقوم الآن بتطبيقها على المثال الوارد في بداية هذا الدرس وسأكتفي بكتابة وسم البداية أما باقي الوسوم فهي نفسها:

<TABLE BORDER="5">‎

Data	Data
Data	Data
Data	Data

ونتكلم الآن عن الخصائص المستخدمة مع وسوم الصف <TR> ... <‎/TR> ولا بأس من تذكيرك أن عدد الصفوف في الجدول يتحدد بعدد هذه الوسوم. أما أهم الخصائص التي تضاف لهذا الوسم فهي:

ALIGN	لتحديد محاذاة النص أفقياً داخل الخلايا التي يتكون منها الصف، والقيم المحتملة لها هي Right, Left, Center والقيمة الإفتراضية هيCenter
VALIGN	لتحديد المحاذاة العمودية للنص داخل خلايا الصف، وذلك إما للأعلى أو للأسفل أو في المنتصف أو على امتداد الخط الأساسي للخلية. وقيمها على التوالي هي: Top, Bottom, Middle, Baseline
BGCOLOR	لتحديد لون الخلفية للخلايا التي يتكون منها الصف. وهنا يتم تجاهل لون الخلفية المحدد ضمن وسم <TABLE> ويتم تطبيق اللون المحدد هنا.

ونعود الآن إلى جدولنا السابق لنطبق عليه هذه الخصائص من خلال الأمثلة التالية:

‎<TABLE BORDER="5" HEIGHT="300">‎
‎<TR ALIGN="Left">‎
<TD> Data <‎/TD>
<TD> Data <‎/TD>
<‎/TR>

‎<TR ALIGN="Right">‎
<TD> Data <‎/TD>
<TD> Data <‎/TD>
<‎/TR>

‎<TR ALIGN="Center">‎
<TD> Data <‎/TD>
<TD> Data <‎/TD>
<‎/TR>
<‎/TABLE>

Data	Data
Data	Data
Data	Data

‎<TABLE BORDER="5" HEIGHT="300">‎
‎<TR VALIGN="Top">‎
<TD> Data <‎/TD>
<TD> Data <‎/TD>
<‎/TR>

‎<TR VALIGN="Bottom">‎
<TD> Data <‎/TD>
<TD> Data <‎/TD>
<‎/TR>

‎<TR VALIGN="Baseline">‎
<TD> Data <‎/TD>
<TD> Data <‎/TD>
<‎/TR>
<‎/TABLE>

Data	Data
Data	Data
Data	Data

-------------------------------------------------------------------------

القسم الثاني من الجداول

نتابع معاً في هذا الموضوع الحديث عن الجداول. وأنا أفترض أنك قد أنهيت الموضوع السابق بنجاح، وأن لديك الآن فكرة جيدة جداً عن الجداول وكيفية إنشائها والتعامل مع خصائصها ومع الصفوف وخصائصها. ونكمل الآن من حيث توقفنا، أي مع خصائص الخلايا.

هل تذكر ما قلناه عن عدد الخلايا في الصف الواحد ؟ إن عدد الخلايا المطلوب يتحدد من خلال كتابة الوسوم <TD> ... <‎/TD> مرات بنفس العدد المطلوب. ومن الممكن أن تحتوي الخلية على أي عنصر من عناصر لغة HTML : نصوص، رسوم، قوائم، وصلات تشعبية، بل وحتى جداول. (نعم، تستطيع إدراج جدول داخل جدول آخر)

لنسترجع معا المثال الذي قمنا بالتدرب عليه في الدرس السابق، فسوف نكمل هذا الدرس معه. وهو جدول صغير مكون من ثلاثة صفوف وعمودين (أي خليتين في كل صف).

<TABLE>

<TR>

<‎/TR>

<TR>

<‎/TR>

<TR>

<‎/TR>

<‎/TABLE>

أما الخصائص المستخدمة مع الخلايا، فهذا جدول يبين انواعها :

ALIGN	تحدد محاذاة النص الموجود في الخلية أفقياً، والقيم المستخدمة هي Left, Center, Right
VALIGN	تحدد المحاذاة العمودية للنص، وهو يأخذ القيم Top, Middle, Bottom, Baseline
WIDTH	تحدد عرض الخلية، وذلك بكتابة القيمة المباشرة للعرض المطلوب بالبيكسل، أو بكتابة رقم يمثل النسبة المئوية. ويكفي تحديد العرض للخلايا في أحد الصفوف لكي يتم تطبيقه على كل الخلايا في كل الصفوف.
HEIGHT	تحدد الإرتفاع المطلوب للخلية في الصف، وذلك بالطرق المباشرة أو النسبية. وقيامك بتحديد ارتفاع إحدى الخلايا في الصف يؤدي إلى تطبيقه على كل الخلايا فيه.
BGCOLOR	تحدد لون خلفية الخلية
COLSPAN	يقوم بدمج الخلية الحالية مع العدد المطلوب من الخلايا التي تليها أفقياً ‎<TD COLSPAN="n">‎ حيث n هو عدد الخلايا التي سيتم دمجها
ROWSPAN	يقوم بدمج الخلية الحالية مع العدد المطلوب من الخلايا التي تليها عمودياً (أي أسفلها). ‎<TD ROWSPAN="n">‎ وبالطبع n هو عدد الخلايا التي سيتم دمجها

وقبل أن نستمر، يبدو لي أن هناك بعض الملاحظات المهمة التي ينبغي ذكرها:

· كما تلاحظ هناك خصائص تتكرر مع جميع الوسوم. خذ مثلاً الخاصية BGCOLOR. كيف يتم التعامل معها إذا كررت مع جميع الوسوم؟ بكل بساطة يتم تطبيق اللون المحدد مع وسم الخلية، فإذا لم يكن محدداً يطبق اللون المحدد مع وسم الصف، فإذا لم يوجد يطبق اللون المحدد مع وسم الجدول. وإذا لم يكن هذا محدداً بدوره يتم إعتماد لون خلفية الصفحة المحدد في الوسم <BODY>.

· الملاحظة الثانية تتعلق بالخصائص WIDTH, HEIGHT. يختلف أسلوب التعامل مع هذه الخصائص من متصفح لآخر، بل وتختلف أيضاً طريقة تفسير القيم المحددة معها وخصوصاً فيما يتعلق بالنسب المئوية. (راجع الموضوع: الوسوم الخاصة والمتصفحات ).
وبدون الخوض في تفاصيل هذه الإختلافات التي لن تؤدي إلا إلى المزيد من الإشكالات لديك... وبعد التجربة يبدو أن أفضل طريقة للتعامل مع هذه الخصائص هي قيامك بتحديد العرض (وكذلك الإرتفاع إذا أردت ذلك) للجدول ككل من خلال الوسم <TABLE>. ثم استخدام هذه الخصائص في وسوم الخلايا وتحديد العرض المطلوب لكل خلية على حده في الصف الأول، والارتفاع المطلوب لكل صف في الجدول.
وهذه برأيي أفضل طريقة تضمن بها أفضل مشاهدة للجدول لجميع زوار موقعك.

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

<TR>

<‎/TR>

<TR>

<‎/TR>

<TR>

<‎/TR>

<‎/TABLE>

لأن هذا ما ستحصل عليه:

Data
Data	Data
Data

لقد بقي مكان الخلايا المحذوفة محجوزاً كما لو أنها لم تحذف. أما الخلايا الباقية فظلت محتفظة بنفس خصائصها، أي أننا لم نستفد من عملية الحذف. والحقيقة أن الطريقة المثلى لذلك هي أن تقوم بدمج الخلايا معاً وذلك باستخدام الخصائص COLSPAN, ROWSPAN.

إذن لنقم بإعادة كتابة شيفرة الجدول مع استخدام هذه الخصائص:

‎‎<TABLE BORDER="5">‎

<TR>

<‎/TR>

<TR>

<‎/TR>

<TR>

<‎/TR>

<‎/TABLE>

Data
Data	Data
Data

لاحظ أن العدد 2 هو عدد الخلايا التي قمنا بدمجها. ولاحظ أيضاً انني لم أقم بإعادة وسوم الخلايا المحذوفة لأننا أصلاً لا نحتاج لها بعد أن قمنا بالدمج. وكقاعدة أساسية: كل خلية يتم دمجها يجب بالمقابل حذف وسوم التعريف الخاصة بها. ما عدا تعريف الخلية الأساسية بالطبع.

‎<TABLE BORDER="5">‎

<TR>

<‎/TR>

<TR>

<‎/TR>

<TR>

<‎/TR>

<‎/TABLE>

Data	Data
	Data
	Data

ومرة أخرى بعد تعريف خاصية الدمج العمودي، قمت بحذف تعريف الخلايا المدموجة من الصف الثاني والثالث. وهذا هو الجدول الناتج.

هناك نوع خاص من الخلايا التي يتم تعريفها باستخدام الوسوم <TH> ... <‎/TH> وهي اختصار Table Header أي ترويسة الجدول.
والفرق الوحيد بينها وبين <TD> ... <‎/TD> هو أن النص الذي تحتويه يظهر بخط أسود عريض ومحاذاته في منتصف الخلية بصورة إفتراضية. (ليس بالشيء المهم، كما أعتقد)، خاصة وأن الخصائص المستخدمة معها هي نفس خصائص <TD> وبنفس التفاصيل التي ذكرت.

الوسوم الأخيرة المستخدمة في الجداول هي <CAPTION> ... <‎/CAPTION> وهي تختص بإضافة عنوان رئيسي للجدول ككل. لذلك فهي عندما تكتب يتم وضعها مباشرة بعد الوسم <TABLE> وبصورة مستقلة وليس ضمن وسوم الصفوف أو الخلايا.

‎<TABLE BORDER="5">‎
<CAPTION> Table Caption <‎/CAPTION>

<TR>