برچسب <th> در اچ‌تی‌ام‌ال

از ویکی‌کد، دانشنامهٔ برنامه‌نویسی
< مرجع HTML:تگ‌ها(تغییرمسیر از تگ th)
پرش به ناوبری پرش به جستجو
یک سلول هدر را در یک جدول تعریف می‌کند
معرفی شده در نسخهٔ:۲
حذف شده در نسخهٔ: هنوز در حال استفاده است
ویژگی‌های مجاز:به پائین مراجعه کنید
تنظیمات پیش‌فرض CSS:به پائین مراجعه کنید

{{منو اسکرول چپ|نام منو={{مرجع منو اچ‌تی‌ام‌ال|expanded=مرجع}}}}

مثال

یک جدول اچ‌تی‌ام‌ال ساده با دو سلول سرآمد (header) و دو سلول داده:

<table>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$80</td>
  </tr>
</table>


مثال‌های بیشتری از «مشاهدهٔ نتیجه» در زیر.

تعریف و کاربرد

برچسب <th> یک سلول سرآمد (header) را در یک جدول اچ‌تی‌ام‌ال تعریف می‌کند.[۱]

یک جدول اچ‌تی‌ام‌ال دارای دو نوع سلول است:

  • سلول‌های سرآمد (header) - که حاوی اطلاعات سرآمد هستند (با عنصر <th> ایجاد می‌شوند)
  • سلول‌های استاندارد - که حاوی داده‌ها هستند (با عنصر <td> ایجاد می‌شوند)

متن عنصرهای <th> ضخیم (bold) است و به‌طور پیش‌فرض در مرکز قرار می‌گیرند.

متن موجود در عنصرهای <td> معمولی است و به‌طور پیش‌فرض به چپ تراز می‌شوند.

پشتیبانی مرورگر

عنصر Chrome Internet Explorer / Edge Firefox Safari Opera
<th> بله بله بله بله بله

ویژگی‌ها

ویژگی مقدار شرح
abbr text نسخهٔ مختصرشده از محتوای درون سلول سرآمد را مشخص می‌کند
colspan number تعداد ستون‌هایی را که یک سلول سرآمد باید در طول آن‌ها گسترش یابد مشخص می‌کند
headers header_id یک یا چند سلول سرآمد را مشخص می‌کند که یک سلول با آن‌ها مرتبط است
rowspan number تعداد ردیف‌هایی را که یک سلول سرآمد باید در طول آن‌ها گسترش یابد مشخص می‌کند
scope col

colgroup

row

rowgroup

مشخص می‌کند که یک سلول سرآمد، فقط برای یک ستون و ردیف سرآمد است، یا برای گروهی از ستون‌ها و ردیف‌ها

ویژگی‌های سراسری

همچنین برچسب <th> از ویژگی‌های سراسری (Global Attributes) در اچ‌تی‌ام‌ال پشتیبانی می‌کند.

ویژگی‌های رویداد

همچنین برچسب <th> از ویژگی‌های رویداد (Event Attributes) در اچ‌تی‌ام‌ال پشتیبانی می‌کند.

مثال‌های بیشتر

مثال

چگونه محتوای درون <th> را تراز کنیم (با CSS):

<table style="width:100%">
  <tr>
    <th style="text-align:left">Month</th>
    <th style="text-align:left">Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$80</td>
  </tr>
</table>


مثال

چگونه رنگ پس‌زمینه را به سلول سرآمد جدول اضافه کنیم (با CSS):

<table>
  <tr>
    <th style="background-color:#FF0000">Month</th>
    <th style="background-color:#00FF00">Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
 </table>


مثال

چگونه ارتفاع یک سلول سرآمد از جدول را تنظیم کنیم (با CSS):

<table>
  <tr>
    <th style="height:100px">Month</th>
    <th style="height:100px">Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
</table>


مثال

چگونه عدم خط‌شکنی (no word-wrapping) را در یک سلول سرآمد جدول مشخص کنیم (با CSS):

<table>
  <tr>
    <th>Month</th>
    <th style="white-space:nowrap">My Savings for a new car</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
</table>


مثال

چگونه محتوای درون <th> را بصورت عمودی تراز کنیم (با CSS):

<table style="width:50%;">
  <tr style="height:100px">
    <th style="vertical-align:bottom">Month</th>
    <th style="vertical-align:bottom">Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
</table>


مثال

چگونه پهنای یک سلول سرآمد جدول را تنظیم کنیم (با CSS):

<table style="width:100%">
  <tr>
    <th style="width:70%">Month</th>
    <th style="width:30%">Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
</table>


مثال

چگونه سرآمدهای جدول را ایجاد کنیم:

<table>
  <tr>
    <th>Name</th>
    <th>Email</th>
    <th>Phone</th>
  </tr>
  <tr>
    <td>John Doe</td>
    <td>john.doe@example.com</td>
    <td>123-45-678</td>
  </tr>
</table>


مثال

چگونه یک جدول با عنوان (caption) ایجاد کنیم:

<table>
  <caption>Monthly savings</caption>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$80</td>
  </tr>
</table>


مثال

چگونه سلول‌هایی از یک جدول را تعریف کنیم که به بیش از یک ردیف یا یک ستون گسترش میابند:

<table>
  <tr>
    <th>Name</th>
    <th>Email</th>
    <th colspan="2">Phone</th>
  </tr>
  <tr>
    <td>John Doe</td>
    <td>john.doe@example.com</td>
    <td>123-45-678</td>
    <td>212-00-546</td>
  </tr>
</table>


صفحات مرتبط

آموزش اچ‌تی‌ام‌ال: جدول‌های اچ‌تی‌ام‌ال (HTML Tables)

مرجع DOM اچ‌تی‌ام‌ال: شیء TableHeader (TableHeader Object)

آموزش CSS: سبک‌دهی به جدول‌ها (Styling Tables)

تنظیمات پیش‌فرض CSS

بیشتر مرورگرها عنصر <th> را با مقادیر پیش‌فرض زیر نمایش می‌دهند:

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


منابع آموزشی