دمج خلايا الجداول في HTML

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

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

≡ كيفية دمج الخلايا مع بعضها

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

∴ دمج الخلايا أفقياً

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

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

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

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

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

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

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

<td colspan="2">

1	<td colspan="2">

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

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

<table>
<tr>
<th>وسائل النقل المتوفرة</th>
<th>في المدن</th>
<th>في القرى</th>
</tr>
<tr>
<td>الحافلة</td>
<td colspan="2">متوفرة في المدن والقرى</td>
</tr>
<tr>
<td>ترام واي</td>
<td>متوفر</td>
<td>غير متوفر</td>
</tr>
<tr>
<td>طاكسي الأجرة الصغير</td>
<td>متوفر</td>
<td>غير متوفر</td>
</tr>
<tr>
<td>طاكسي الأجرة الكبير</td>
<td colspan="2">متوفر في المدن والقرى</td>
</tr>
</table>

<table>

<tr>

<th>وسائل النقل المتوفرة</th>

<th>في المدن</th>

<th>في القرى</th>

</tr>

<tr>

<td>الحافلة</td>

<td colspan="2">متوفرة في المدن والقرى</td>

</tr>

<tr>

<td>متوفر</td>

<td>غير متوفر</td>

</tr>

<tr>

<td>طاكسي الأجرة الصغير</td>

<td>متوفر</td>

<td>غير متوفر</td>

</tr>

<tr>

<td>طاكسي الأجرة الكبير</td>

<td colspan="2">متوفر في المدن والقرى</td>

</tr>

</table>

∴ دمج الخلايا أفقياً

ملاحظـة مهمـة:

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

هذا الذي رأينا هو دمج الخلايا في السَّطر، يعني أفقياً، و لكن ماذا نفعل بالنسبة للدمج العمودي مع rowspan ؟

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

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

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

<table style="width: 100%; border-collapse: collapse;">
<tr>
<th>وسائل النقل المتوفرة</th>
<td>الحافلة</td>
<td>ترام واي</td>
<td>طاكسي الأجرة الصغير</td>
<td>طاكسي الأجرة الكبير</td>
</tr>
<tr>
<th>في القرى</th>
<td rowspan="2">متوفرة في المدن والقرى</td>
<td>غير متوفر</td>
<td>غير متوفر</td>
<td rowspan="2">متوفرة في المدن والقرى</td>
</tr>
<tr>
<th>في المدن</th>
<td>متوفر</td>
<td>متوفر</td>
</tr>
</table>

<tr>

<th>وسائل النقل المتوفرة</th>

<td>الحافلة</td>

<td>طاكسي الأجرة الصغير</td>

<td>طاكسي الأجرة الكبير</td>

</tr>

<tr>

<th>في القرى</th>

<td rowspan="2">متوفرة في المدن والقرى</td>

<td>غير متوفر</td>

<td rowspan="2">متوفرة في المدن والقرى</td>

</tr>

<tr>

<th>في المدن</th>

<td>متوفر</td>

</tr>

</table>

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

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

دمج خلايا الجداول في HTML

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

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

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

العنوان : <caption>

الحدود: border

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

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

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

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

قناتي على اليوتوب

أرى أن هذه المواضيع قد تهمك:

شَـاركِ الْمَوْضُوع:
إذا أعجبك هذا المحتوى، فلا تَقْرَأْ وتَرْحَل … تَـعْلِيقَـاتُكَ تَـشْجِيعٌ لَـنَـا لِنَسْتَمِرَّ فِــي الْبَحْثِ وَالْعَطَـاء. وإِذَا كنت تعتقد أنه قد يكون مفيداً لأشخاص آخرين، فشَارِكْهَ على الشبكات الاجتماعية.