18 – دمج الخلايا rowspan, colspan – الجداول – المستوى الاول
📌 دمج الخلايا في HTML Tables
🔹 ما معنى دمج الخلايا؟
-
أحيانًا نحتاج إن خلية في الجدول تمتد على أكثر من عمود (Column) أو أكثر من صف (Row).
-
هنا نستخدم:
-
colspan → لدمج أعمدة.
-
rowspan → لدمج صفوف.
-
🔹 1. دمج الأعمدة باستخدام colspan
-
الخاصية colspan تخلي الخلية تمتد على أكثر من عمود في نفس الصف.
✅ مثال: جدول فيه “الاسم” و”العمر” و”المدينة”، وعايز ندمج العمودين الأخيرين تحت عنوان “التفاصيل”:
🔎 النتيجة:
| الاسم | التفاصيل |
|---|---|
| أحمد | 25 |
| سارة | 22 |
👉 هنا العنوان “التفاصيل” امتد على عمودين.
🔹 2. دمج الصفوف باستخدام rowspan
-
الخاصية rowspan تخلي الخلية تمتد على أكثر من صف في نفس العمود.
✅ مثال: جدول للطلاب والمادة اللي بيدرسوها:
🔎 النتيجة:
| الاسم | المادة |
|---|---|
| أحمد | رياضيات |
| علوم | |
| سارة | عربي |
👉 هنا خلية “أحمد” امتدت على صفين.
🔹 3. استخدام rowspan و colspan مع بعض
-
تقدر تدمج الأعمدة والصفوف في نفس الوقت.
✅ مثال: جدول فيه بيانات الموظفين:
🔎 النتيجة:
-
“الاسم” ممتدة على صفين.
-
“التفاصيل” ممتدة على عمودين.
🔹 ملاحظات مهمة
-
لازم تحافظ على توازن الجدول:
-
لو دمجت خلايا في صف، لازم الأعمدة التانية تتظبط بحيث الجدول يفضل منتظم.
-
-
يفضل استخدام CSS للتنسيق (الألوان، المحاذاة، الخطوط).
-
rowspan و colspan بيقبلوا قيم رقمية (عدد الصفوف أو الأعمدة اللي عايز تدمجها).
🔹 ملخص
-
colspan=”n” → دمج خلية تمتد على n أعمدة.
-
rowspan=”n” → دمج خلية تمتد على n صفوف.
-
تقدر تستخدمهم مع بعض لعمل جداول احترافية.
Call now
Contact WhatsApp
