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