أربعة عناصر تُحسّن هيكل الجدول دلالياً:
• <caption>: عنوان الجدول — يجب أن يكون أول عنصر داخل <table>. مهم جداً للـ SEO والوصولية.
• <thead>: قسم الرأس — يحتوي صفوف العناوين. عند طباعة الصفحة يتكرر في كل صفحة.
• <tbody>: قسم البيانات الرئيسي — يحتوي صفوف البيانات. يمكن أن يكون أكثر من tbody واحد.
• <tfoot>: قسم التذييل — يحتوي الإجماليات والملاحظات. يظهر في نهاية الجدول حتى لو كُتب قبل tbody في الكود.
فوائد هذه العناصر: ✅ أفضل دلالياً للـ SEO ✅ قارئات الشاشة تتعامل معها بشكل أفضل ✅ تطبيق CSS محدد لكل قسم ✅ JavaScript أسهل للتعامل معها
| 1 | <table> |
| 2 | <caption>إحصائيات مبيعات الربع الأول 2024</caption> |
| 3 | |
| 4 | <thead> |
| 5 | <tr> |
| 6 | <th scope="col">الشهر</th> |
| 7 | <th scope="col">المبيعات</th> |
| 8 | <th scope="col">الإيراد</th> |
| 9 | </tr> |
| 10 | </thead> |
| 11 | |
| 12 | <tbody> |
| 13 | <tr> |
| 14 | <td>يناير</td> |
| 15 | <td>150</td> |
| 16 | <td>45,000 جنيه</td> |
| 17 | </tr> |
| 18 | <tr> |
| 19 | <td>فبراير</td> |
| 20 | <td>200</td> |
| 21 | <td>60,000 جنيه</td> |
| 22 | </tr> |
| 23 | <tr> |
| 24 | <td>مارس</td> |
| 25 | <td>180</td> |
| 26 | <td>54,000 جنيه</td> |
| 27 | </tr> |
| 28 | </tbody> |
| 29 | |
| 30 | <tfoot> |
| 31 | <tr> |
| 32 | <th scope="row">الإجمالي</th> |
| 33 | <td>530</td> |
| 34 | <td>159,000 جنيه</td> |
| 35 | </tr> |
| 36 | </tfoot> |
| 37 | </table> |
مثال 1: جدول مالي كامل
| 1 | <table> |
| 2 | <caption>ميزانية المشروع — Q1 2024</caption> |
| 3 | |
| 4 | <thead> |
| 5 | <tr> |
| 6 | <th scope="col">البند</th> |
| 7 | <th scope="col">المخطط</th> |
| 8 | <th scope="col">الفعلي</th> |
| 9 | <th scope="col">الفارق</th> |
| 10 | </tr> |
| 11 | </thead> |
| 12 | |
| 13 | <tbody> |
| 14 | <tr> |
| 15 | <th scope="row">التطوير</th> |
| 16 | <td>50,000</td> |
| 17 | <td>48,500</td> |
| 18 | <td>+1,500</td> |
| 19 | </tr> |
| 20 | <tr> |
| 21 | <th scope="row">التسويق</th> |
| 22 | <td>20,000</td> |
| 23 | <td>22,000</td> |
| 24 | <td>-2,000</td> |
| 25 | </tr> |
| 26 | <tr> |
| 27 | <th scope="row">البنية التحتية</th> |
| 28 | <td>15,000</td> |
| 29 | <td>14,200</td> |
| 30 | <td>+800</td> |
| 31 | </tr> |
| 32 | </tbody> |
| 33 | |
| 34 | <tfoot> |
| 35 | <tr> |
| 36 | <th scope="row">الإجمالي</th> |
| 37 | <td>85,000</td> |
| 38 | <td>84,700</td> |
| 39 | <td>+300</td> |
| 40 | </tr> |
| 41 | </tfoot> |
| 42 | </table> |