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 تساعد برامج قراءة الشاشة على فهم العلاقة بين الرؤوس والمحتوى.
  • يمكن استخدام رؤوس الصفوف والأعمدة معًا لتحسين قابلية القراءة.


تعليقات

المشاركات الشائعة من هذه المدونة

C# - Arrays

Entity Framework - ما هو ORM؟ ونبذة عن Dapper وNHibernate

1.1 SQL Introduction