تسمية <th> في HTML

  • الصفحة السابقة <tfoot>
  • الصفحة التالية <thead>

التعريف والاستخدام

<th> تُستخدم علامة <th> لتعريف خلية العنوان في جدول HTML.

يوجد نوعان من الخلايا في جدول HTML:

  • خلية العنوان - تحتوي على معلومات العنوان (باستخدام <th> إنشاء العنصر)
  • خلية البيانات - تحتوي على بيانات (باستخدام <td> إنشاء العنصر)

بافتراض الافتراض،<th> النص في العنصر هو غامق ومركز.

بافتراض الافتراض، النص في علامة <td> عادي ومقيد إلى اليسار.

يرجى الرجوع أيضًا إلى:

دليل HTML:جداول HTML

دليل مرجع HTML DOM:مفهوم TableHeader

دليل CSS:تحديد أنماط النموذج

مثال

مثال 1

جدول بسيط يحتوي على ثلاثة أسطر، خلايا عنوان اثنتين وخلايا بيانات أربعة (باستخدام HTML):

<table>
  <tr>
    <th>الشهر</th>
    <th>مدخرات</th>
  </tr>
  <tr>
    <td>январь</td>
    <td>￥3400</td>
  </tr>
  <tr>
    <td>فبراير</td>
    <td>￥4500</td>
  </tr>
</table>

جرب بنفسك

مثال 2

كيفية التوجيه <th> المحتوى (استخدام CSS)؟

<table style="width:100%">
  <tr>
    <th style="text-align:left">الشهر</th>
    <th style="text-align:left">الادخار</th>
  </tr>
  <tr>
    <td>январь</td>
    <td>￥3400</td>
  </tr>
  <tr>
    <td>فبراير</td>
    <td>￥4500</td>
  </tr>
</table>

جرب بنفسك

مثال 3

كيفية إضافة لون الخلفية إلى خلية عنوان الجدول (باستخدام CSS):

<table>
  <tr>
    <th style="background-color:#FF0000">الشهر</th>
    <th style="background-color:#00FF00">الادخار</th>
  </tr>
  <tr>
    <td>январь</td>
    <td>￥3400</td>
  </tr>
 </table>

جرب بنفسك

مثال 4

كيفية تعيين طول خلية عنوان الجدول (باستخدام CSS):

<table>
  <tr>
    <th style="height:100px">الشهر</th>
    <th style="height:100px">مدخرات</th>
  </tr>
  <tr>
    <td>январь</td>
    <td>￥3400</td>
  </tr>
</table>

جرب بنفسك

مثال 5

كيفية تحديد عدم التجزئة في خلية العنوان في جدول (استخدام CSS)؟

<table>
  <tr>
    <th>الشهر</th>
    <th style="white-space:nowrap">المال المودع لشراء السيارة الجديدة</th>
  </tr>
  <tr>
    <td>январь</td>
    <td>￥3400</td>
  </tr>
</table>

جرب بنفسك

مثال 6

كيفية التوازي العمودي <th> المحتوى (استخدام CSS)؟

<table style="width:50%;">
  <tr style="height:100px">
    <th style="vertical-align:bottom">الشهر</th>
    <th style="vertical-align:bottom">مدخرات</th>
  </tr>
  <tr>
    <td>январь</td>
    <td>￥3400</td>
  </tr>
</table>

جرب بنفسك

مثال 7

كيفية ضبط عرض خلية العنوان في جدول (استخدام CSS)؟

<table style="width:100%">
  <tr>
    <th style="width:70%">الشهر</th>
    <th style="width:30%">مدخرات</th>
  </tr>
  <tr>
    <td>январь</td>
    <td>￥3400</td>
  </tr>
</table>

جرب بنفسك

مثال 8

كيفية إنشاء عنوان جدول؟

<table>
  <tr>
    <th>اسم</th>
    <th>بريد إلكتروني</th>
    <th>هاتف</th>
  </tr>
  <tr>
    <td>Bill Gates</td>
    <td>bill.gates@example.com</td>
    <td>138-1234-5678</td>
  </tr>
</table>

جرب بنفسك

مثال 9

كيفية إنشاء جدول يحتوي على عناوين؟

<table>
  <caption>مدخرات الشهرية</caption>
  <tr>
    <th>الشهر</th>
    <th>مدخرات</th>
  </tr>
  <tr>
    <td>январь</td>
    <td>￥3400</td>
  </tr>
  <tr>
    <td>فبراير</td>
    <td>￥4500</td>
  </tr>
</table>

جرب بنفسك

مثال 10

كيفية تعريف خلية جدول تنتقل عبر صف أو عمود متعدد؟

<table>
  <tr>
    <th>اسم</th>
    <th>بريد إلكتروني</th>
    <th colspan="2">هاتف</th>
  </tr>
  <tr>
    <td>Bill Gates</td>
    <td>bill.gates@example.com</td>
    <td>138-1234-5678</td>
    <td>186-2345-6789</td>
  </tr>
</table>

جرب بنفسك

صفة

صفة قيمة وصف
abbr نص يتعين على خلية العنوان أن تكون نسخة مختصرة من محتواها.
colspan رقم يتعين على خلية العنوان أن تنتقل عبر عدد الأطوال في الصف.
headers header_id يتعين على خلية العنوان أن تكون مرتبطة بأحد أو أكثر من خلايا العنوان.
rowspan رقم يتعين على خلية العنوان أن تنتقل عبر عدد الأطوال في الصف.
scope
  • col
  • colgroup
  • row
  • rowgroup
 هل هي خلية رأس عمودية، رأس سطر، أو رأس مجموعة من الأعمدة أو السطور؟

خصائص العالمية

<th> يدعم العنصر خصائص العالمية في HTML.

خصائص الحدث

<th> يدعم العنصر خصائص الحدث في HTML.

إعدادات CSS الافتراضية

سيستخدم معظم المتصفحات القيم التالية كقيم افتراضية <th> العنصر:

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

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

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
الدعم الدعم الدعم الدعم الدعم
  • الصفحة السابقة <tfoot>
  • الصفحة التالية <thead>