ماذا تعني لك فكرة دمج خلايا الجدول؟

بعد أن تعلمنا أساسيات إنشاء جدول في HTML، وصلنا اليوم إلى نقطة دمج الخلايا لتوسيع مساحة العمل في الجدول.

🔶 دمج الخلايا مع بعضها

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

 

وسائل النقل المتوفرة في المدن في القرى
الحافلة متوفرة في المدن والقرى
ترام واي متوفر غير متوفر
طاكسي الأجرة الصغير متوفر غير متوفر
طاكسي الأجرة الكبير متوفر في المدن والقرى

دمج خانتين من عمودين في موضعين


نلاحظ في الجدول أن الخلايا التي تشارك نفس المعلومة بين الأعمدة قد تم دمجها لتصبح خلية واحدة بفكرة واحـدة.

ولكي نقوم بعملية الدمج فإننا نضيف وسمة إلى العلامة <td>. ويجب أن نعرف أن هناك نوعان من الدمج:

  • دمج الأعمدة: هو بالضبط ما فعلته في مثال الجدول فوق، بحيث يتم الدمج أفقياً. ولتحقيق ذلك نستخدم  السمة colspan.
  • دمج السطور: في هاته الحالة سيتم تجميع سطرين معاً. وذلك بدمجهما عمودياً. ولتحقيق ذلك نستخدم  السمة rowspan.

إذن، يجب عليك إعطاء قيمة للسمة (سواء كانت colspan أو rowspan). من الضروري الإشارة إلى عدد الخلايا المراد دمجها معًا. في مثالنا ، قمنا بدمج خليتين اثنين: تلك الخاصة بعمود ” في المدن “. والتي بعمود ” في القرى “.

لذلك يجب كتابة الشفيرة التالية:

 

الرقم 2 يشير إلى عدد الخلايا التي سيتم دمجها مع بعض، وهذا ما يسمح لنا بدمج أي عدد نريد من الخلايا، يمكن 3 أو 4 أو أكثر حسب المطلوب.

وهنا تجد كود html الذي استعملته في دمج الخلايا بالجدول السابق:

ملاحظـة مهمـة:
لو لاحظت أن  السّطرين 9 و 23 يحتويان على خَلِيَّتَيْن فقط بدلاً من ثلاث (هناك علامتان <td> فقط بدلاً من 3). وهذا فعلاً ما يشرح عملية الدمج.  لأنني في السطرين 9 و 23 قمت  بدمج الخليتين في العمودين « في المدن _ في القرى ». فأصبحت السمة المضافة إلى هذا الشكل هي <td colspan="2"> وبالتالي أصبحت الخليتين خلية واحدة ، والرقم 2 يمكن تغييره حسب عدد الخلايا التي تريد دمجها مع بعض.
هذا الذي رأينا هو دمج الخلايا في السَّطر، يعني أفقياً، و لكن ماذا نفعل بالنسبة للدمج العمودي مع rowspan ؟

هاته العملية معقدة بعض الشيء. ليس من حيث طريقة الدمج، ولكن فكرة الدمج ستكون مغايرة تماماً للتي قمنا بها سابقاً، كيـف ذلك؟

أولا سنقوم بترتيب جدولنا عكس ما كان عليه الجدول الأول !  بدلاً من وضع وسائل النقل على اليمين، نضعها في الأعلى ، 
هذه طريقة أخرى لرؤية الجدول: بدلاً من إنشائه طولياً ، يمكن أن نزيد له في العرض.

في هذه الحالة ، لم يعد colspan مناسباً ، ولكن يجب استخدام rowspan :

 

وهذه هي النتيجة حين يتم دمج الخلايا عموديًا :

 

وسائل النقل المتوفرة الحافلة ترام واي طاكسي الأجرة الصغير طاكسي الأجرة الكبير
في القرى متوفرة في المدن والقرى غير متوفر غير متوفر متوفرة في المدن والقرى
في المدن متوفر متوفر

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

لا تنسى أن تراجع درس: إنشاء الجداول و تلوين الجداول والوسوم التي استعملناها في إنشاء الجداول:

 أساسيات الجدول : <table> </table> - <tr></tr> -<td> </td> <th> </th>

العنوان : <caption>

الحدود: border 

 تقسيم الجدول:  <thead> </thead> - <tbody> </tbody> - <tfoot> </tfoot>

دمج الخلايا أفقياً:  colspan

دمج الخلايا عمودياً: rowspan

إلى هنا أكون قد أنهيت كل ما تعلمت وما حضرني الآن مما يجب فعله لإنشاء جداول  في HTML وتحسينها في CSS.

لا تَقْرَأْ وتَرْحَل … تَـعْلِيقَـاتُكَ تَـشْجِيعٌ لَـنَـا لِنَسْتَمِرَّ فِــي الْبَحْثِ وَالْعَطَـاء.

jabism

عبدالرحيم ح.س من شمال المغرب . تقني "الهندسة المدنية" ، مارست البرمجة منذ 2001، خبرتي مع الويب والإعلاميات : تمتد من سنة 2000 ، سائر باستمرار في تحديث معلوماتي والاطلاع على كل جديد.

0 تعليق

اترك تعليقاً

لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *