الجداول في HTML تُستخدم لعرض البيانات الجدولية — ليس للتخطيط (Layout)!
• <table>: الحاوية الرئيسية للجدول • <tr> (Table Row): صف من الجدول • <td> (Table Data): خلية بيانات عادية • <th> (Table Header): خلية عنوان — تظهر عريضة ومتوسطة، مهمة للـ SEO والوصولية
صفات مهمة لـ th: • scope="col": العنوان لعمود • scope="row": العنوان لصف • scope="colgroup": العنوان لمجموعة أعمدة
صفات th وtd: • colspan: الخلية تمتد على عدة أعمدة • rowspan: الخلية تمتد على عدة صفوف
| 1 | <table> |
| 2 | <tr> |
| 3 | <th scope="col">الاسم</th> |
| 4 | <th scope="col">الدرجة</th> |
| 5 | <th scope="col">التقدير</th> |
| 6 | </tr> |
| 7 | <tr> |
| 8 | <td>أحمد محمد</td> |
| 9 | <td>95</td> |
| 10 | <td>ممتاز</td> |
| 11 | </tr> |
| 12 | <tr> |
| 13 | <td>سارة علي</td> |
| 14 | <td>87</td> |
| 15 | <td>جيد جداً</td> |
| 16 | </tr> |
| 17 | </table> |
مثال 1: جدول مقارنة أسعار
| 1 | <table> |
| 2 | <caption>مقارنة خطط الاشتراك</caption> |
| 3 | <thead> |
| 4 | <tr> |
| 5 | <th scope="col">الميزة</th> |
| 6 | <th scope="col">المجاني</th> |
| 7 | <th scope="col">المحترف</th> |
| 8 | <th scope="col">المؤسسي</th> |
| 9 | </tr> |
| 10 | </thead> |
| 11 | <tbody> |
| 12 | <tr> |
| 13 | <th scope="row">عدد الكورسات</th> |
| 14 | <td>5</td> |
| 15 | <td>غير محدود</td> |
| 16 | <td>غير محدود</td> |
| 17 | </tr> |
| 18 | <tr> |
| 19 | <th scope="row">شهادات</th> |
| 20 | <td>❌</td> |
| 21 | <td>✅</td> |
| 22 | <td>✅</td> |
| 23 | </tr> |
| 24 | <tr> |
| 25 | <th scope="row">دعم فني</th> |
| 26 | <td>❌</td> |
| 27 | <td>✅ بريد</td> |
| 28 | <td>✅ مباشر</td> |
| 29 | </tr> |
| 30 | </tbody> |
| 31 | <tfoot> |
| 32 | <tr> |
| 33 | <th scope="row">السعر/شهر</th> |
| 34 | <td>مجاني</td> |
| 35 | <td>99 جنيه</td> |
| 36 | <td>299 جنيه</td> |
| 37 | </tr> |
| 38 | </tfoot> |
| 39 | </table> |