دمج الصفوف باستخدام Rowspan

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

ما هي خاصية rowspan؟

تسمح خاصية rowspan في HTML لخلية جدول واحدة (<td> أو <th>) بالامتداد عموديًا عبر عدة صفوف. وهي النظير للخاصية colspan التي تُستخدم لدمج الخلايا أفقيًا.

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

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

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

متى نستخدم Rowspan في الجداول الواقعية؟

تكون خاصية rowspan مثالية عندما يكون لديك قيمة أو عنوان مشترك ينطبق على عدة صفوف من البيانات المرتبطة. إليك بعض الاستخدامات الشائعة:

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

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

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

<table border="1">
  <tr>
    <th>القسم</th>
    <th>اسم الموظف</th>
    <th>الوظيفة</th>
  </tr>
  <tr>
    <td>التسويق</td>
    <td>أليس</td>
    <td>مصممة</td>
  </tr>
  <tr>
    <td>التسويق</td>
    <td>بوب</td>
    <td>استراتيجي محتوى</td>
  </tr>
  <tr>
    <td>المبيعات</td>
    <td>تشارلي</td>
    <td>تنفيذي مبيعات</td>
  </tr>
  <tr>
    <td>المبيعات</td>
    <td>دانا</td>
    <td>مديرة حسابات</td>
  </tr>
</table>

رغم أن الجدول يعمل، إلا أن تكرار أسماء الأقسام يجعله مزدحمًا بصريًا وأقل وضوحًا.

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

الآن، سنبسط التخطيط باستخدام rowspan لدمج خلايا الأقسام التي تنطبق على أكثر من موظف:

<table border="1">
  <tr>
    <th>القسم</th>
    <th>اسم الموظف</th>
    <th>الوظيفة</th>
  </tr>
  <tr>
    <td rowspan="2">التسويق</td>
    <td>أليس</td>
    <td>مصممة</td>
  </tr>
  <tr>
    <td>بوب</td>
    <td>استراتيجي محتوى</td>
  </tr>
  <tr>
    <td rowspan="2">المبيعات</td>
    <td>تشارلي</td>
    <td>تنفيذي مبيعات</td>
  </tr>
  <tr>
    <td>دانا</td>
    <td>مديرة حسابات</td>
  </tr>
</table>

الآن يظهر اسم كل قسم مرة واحدة فقط، مما يوضح أن عدة موظفين ينتمون إلى نفس المجموعة. النتيجة جدول أوضح وأكثر احترافية.

نصائح لتنسيق الجداول التي تستخدم Rowspan

يمكن لـ CSS أن يجعل الجداول التي تستخدم rowspan أكثر وضوحًا وأناقة. إليك مثالًا يضيف حدودًا واضحة وألوانًا متبادلة وتباعدًا مناسبًا لمظهر عصري.

<style>
    table {
      width: 100%;
      border-collapse: collapse;
    }
    th, td {
      border: 1px solid #ccc;
      padding: 10px;
      text-align: left;
    }
    th {
      background-color: #f5f5f5;
    }
    tr:nth-child(even) {
      background-color: #fafafa;
    }
  </style>

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

استخدامات عملية في الأعمال

• قوائم الموظفين: تجميع أعضاء الفريق تحت اسم القسم.
• جداول المؤتمرات: دمج الفترات الزمنية عندما تستمر الجلسة نفسها لعدة ساعات.
• تقارير المبيعات: دمج المعاملات المتعددة ضمن منطقة أو فرع واحد.
• قوائم المخزون: عرض العناصر التي تنتمي إلى نفس خط الإنتاج.

أخطاء شائعة يجب تجنبها

• نسيان إزالة الخلايا المكررة بعد تطبيق rowspan.
• خطأ في عدد الصفوف — تأكد أن العدد يطابق الصفوف التي يجب أن تمتد الخلية عبرها.
• الخلط بين rowspan وcolspan دون تخطيط دقيق لتناسق الجدول.

أهم النقاط

• تُستخدم rowspan لدمج الخلايا عموديًا لتمثيل بيانات مشتركة أو مجمعة.
• تحسن قابلية القراءة من خلال تقليل التكرار.
• مثالية للجداول التنظيمية والمالية وجداول المواعيد.
• استخدمها مع CSS للحصول على تنسيق عصري وواضح.

الخلاصة

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