HTML TABLES جداول

 تُستخدم الجداول في لغة HTML لعرض البيانات في صفوف وأعمدة منظمة. تُعتبر الجداول مفيدة لعرض البيانات الجدولة مثل التقارير المالية، وقوائم المنتجات، وبيانات العملاء، وغيرها. إليك شرح مُفصّل لخصائص وعناصر الجداول في HTML:

العناصر الأساسية لإنشاء جدول:

• <table>: يُستخدم هذا العنصر لإنشاء الجدول بأكمله. يجب أن يحتوي هذا العنصر على جميع عناصر الجدول الأخرى.
• <tr>: يُستخدم هذا العنصر لإنشاء صف جديد داخل الجدول (اختصار لـ "table row").
• <th>: يُستخدم هذا العنصر لإنشاء خلية عنوان في الجدول (اختصار لـ "table header"). يُعرض النص داخل هذا العنصر بخط عريض ويكون عادةً في منتصف الخلية. يُستخدم هذا العنصر عادةً لتمثيل عناوين الأعمدة.
• <td>: يُستخدم هذا العنصر لإنشاء خلية بيانات عادية في الجدول (اختصار لـ "table data"). يحتوي هذا العنصر على البيانات الفعلية التي سيتم عرضها في الجدول.
• <caption>: يُستخدم هذا العنصر لإضافة عنوان أو وصف للجدول. يجب وضع هذا العنصر مباشرة بعد وسم البداية <table>.

مثال بسيط لإنشاء جدول:

• جرب الان

HTML

<table>
  <caption>جدول بسيط</caption>
  <tr>
    <th>الاسم</th>
    <th>العمر</th>
  </tr>
  <tr>
    <td>أحمد</td>
    <td>25</td>
  </tr>
  <tr>
    <td>محمد</td>
    <td>30</td>
  </tr>
</table>

سيُعرض هذا الكود جدولًا بسيطًا يحتوي على عمودين (الاسم والعمر) وصفين من البيانات.

خصائص إضافية لعنصر <table>:

هناك بعض الخصائص التي يمكنك استخدامها لتخصيص مظهر الجدول، ولكن يُفضل استخدام CSS لتنسيق الجداول بدلاً من استخدام هذه الخصائص مباشرةً، لأن بعضها أصبح مُهملًا:

• border: يُستخدم لإضافة حد للجدول. يمكنك تحديد سمك الحد بقيمة رقمية. مثال: <table border="1">.
• width: يُستخدم لتحديد عرض الجدول. يمكنك تحديد العرض بالبكسل أو بالنسبة المئوية. مثال: <table width="500"> أو <table width="80%">. ملاحظة: يُفضل استخدام CSS لتحديد عرض الجدول باستخدام خاصية width في CSS.
• bgcolor: يُستخدم لتحديد لون خلفية الجدول. مثال: <table bgcolor="lightblue">. ملاحظة: يُفضل استخدام CSS لتحديد لون الخلفية باستخدام خاصية background-color في CSS.

خصائص أخرى مُفيدة:

• colspan: تُستخدم هذه الخاصية في العنصرين <th> و <td> لدمج عدة أعمدة في خلية واحدة. مثال: <th colspan="2">اسم كامل</th> سيجعل الخلية تأخذ مساحة عمودين.
• rowspan: تُستخدم هذه الخاصية في العنصرين <th> و <td> لدمج عدة صفوف في خلية واحدة. مثال: <td rowspan="2">معلومات</td> سيجعل الخلية تأخذ مساحة صفين.

التنسيق باستخدام CSS:

يُفضل استخدام CSS لتنسيق الجداول بشكل كامل. يوفر CSS تحكمًا أكبر في مظهر الجدول، مثل:

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

باستخدام CSS، يمكنك إنشاء جداول جذابة ومنظمة بشكل احترافي.

أتمنى أن يكون هذا الشرح مُفصّلاً وواضحًا. إذا كان لديك أي أسئلة أخرى، فلا تتردد في طرحها.