صفتان يتيحان دمج خلايا الجدول:
• colspan: الخلية تمتد على عدد من الأعمدة أفقياً • rowspan: الخلية تمتد على عدد من الصفوف رأسياً
كيف تعمل: - colspan="2": الخلية تأخذ مكان خليتين متجاورتين - rowspan="3": الخلية تأخذ مكان ثلاث خلايا فوق بعض - colspan="0": الخلية تمتد حتى نهاية colgroup
نصيحة مهمة: عند استخدام rowspan، الصفوف التالية يجب أن تحذف الخلايا التي "احتلها" الـ rowspan. هذا مصدر أخطاء شائعة — ارسم الجدول على ورق أولاً!
| 1 | <!-- colspan: دمج أعمدة --> |
| 2 | <table> |
| 3 | <tr> |
| 4 | <th colspan="3">إجماليات المبيعات</th> |
| 5 | </tr> |
| 6 | <tr> |
| 7 | <td>يناير</td> |
| 8 | <td>فبراير</td> |
| 9 | <td>مارس</td> |
| 10 | </tr> |
| 11 | <tr> |
| 12 | <td>100</td> |
| 13 | <td>150</td> |
| 14 | <td>200</td> |
| 15 | </tr> |
| 16 | </table> |
| 17 | |
| 18 | <!-- rowspan: دمج صفوف --> |
| 19 | <table> |
| 20 | <tr> |
| 21 | <th rowspan="3">مصر</th> |
| 22 | <td>القاهرة</td> |
| 23 | <td>20 مليون</td> |
| 24 | </tr> |
| 25 | <tr> |
| 26 | <td>الإسكندرية</td> |
| 27 | <td>5 مليون</td> |
| 28 | </tr> |
| 29 | <tr> |
| 30 | <td>الجيزة</td> |
| 31 | <td>8 مليون</td> |
| 32 | </tr> |
| 33 | </table> |
مثال 1: جدول جدول درجات معقد
| 1 | <table> |
| 2 | <caption>جدول درجات الطلاب</caption> |
| 3 | <thead> |
| 4 | <tr> |
| 5 | <th rowspan="2" scope="col">اسم الطالب</th> |
| 6 | <th colspan="3" scope="colgroup">المواد</th> |
| 7 | <th rowspan="2" scope="col">المجموع</th> |
| 8 | </tr> |
| 9 | <tr> |
| 10 | <th scope="col">HTML</th> |
| 11 | <th scope="col">CSS</th> |
| 12 | <th scope="col">JavaScript</th> |
| 13 | </tr> |
| 14 | </thead> |
| 15 | <tbody> |
| 16 | <tr> |
| 17 | <td>أحمد علي</td> |
| 18 | <td>95</td> |
| 19 | <td>88</td> |
| 20 | <td>92</td> |
| 21 | <td>275</td> |
| 22 | </tr> |
| 23 | <tr> |
| 24 | <td>سارة محمد</td> |
| 25 | <td>90</td> |
| 26 | <td>95</td> |
| 27 | <td>85</td> |
| 28 | <td>270</td> |
| 29 | </tr> |
| 30 | </tbody> |
| 31 | </table> |