HTML - Table Colspan & Rowspan دمج الخلايا

دمج الخلايا في الجدول باستخدام colspan و rowspan في HTML

في HTML، يمكنك دمج أكثر من خلية أفقياً أو عمودياً باستخدام الخاصيتين:

• colspan: لدمج الخلايا أفقياً (عبر الأعمدة)
• rowspan: لدمج الخلايا عمودياً (عبر الصفوف)

---

✅ استخدام colspan

تُستخدم خاصية colspan لدمج خلية واحدة لتغطي عدة أعمدة.

<table border="1">
  <tr>
    <th colspan="2">الاسم الكامل</th>
  </tr>
  <tr>
    <td>أحمد</td>
    <td>علي</td>
  </tr>
</table>

⬅ الخلية الأولى في الصف الأول تغطي عمودين.

---

✅ استخدام rowspan

تُستخدم خاصية rowspan لدمج خلية واحدة لتغطي عدة صفوف.

<table border="1">
  <tr>
    <th>الاسم</th>
    <th>الهاتف</th>
  </tr>
  <tr>
    <td rowspan="2">منى</td>
    <td>123456</td>
  </tr>
  <tr>
    <td>789012</td>
  </tr>
</table>

⬅ الخلية التي تحتوي على "منى" تغطي صفين.

---

💡 ملاحظات:

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