18 – دمج الخلايا rowspan, colspan – الجداول – المستوى الاول

بواسطةahmed

📌 دمج الخلايا في HTML Tables

🔹 ما معنى دمج الخلايا؟

  • أحيانًا نحتاج إن خلية في الجدول تمتد على أكثر من عمود (Column) أو أكثر من صف (Row).

  • هنا نستخدم:

    • colspan → لدمج أعمدة.

    • rowspan → لدمج صفوف.

🔹 1. دمج الأعمدة باستخدام colspan

  • الخاصية colspan تخلي الخلية تمتد على أكثر من عمود في نفس الصف.

✅ مثال: جدول فيه “الاسم” و”العمر” و”المدينة”، وعايز ندمج العمودين الأخيرين تحت عنوان “التفاصيل”:

🔎 النتيجة:

الاسم التفاصيل
أحمد 25
سارة 22

👉 هنا العنوان “التفاصيل” امتد على عمودين.

🔹 2. دمج الصفوف باستخدام rowspan

  • الخاصية rowspan تخلي الخلية تمتد على أكثر من صف في نفس العمود.

✅ مثال: جدول للطلاب والمادة اللي بيدرسوها:

🔎 النتيجة:

الاسم المادة
أحمد رياضيات
علوم
سارة عربي

👉 هنا خلية “أحمد” امتدت على صفين.

🔹 3. استخدام rowspan و colspan مع بعض

  • تقدر تدمج الأعمدة والصفوف في نفس الوقت.

✅ مثال: جدول فيه بيانات الموظفين:

🔎 النتيجة:

  • “الاسم” ممتدة على صفين.

  • “التفاصيل” ممتدة على عمودين.

🔹 ملاحظات مهمة

  1. لازم تحافظ على توازن الجدول:

    • لو دمجت خلايا في صف، لازم الأعمدة التانية تتظبط بحيث الجدول يفضل منتظم.

  2. يفضل استخدام CSS للتنسيق (الألوان، المحاذاة، الخطوط).

  3. rowspan و colspan بيقبلوا قيم رقمية (عدد الصفوف أو الأعمدة اللي عايز تدمجها).

🔹 ملخص

  • colspan=”n” → دمج خلية تمتد على n أعمدة.

  • rowspan=”n” → دمج خلية تمتد على n صفوف.

  • تقدر تستخدمهم مع بعض لعمل جداول احترافية.

★ ★ ★ ★ ★
التقييم: 0 من 0 تصويت

موضوعات ذات صلة

اترك تعليقاً

لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *