الدرس الثامن
الجداول (2)

 

 

 


 

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

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

<TABLE>

<TR>

<TD> Data <‎/TD>
<TD> Data <‎/TD>

<‎/TR>

<TR>

<TD> Data <‎/TD>
<TD> Data <‎/TD>

<‎/TR>

<TR>

<TD> Data <‎/TD>
<TD> Data <‎/TD>

<‎/TR>

<‎/TABLE>

 

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

تحدد محاذاة النص الموجود في الخلية أفقياً، والقيم المستخدمة هي Left, Center, Right

ALIGN

تحدد المحاذاة العمودية للنص، وهو يأخذ القيم Top, Middle, Bottom, Baseline

VALIGN

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

WIDTH

تحدد الإرتفاع المطلوب للخلية في الصف، وذلك بالطرق المباشرة أو النسبية. وقيامك بتحديد ارتفاع إحدى الخلايا في الصف يؤدي إلى تطبيقه على كل الخلايا فيه.

HEIGHT

تحدد لون خلفية الخلية

BGCOLOR

يقوم بدمج الخلية الحالية مع العدد المطلوب من الخلايا التي تليها أفقياً

‎<TD COLSPAN="n">‎

حيث n هو عدد الخلايا التي سيتم دمجها

COLSPAN

يقوم بدمج الخلية الحالية مع العدد المطلوب من الخلايا التي تليها عمودياً (أي أسفلها).

‎<TD ROWSPAN="n">‎

وبالطبع n هو عدد الخلايا التي سيتم دمجها

ROWSPAN


 

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

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

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

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

<TABLE BORDER="5">

<TR>

<TD> Data <‎/TD>

<‎/TR>

<TR>

<TD> Data <‎/TD>
<TD> Data <‎/TD>

<‎/TR>

<TR>

<TD> Data <‎/TD>

<‎/TR>

<‎/TABLE>

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

 

Data

Data

Data

 

Data


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

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

‎<TABLE BORDER="5">‎

<TR>

<TD COLSPAN="2"> Data <‎/TD>

<‎/TR>

<TR>

<TD> Data <‎/TD>
<TD> Data <‎/TD>

<‎/TR>

<TR>

<TD COLSPAN="2"> Data <‎/TD>

<‎/TR>

<‎/TABLE>

Data

Data

Data

Data


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

مثال آخر: لنقم بدمج الخلايا الموجودة في العمود الأول

‎<TABLE BORDER="5">‎

<TR>

<TD ROWSPAN="3"> Data <‎/TD>
<TD> Data <‎/TD>

<‎/TR>

<TR>

<TD> Data <‎/TD>

<‎/TR>

<TR>

<TD> Data <‎/TD>

<‎/TR>

<‎/TABLE>

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

Data

Data

Data

Data


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

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

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

<TR>

<TD> Data <‎/TD>
<TD> Data <‎/TD>

<‎/TR>

<TR>

<TD> Data <‎/TD>
<TD> Data <‎/TD>

<‎/TR>

<TR>

<TD> Data <‎/TD>
<TD> Data <‎/TD>

<‎/TR>

<‎/TABLE>

Table Caption

Data

Data

Data

Data

Data

Data


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

 


الدرس التالي