HTML - Table Headers رؤوس الجداول

رؤوس الجداول (Table Headers) في HTML

في HTML، تُستخدم وسم <th> لتعريف خلية رأس (Header Cell) في الجدول. وتظهر هذه الخلايا عادة بخط عريض وتكون مُحاذاة للوسط بشكل افتراضي.

---

✅ الصيغة الأساسية:

<table>
  <tr>
    <th>الاسم</th>
    <th>العمر</th>
  </tr>
  <tr>
    <td>محمود</td>
    <td>30</td>
  </tr>
</table>

⬅ تم استخدام <th> بدلاً من <td> في الصف الأول ليكون كرأس الجدول.

---

✅ استخدام scope لتوضيح علاقة الرأس بالصفوف أو الأعمدة:

<table border="1">
  <tr>
    <th scope="col">المنتج</th>
    <th scope="col">السعر</th>
  </tr>
  <tr>
    <td>كمبيوتر محمول</td>
    <td>5000 جنيه</td>
  </tr>
</table>

⬅ scope="col" تشير إلى أن الرأس ينتمي إلى عمود.

---

✅ استخدام scope="row" لرؤوس الصفوف:

<table border="1">
  <tr>
    <th scope="row">الاثنين</th>
    <td>رياضيات</td>
  </tr>
  <tr>
    <th scope="row">الثلاثاء</th>
    <td>علوم</td>
  </tr>
</table>

⬅ scope="row" توضح أن رأس الخلية ينتمي إلى الصف الذي يليها.

---

💡 ملاحظات:

• وسم <th> يُستخدم عادة في الصف الأول من الجدول لتمثيل رؤوس الأعمدة.
• الخاصية scope تساعد برامج قراءة الشاشة على فهم العلاقة بين الرؤوس والمحتوى.
• يمكن استخدام رؤوس الصفوف والأعمدة معًا لتحسين قابلية القراءة.