العنصر `<th>`

يُعرِّف العنصر <th> خليةً تُمثِّل ترويسةً في الجدول الذي يحتويها. تُعرّف طبيعة هذه الترويسة عبر الخاصيتين scope و headers.

مثال عن استخدام الخاصية scope لتحديد ما هي الخلايا التي تُمثِّلها ترويسة ما:

<table>
  <caption>معلومات التواصل</caption>
  <tbody>
    <tr>
      <th scope="col">الاسم</th>
      <th scope="col">رقم الهاتف</th>
      <th scope="col">المدينة</th>
    </tr>
    <tr>
      <th scope="row">الموظف 1</th>
      <td>+9639635413465</td>
      <td>حلب</td>
    </tr>
    <tr>
      <th scope="row">الموظف 2</th>
      <td>+9639635443465</td>
      <td>دمشق</td>
    </tr>
    <tr>
      <th scope="row">الموظف 3</th>
      <td>+963233443465</td>
      <td>دمشق</td>
    </tr>
  </tbody>
</table>

لمشاهدة مثال آخر عن استخدام العنصر <th>، راجع صفحة العنصر <table>، ولأمثلة عن خاصيات colspan و rowspan فراجع صفحة العنصر <td> والعنصر <tr>.

بطاقة العنصر

تصنيفات المحتوى	لا يوجد.
المحتوى المسموح	المحتوى التنظيمي، لكن دون المحتوى التقسيمي أو الترويسات أو التذييلات.
الوسم المختصر	لا يجوز أن يُحذَف وسم البداية. يمكن حذف وسم النهاية للعنصر `<td>` إذا أتى وراءه مباشرةً العنصر `<td>` أو `<th>` أو إذا لم يعد هنالك محتوى آخر في العنصر الأب.
العناصر الأب	العنصر `<tr>`.
واجهة DOM	`HTMLTableHeaderCellElement`

دعم المتصفحات

Chrome	Firefox	Edge	Safari	Opera
مدعوم	مدعوم	مدعوم	مدعوم	مدعوم

الخاصيات

يمكن استخدام الخاصيات العامة في هذا العنصر.

`abbr`

هذه الخاصية تحتوي على شرح مختصر عن محتوى الخلية، وبعض البرمجيات مثل قارئات الشاشة قد تعرض هذا الشرح قبل المحتوى نفسه.

يجدر بالذكر أنَّ هذه الخاصية قد حُذِفَت في HTML5، ضع ببالك أن تبدأ الخلية بشرح للمحتوى قبل محتواها أو بكتابة وصف طويل للخلية وأن تضعه ضمن الخاصية title.

`align`

تُستخدم هذه الخاصية لتحديد كيف تكون محاذاة الخلية، وتقبل إحدى القيم الآتية:

left: عرض المحتوى على يسار الخلية
center: توسيط المحتوى في الخلية
right: عرض المحتوى على يمين الخلية
justify: عرض المحتوى ملء السطر.

يجدر بالذكر أنَّ هذه الخاصية أهملت في HTML 4 وحُذِفَت في HTML5، ولا يجوز استخدامها وإنما يجب التنسيق باستخدام لغة CSS، عبر إسناد إحدى القيم left أو center أو right أو justify إلى الخاصية text-align.

`axis`

تحتوي هذه الخاصية على قائمة مؤلفة من سلاسل نصية يفصل بينها بفراغ، وكل سلسلة نصية تُمثِّل مُعرِّف ID لمجموعة من الخلايا التي تُطبَّق الترويسة عليها.

يجدر بالذكر أنَّ هذه الخاصية محذوفة في HTML5، ويجب استخدام الخاصية scope بدلًا منها.

`bgcolor`

تُعرِّف هذه الخاصية لون الخلفية للخلية، ويمكن أن تقبل هذه الخاصية القيم الست عشرية للألوان بنظام sRGB، ويسبقها المحرف #. يمكن استخدام أسماء الألوان الآتية المُعرَّفة مسبقًا:

	`black` = "#000000"		`green` = "#008000"
	`silver` = "#C0C0C0"		`lime` = "#00FF00"
	`gray` = "#808080"		`olive` = "#808000"
	`white` = "#FFFFFF"		`yellow` = "#FFFF00"
	`maroon` = "#800000"		`navy` = "#000080"
	`red` = "#FF0000"		`blue` = "#0000FF"
	`purple` = "#800080"		`teal` = "#008080"
	`fuchsia` = "#FF00FF"		`aqua` = "#00FFFF"

يجدر بالذكر أنَّ هذه الخاصية ليست قياسية، ولا تستعملها إلا بعض إصدارات Internet Explorer، وإنما يجب تنسيق العنصر <th> باستخدام CSS؛ ويمكن تطبيق تأثير مشابه لهذه الخاصية عبر استخدام الخاصية background-color.

`colspan`

تحتوي هذه الخاصية على عدد صحيح موجب يُشير إلى عدد الأعمدة التي تمتد الخلية عليها. القيمة الافتراضية هي 1، إذا ضُبِطَت هذه القيمة إلى 0 فستمتد الخلية إلى آخر عنصر في مجموعة الأعمدة (<colgroup>)، والقيم الأكبر من 1000 سيتعبرها المتصفح غير صحيحة وستُضبَط إلى القيمة الافتراضية (1).

`headers`

تحتوي هذه الخاصية على قائمة بالسلاسل النصية المفصول بينها بفراغ، وكل سلسلة نصية تُمثِّل خاصية id لعناصر <th> التي تنطبق على هذا العنصر.

`rowspan`

تحتوي هذه الخاصية على عدد صحيح موجب يُشير إلى عدد الأسطر التي تمتد الخلية عليها، والقيمة الافتراضية هي 1، وإن ضُبِطَت هذه الخاصية إلى 0 فسيؤدي ذلك إلى امتداد الخلية إلى نهاية قسم الجدول (<thead> أو <tbody> أو <tfoot>) الذي تنتمي الخلية إليه. وأي قيمة أكبر من 65534 ستصبح 65534.

`scope`

هذه الخاصية تُعرِّف ما الذي تتعلق به الخلية المُعرَّفة في العنصر <th> أو <td>، وتأخذ إحدى القيم الآتية:

row: ترتبط الترويسة بجميع الخلايا في السطر الذي تنتمي إليه.
col: ترتبط الترويسة بجميع الخلايا في العمود الذي تنتمي إليه.
rowgroup: تتعلق الترويسة بمجموعة أسطر وترتبط بجميع الخلايات الموجودة في تلك المجموعة.
colgroup: تتعلق الترويسة بمجموعة أعمدة وترتبط بجميع خلاياها.
auto.

`valign`

تُستخدم هذه الخاصية لتحديد كيف تكون المحاذاة الرأسية كل خلية من السطر، وتقبل إحدى القيم الآتية:

baseline: عرض المحتوى أقرب ما يمكن إلى أسفل الخلية، لكن ستكون المحاذاة على خط الأساس (baseline) للمحارف بدلًا من أسفلها، ولو كان للمحارف نفس الحجم فسيكون لهذه القيمة نفس تأثير القيمة bottom.
bottom: عرض المحتوى أقرب ما يمكن إلى أسفل الخلية.
middle: توسيط النص في الخلية رأسيًا.
top: عرض المحتوى أقرب ما يمكن إلى أعلى الخلية.

يجدر بالذكر أنَّ هذه الخاصية أهملت في HTML 4 وحُذِفَت في HTML5، ولا يجوز استخدامها وإنما يجب التنسيق باستخدام CSS عبر الخاصية vertical-align.

`width`

تستعمل هذه الخاصية لتحديد عرض الخلية المستحسن، وإن كانت الخلية ضيقة جدًا ولا يتسع محتواها فيها فسيزداد عرضها بما يلزم.

لاحظ أنَّ هذه الخاصية مهملة في HTML 4 ومحذوفة في HTML5 ويجب استخدام خاصية width في CSS بدلًا منها.

التنسيق الافتراضي

تعرض أغلبية المتصفحات العنصر <th> بضبط الخاصية display إلى table-cell، ووراثة قيمة الخاصية vertical-align، وجعل الخط ثخينًا (font-weight)، ومحاذاة النص (text-align) إلى الوسط:

th {
  display: table-cell;
  vertical-align: inherit;
  font-weight: bold;
  text-align: center;
}

مصادر ومواصفات

معيار HTML Living Standard.
مواصفة HTML5.
مواصفة HTML 4.01.