كيفية دمج الأعمدة باستخدام colspan في جداول HTML

هذا الدرس من الدورة التدريبية: كورس تعلم HTML من الصفر لبناء صفحات ويب

الدرس: كيفية دمج الأعمدة باستخدام colspan في جداول HTML

المدة: 5 دقائق

وصف مختصر:

اكتشف كيفية استخدام colspan لدمج الأعمدة في جداول HTML بفعالية. تعرف على الطريقة الصحيحة لتحقيق ذلك وفرقها عن استخدام CSS.

وصف الدرس

في تصميم جداول HTML، يمكن أن تكون الحاجة إلى دمج الأعمدة أمراً أساسياً لتبسيط عرض البيانات أو تقديم ملخصات. في هذا الدرس، سنركز على كيفية استخدام خاصية colspan لدمج الأعمدة بشكل صحيح، وسنوضح الفرق بين استخدام colspan وطرق أخرى مثل CSS لتحقيق نفس الهدف.

مفهوم خاصية colspan

خاصية colspan تُستخدم في عناصر <td> و <th> لدمج عدة أعمدة في خلية واحدة. هذا يساعد في تبسيط عرض البيانات وتقديم المعلومات بشكل منظم. يتم تحديد عدد الأعمدة التي يجب دمجها من خلال قيمة colspan.

  • colspan: خاصية تُضاف إلى عنصر <td> أو <th> لتحديد عدد الأعمدة التي ستغطيها الخلية. على سبيل المثال، colspan="3" يعني أن الخلية تمتد عبر ثلاثة أعمدة.


مثال عملي

في المثال التالي، نستخدم colspan لدمج أعمدة في خلية لتقديم ملخص حول عدد الموظفين:



html


<table>
<thead>
<tr>
<th>الاسم</th>
<th>العمر</th>
<th>المهنة</th>
</tr>
</thead>
<tbody>
<tr>
<td>أحمد</td>
<td>50</td>
<td>مدير</td>
</tr>
<tr>
<td>فاطمة</td>
<td>29</td>
<td>مصممة</td>
</tr>
</tbody>
<tfoot>
<tr>
<th colspan="3" style="padding: 40px 0; text-align: center;">
<a href="#a">الإجمالي: 2 موظفين</a>
</th>
</tr>
</tfoot>
</table>


شرح الكود

  • <thead>: يحتوي على رأس الجدول مع أسماء الأعمدة.

  • <tbody>: يحتوي على بيانات الجدول الفعلية.

  • <tfoot>: يحتوي على صف واحد يستخدم colspan="3" لدمج ثلاثة أعمدة في خلية واحدة. تم استخدام تنسيق CSS لتحسين العرض ولكن يجب أن يكون الدمج باستخدام colspan هو الخيار الأساسي.


المقارنة مع CSS

  • استخدام CSS: يمكن استخدام CSS لتطبيق أنماط معينة لتوسيع خلايا الجدول، ولكن لا يمكن لـ CSS دمج الأعمدة بفعالية. على سبيل المثال، استخدام border في CSS قد يحاكي الدمج البصري ولكنه لا يغير بنية الجدول الفعلية.


لماذا استخدام colspan هو الخيار الصحيح

  1. تنظيم البيانات: colspan يوفر طريقة دقيقة لدمج الأعمدة دون الحاجة إلى تعديل البنية الأساسية للجدول.

  2. تحسين القراءة: يتيح دمج الأعمدة في خلية واحدة تقديم ملخصات أو معلومات إضافية بوضوح.

  3. توفير الوقت: تجنب استخدام CSS لتحقيق دمج الأعمدة يوفر الوقت والجهد، ويجنب تعقيدات التصميم غير الضرورية.


كلمة عن الدرس

تعلم كيفية استخدام خاصية colspan لدمج الأعمدة في جداول HTML يعزز من قدرتك على تنظيم البيانات بشكل فعال ويوفر تجربة مستخدم متميزة. تجنب استخدام CSS لتقليد دمج الأعمدة، واستخدم colspan لتحقيق نتائج دقيقة وعملية.

استثمر في تعلم هذه التقنية لتطوير مهاراتك كمطور ويب وزيادة احترافيتك في تصميم الجداول.

الفيديوهات

سجل دخول وتأكد من اشتراكك في هذا البرنامج الدراسي للوصول إلى الأدوات والمواد التدريبية و الفيديوهات

فيديو الدرس التعليمي كيفية دمج الأعمدة باستخدام colspan في جداول HTML

المصادر

سجل دخول وتأكد من اشتراكك في هذا البرنامج الدراسي للوصول إلى الأدوات والمواد التدريبية و المصادر

الأكواد المستخدمة في دمج الأعمدة باستخدام colspan

ملحقات ال PDF

سجل دخول وتأكد من اشتراكك في هذا البرنامج الدراسي للوصول إلى الأدوات والمواد التدريبية و ملحقات ال PDF

الملف المرجعي لشرح الجداول وعرض البيانات في HTML

هذا الدرس من الدورة التدريبية

كورس تعلم HTML من الصفر لبناء صفحات ويب

  • 337 دقيقة من الفيديوهات التفاعلية الحصرية
  • 66 مصدر إضافي
  • 52 ملحقات PDFs
  • 14 فيديو إضافي داخل الدروس
  • 28 تطبيق نظري وعملي
  • الوصول على جميع الأجهزة
  • وصول مدى الحياة
  • شهادة أوروبية لإتمام الدراسة
  • ا لحصول على شهادة دبلوم موثقة

للوصول إلى الفيديوهات والمصادر والملحقات الدراسية والمواد التعليمية لدراسة برنامج دورة تدريبية تعلم لغة HTML لبناء مواقع الإنترنت
اضغط هنا ابدأ التعلم أيضاً عند أداء الاختبارات بنجاح سوف تحصل على الشهادة الأوروبية المعتمدة في إتمام الدراسة والتأهل لطلب الشهادة الدولية في هذا البرنامج

الدروس والاختبارات لتعلم هذه الدورة التدريبية : كورس تعلم HTML من الصفر لبناء صفحات ويب

دورات تدريبية أخرى في برمجة

دبلوم بناء وتنسيق وبرمجة مواقع إنترنت تفاعلية

دبلوم تطوير واجهة مستخدم HTML وCSS وJavaScript شاهد آراء مهندسين البرمجيات الذين حصلوا على عمل بعد إكمالهم الدورات التدريبية مع مدرب البورد...

دورة لغة برمجة PHP لبناء صفحات ويب ديناميكية

دورة لغة برمجة PHP لبناء صفحات ويب ديناميكية يقام البرنامج بالتعاون وباعتماد الجهات التالية شهادة موثقة من الجهات الالمانية شهادة من اكاديمية...

مقالات ذات صلة

 استخدام خاصية class في HTML التنظيم والتنسيق بأسلوب احترافي

 استخدام خاصية class في HTML: التنظيم والتنسيق بأسلوب احترافي في عالم تطوير الويب، تعتبر خاصية class من أهم الأدوات المستخدمة لتنظيم المحتوى...

التحكم في صفحة الويب باستخدام JavaScript: دليل شامل

التحكم في صفحة الويب باستخدام JavaScript: دليل شامل يعد التحكم في صفحة الويب باستخدام JavaScript من الجوانب الأساسية التي تمكن المطورين من...

كيف يتعامل المتصفح مع الأكواد المكتوبة بلغة HTML

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

has been added to the cart. View Cart