دمج الخلايا باستخدام خاصية Colspan

في هذا الدرس، سنستكشف كيفية استخدام الخاصية colspan في جداول HTML لدمج عدة أعمدة في عمود واحد. فهم كيفية دمج الخلايا أمر أساسي عندما تحتاج إلى إنشاء جداول أكثر مرونة وسهولة في القراءة تُظهر البيانات المعقدة بطريقة منظمة وواضحة. تُستخدم هذه التقنية على نطاق واسع في التقارير التجارية، ولوحات المعلومات المالية، وجداول التسعير، وأي موقف تُعرض فيه بيانات مجمّعة أو ملخصة.

ما هي خاصية colspan؟

تتيح خاصية colspan في HTML لخلية جدول واحدة (<td> أو <th>) أن تمتد عبر عدة أعمدة. وهي مفيدة بشكل خاص عندما ترغب في دمج بيانات مترابطة أو إنشاء صفوف ملخصة تحتوي على الإجماليات أو النظرة العامة.

مثال على الصياغة:

<td colspan="2">خلية مدمجة</td>

هذا يعني أن الخلية ستشغل مساحة عمودين بدلاً من عمود واحد.

مثال عملي من مجال الأعمال

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

مثال: بدون استخدام Colspan

<table border="1">
  <tr>
    <th>القسم</th>
    <th>الربع الأول</th>
    <th>الربع الثاني</th>
    <th>الربع الثالث</th>
    <th>الربع الرابع</th>
  </tr>
  <tr>
    <td>التسويق</td>
    <td>$10,000</td>
    <td>$12,000</td>
    <td>$9,000</td>
    <td>$11,000</td>
  </tr>
  <tr>
    <td>المبيعات</td>
    <td>$15,000</td>
    <td>$17,000</td>
    <td>$14,000</td>
    <td>$16,000</td>
  </tr>
  <tr>
    <td>الإجمالي</td>
    <td>$25,000</td>
    <td>$29,000</td>
    <td>$23,000</td>
    <td>$27,000</td>
  </tr>
</table>

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

مثال: باستخدام Colspan

<table border="1">
  <tr>
    <th>القسم</th>
    <th>الربع الأول</th>
    <th>الربع الثاني</th>
    <th>الربع الثالث</th>
    <th>الربع الرابع</th>
  </tr>
  <tr>
    <td>التسويق</td>
    <td>$10,000</td>
    <td>$12,000</td>
    <td>$9,000</td>
    <td>$11,000</td>
  </tr>
  <tr>
    <td>المبيعات</td>
    <td>$15,000</td>
    <td>$17,000</td>
    <td>$14,000</td>
    <td>$16,000</td>
  </tr>
  <tr>
    <td colspan="4" style="text-align:right; font-weight:bold;">الإجمالي</td>
    <td style="font-weight:bold;">$95,000</td>
  </tr>
</table>

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

تنسيق الخلايا المدمجة باستخدام CSS لتحسين القراءة

يمكنك تحسين مظهر الخلايا المدمجة باستخدام CSS. إليك مثالًا لتوضيح كيفية إبراز صفوف الإجمالي:

<style>
  table {
    border-collapse: collapse;
    width: 100%;
  }
  th, td {
    padding: 10px;
    border: 1px solid #ccc;
    text-align: center;
  }
  tfoot td {
    background-color: #f3f3f3;
    font-weight: bold;
  }
</style>

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

متى نستخدم Colspan في المشاريع الفعلية؟

• التقارير المالية: لتلخيص البيانات عبر الأعمدة مثل الإجماليات أو المتوسطات.
• جداول تسعير المنتجات: لدمج الخلايا الخاصة بـ “العروض الخاصة” أو “الميزات المميزة”.
• جداول الجلسات أو الأحداث: لدمج الخلايا الخاصة بجلسات تمتد لعدة فترات زمنية.
• قوائم الفرق: لدمج الخلايا عندما تشترك عدة أدوار في نفس القسم أو الفئة.

النقاط الأساسية

• تقوم colspan بدمج عدة أعمدة في خلية واحدة.
• استخدمها لإنشاء تنسيقات أوضح وأكثر منطقية في الجداول المعقدة.
• ادمجها مع CSS للحصول على عرض أكثر احترافية وسهولة في الفهم.

الخلاصة

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