تگ th در HTML

با تگ th در HTML در این مقاله آشنا می شوید.

نکات اصلی تگ th

• سلول های سربرگ جدول با استفاده از تگ های th در HTML تعریف می شوند.
• محتوای متن آن ها به صورت پیش فرض پررنگ و مرکز است.
• عنصر <th> معمولاً فرزند عنصر <tr> است.
• بیشتر ویژگی های خاص تگ در HTML5 منسوخ می شوند. بهتر است از ویژگی های CSS برای یک ظاهر طراحی استفاده کنید.

تعریف Headers cells

جداول HTML دارای دو نوع سلول هستند: هدر و استاندارد. محتوای سلول جدول می تواند چندین ستون یا ردیف را دربر بگیرد.

تگ های th یک سلول هدر را در یک جدول تعریف می کنند:

<table>
  <tr>
    <th>Fruits</th>
    <th>Prices</th>
  </tr>
  <tr>
    <td>Apple</td>
    <td>$1.26</td>
  </tr>
  <tr>
    <td>Banana</td>
    <td>$0.60</td>
  </tr>
</table>

برای تعریف سلول های استاندارد ، از تگ <td> استفاده کنید. محتوای آن ها به صورت متن عادی نمایش داده می شود.

خصوصیات تگ th در HTML

abbr شرح مختصر مختصری از محتوای سلول را تعریف می کند:

<table>
  <tr>
    <th abbr="fruits">List of Fruits</th>
    <th abbr="prices">Price per Unit of Fruit</th>
  </tr>
  <tr>
    <td>Apple</td>
    <td>€0.60</td>
  </tr>
  <tr>
    <td>Banana</td>
    <td>€0.32</td>
  </tr>
</table>

colspan تعداد ستونهایی را تنظیم می کند که عنصر <th> باید دهانه داشته باشد:

<table>
  <tr>
    <th colspan="2">List of Fruit Prices</th>
  </tr>
  <tr>
    <td>Apple</td>
    <td>€0.60</td>
  </tr>
  <tr>
    <td>Banana</td>
    <td>€0.32</td>
  </tr>
</table>

headers یک شناسه سلول هدر را تعریف می کند ، که یک سلول هدر خاص مربوط به آن است:

<table>
  <tr>
    <th id="name" colspan="2">List of Fruit Prices</th>
  </tr>
  <tr>
    <th headers="name">Fruit</th>
    <th headers="name">Price</th>
  </tr>
</table>

rowspan تعداد ردیف هایی را تنظیم می کند که عنصر <th> باید دهانه داشته باشد:

<table>
  <tr>
    <th>Fruits</th>
    <th>Prices</th>
    <th rowspan="3">Month of June 2017</th>
  </tr>
  <tr>
    <td>Apple</td>
    <td>€0.6</td>
  </tr>
  <tr>
    <td>Banana</td>
    <td>€0.32</td>
  </tr>
</table>

دامنه تعریف می کند که آیا یک سلول سرآیند یک عنوان برای یک ستون ، سطر یا یک گروه از ستون ها یا ردیف ها است:

<table>
  <tr>
    <th scope="col">Fruits</th>
    <th scope="col">Prices</th>
  </tr>
  <tr>
    <td>Apple</td>
    <td>€0.6</td>
  </tr>
  <tr>
    <td>Banana</td>
    <td>€0.32</td>
  </tr>
</table>

ویژگی های منسوخ شده

همچنین ویژگی های زیادی وجود دارد که مخصوص HTML تگ بودند ، اما در HTML5 حذف شده اند.

تراز بندی افقی محتوای سلول th را تراز کنید:

<table width="100%">
  <tr>
    <th align="left">List of Fruits</th>
    <th align="right">Price per Unit of Fruit</th>
  </tr>
  <tr>
    <td>Apple</td>
    <td>€0.60</td>
  </tr>
  <tr>
    <td>Banana</td>
    <td>€0.32</td>
  </tr>
</table>

توجه: به جای تراز کردن ، از ویژگی CSS-align استفاده کنید.

axis دسته ای را برای گروه بندی سلول های هدر تعریف کرد:

<table>
  <tr>
    <th axis="name">Fruits</th>
    <th axis="price">Prices</th>
  </tr>
  <tr>
    <td>Apple</td>
    <td>€0.60</td>
  </tr>
  <tr>
    <td>Banana</td>
    <td>€0.32</td>
  </tr>
</table>

bgcolor رنگ زمینه را برای یک سلول هدر تنظیم کنید:

<table>
  <tr>
    <th bgcolor="yellow">Fruits</th>
    <th bgcolor="#00FF00">Prices</th>
  </tr>
  <tr>
    <td>Apple</td>
    <td>€0.60</td>
  </tr>
  <tr>
    <td>Banana</td>
    <td>€0.32</td>
  </tr>
</table>

توجه: به جای bgcolor از ویژگی CSS-background background استفاده کنید.

char تراز بندی محتوای سلول th را با توجه به کاراکتر مشخص شده تنظیم می کند:

<table>
  <tr>
    <th>Fruits</th>
    <th align="char" char=".">Prices €0.00</th>
  </tr>
  <tr>
    <td>Apple</td>
    <td>€0.60</td>
  </tr>
  <tr>
    <td>Banana</td>
    <td>€0.32</td>
  </tr>
</table>

charoff تعداد کاراکترها را برای همترازی محتوا پس از کاراکتر مشخص شده توسط صفت char تنظیم می کند:

<table>
  <tr>
    <th>Fruits</th>
    <th align="char" char="." charoff="2">Prices €0.00</th>
  </tr>
  <tr>
    <td>Apple</td>
    <td>€0.60</td>
  </tr>
  <tr>
    <td>Banana</td>
    <td>€0.32</td>
  </tr>
</table>

تنظیم ارتفاع در height cells:

<table>
  <tr>
    <th height="50px" colspan="2">List of Fruit Prices</th>
  </tr>
  <tr>
    <td>Apple</td>
    <td>€0.60</td>
  </tr>
  <tr>
    <td>Banana</td>
    <td>€0.32</td>
  </tr>
</table>

توجه: به جای ارتفاع ، از ویژگی CSS height استفاده کنید.

nowrap تعریف کرده است که محتوای داخل سلول هدر نباید بسته بندی شود:

<table>
  <tr>
    <th nowrap colspan="2">Prices per Unit of Fruit</th>
  </tr>
  <tr>
    <td>Apple</td>
    <td>€0.60</td>
  </tr>
  <tr>
    <td>Banana</td>
    <td>€0.32</td>
  </tr>
</table>

توجه: به جای nowrap ، از ویژگی CSS white space استفاده کنید.

ترازبندی عمودی محتوای سلول th مشخص شده برای valign:

<table>
  <tr>
    <th>Fruits</th>
    <th>Prices</th>
    <th rowspan="3" valign="top">Month of June 2017</th>
  </tr>
  <tr>
    <td>Apple</td>
    <td>€0.60</td>
  </tr>
  <tr>
    <td>Banana</td>
    <td>€0.32</td>
  </tr>
</table>

توجه: به جای valign از ویژگی CSS vertical-align استفاده کنید.

width عرض سلول th را تنظیم کنید:

<table>
  <tr>
    <th width="50%">Fruits</th>
    <th width="100px">Prices</th>
  </tr>
  <tr>
    <td>Apple</td>
    <td>€0.60</td>
  </tr>
  <tr>
    <td>Banana</td>
    <td>€0.32</td>
  </tr>
</table>

توجه: به جای عرض ، از ویژگی CSS width استفاده کنید.

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

این تگ در مرورگرهای : IE، safari ، firefox، cherom، opera  و Edge پشتیبانی می شود.

در دوره آموزش HTML و CSS بین المللی آکادمی دویکس به صورت رایگان ثبت نام کنید.