برچسب <th> HTML

تعریف و استفاده

<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
پشتیبانی پشتیبانی پشتیبانی پشتیبانی پشتیبانی