الجداول (Tables)

ما هو الجدول؟

الجدول <table> يعرض بيانات في صفوف وأعمدة: قوائم أسعار، جداول حصص، نتائج... إلخ. يُبنى من ثلاثة عناصر أساسية:

• <tr> — صف (Table Row)
• <th> — خلية رأس/عنوان (Table Header)
• <td> — خلية بيانات (Table Data)

<table>
  <tr>
    <th>الاسم</th>
    <th>العمر</th>
  </tr>
  <tr>
    <td>براء</td>
    <td>25</td>
  </tr>
</table>

العنوان <caption>

يعطي الجدول عنوانًا (مهم للوصول و SEO):

<table>
  <caption>أسعار الاشتراكات</caption>
  ...
</table>

دمج الخلايا: colspan و rowspan

• colspan يمدّ الخلية على عدة أعمدة.
• rowspan يمدّها على عدة صفوف.

<tr>
  <td colspan="2">يمتد على عمودين</td>
</tr>
<tr>
  <td rowspan="2">يمتد على صفّين</td>
  <td>خلية</td>
</tr>

بنية احترافية: thead و tbody و tfoot

تقسّم الجدول إلى رأس وجسم وتذييل، وتحسّن الوصول والطباعة:

<table>
  <thead>
    <tr><th>المنتج</th><th>السعر</th></tr>
  </thead>
  <tbody>
    <tr><td>كتاب</td><td>50</td></tr>
  </tbody>
  <tfoot>
    <tr><td>الإجمالي</td><td>50</td></tr>
  </tfoot>
</table>

الوصول (a11y)

أضف scope لخلايا الرأس لتوضّح هل هي رأس عمود أم صف:

<th scope="col">الاسم</th>
<th scope="row">المجموع</th>

الأخطاء الشائعة

• ❌ استخدام الجداول للتخطيط: الجداول للبيانات فقط. للتخطيط استخدم CSS (Flexbox/Grid).
• ❌ نسيان <th>: استخدم <th> لخلايا العناوين لا <td> — أفضل للوصول.
• ❌ تجاهل <caption>: يساعد المستخدم وقارئ الشاشة على فهم الجدول.

خلاصة

<table> لعرض البيانات المنظّمة. استخدم <th> للعناوين، و<caption> للعنوان، وthead/tbody للبنية، وscope للوصول.