آموزش اچ تی ام ال HTML

المان th برای تعریف سلولهایی که بعنوان هدر گروهی از سلولهای جدول میباشند استفاده میشود. این المان با اتریبیوت های scope و headers دقیق تر تعریف میشود.

اتریبیوت ها

این المان از اتریبیوت های جهانی استفاده میکنند.

abbr

اگر بخواهیم در متن یا context دیگری به سلول هدر اشاره کنیم از این اتریبیوت استفاده میکنیم. این اتریبیوت مانند لیبل برای سلول هدر است.

colspan

مقدار این اتریبیوت اعداد مثبت است و نشان میدهد که یک سلول چقدر باید ادامه پیدا کند. مقدار پیشفرض آن 1 است. حداکثر مقدار آن 1000 است و مقادیر بالاتر از این عدد اشتباه درنظر گرفته میشود و 1 درنظر گرفته میشود.

headers

این اتریبیوت شامل استرینگ هایی است که با space از هم جدا شده اند. هرکدام از آنها متناظر با اتریبیوت id المان th هستند. به عبارت دیگر، اتریبیوت headers مشخص میکند که سلول هدر به کدام المان th مرتبط است.

rowspan

مقدار این اتریبیوت اعداد مثبت است و نشان میدهد که یک ردیف چقدر باید ادامه پیدا کند. اگر مقدار آن 0 باشد ردیف تا انتهای بخش جدول (thead, tbody, tfoot) ادامه پیدا میکند. حداکثر مقدار آن 65534 است و مقادیر بالاتر از این عدد 65534 درنظر گرفته میشود.

scope

این اتریبیوت مشخص میکند که سلول های هدر به کدام سلول ها مرتبط است. این اتریبیوت مقادیر زیر را دارد:

row: سلول هدر به همه سلولهای ردیف خود ارتباط دارد.

col: سلول هدر به همه سلول های ستون خود ارتباط دارد.

rowgroup: سلول هدر به گروهی از ردیف ها و سلول های درون آن ردیف ها مرتبط است. این سلول ها میتوانند سمت راست یا چپ هدر باشند. این بستگی به اتریبیوت dir در المان table بستگی دارد.

colgroup: سلول هدر به گروهی از ستون ها و سلول های درون آن ستون ها مرتبط است.

auto: مقدار پیشفرض برای زمانی که این اتریبیوت تعریف نشده است.

مثال

برای مشاهده مثال های مربوط به اتریبیوت های colspan و rowspan به بخش مربوط به تگ td مراجعه کنید.

مطالعه بیشتر: تگ td | آموزش زبان HTML

 
<table>
  <tr>
    <th abbr="Make">Toy manufacturer</th>
    <th abbr="Model">Vehicle model</th>
  </tr>
  <tr>
    <td>Bruder Toys</td>
    <td>Cross Country Vehicle</td>
  </tr>
  <tr>
    <td>Bruder Toys</td>
    <td>DHL Lorry</td>
  </tr>
</table>
 

در مثال بابا اتریبیوت abbr برای نشان دادن نسخه کوتاه تر محتوا در سلول هدر استفاده شده است.

 
<table>
  <tr>
    <th id="name" colspan="2">Name</th>
  </tr>
  <tr>
    <th headers="name">Firstname</th>
    <th headers="name">Lastname</th>
  </tr>
<table>
 

در مثال بالا اتریبیوت headers مشخص میکند که سلول های هدر به کدام تگ th مرتبط است.

 
<table>
  <caption>
    Poster availability
  </caption>
  <tr>
    <th scope="col">Poster name</th>
    <th scope="col">Color</th>
    <th colspan="3" scope="colgroup">Zodiac</th>
  </tr>
  <tr>
    <th rowspan="3" scope="rowgroup">Zodiac</th>
    <td>Full color</td>
    <td>A2</td>
    <td>A3</td>
    <td>A4</td>
  </tr>
  <tr>
    <td>Black and white</td>
    <td>A1</td>
    <td>A2</td>
    <td>A3</td>
  </tr>
  <tr>
    <td>Sepia</td>
    <td>A3</td>
    <td>A4</td>
    <td>A5</td>
  </tr>
  <tr>
    <th rowspan="2" scope="rowgroup">Angels</th>
    <td>Black and white</td>
    <td>A1</td>
    <td>A3</td>
    <td>A4</td>
  </tr>
  <tr>
    <td>Sepia</td>
    <td>A2</td>
    <td>A3</td>
    <td>A5</td>
  </tr>
</table>
 

در مثال بالا، برخی از ردیف های سلول های هدر دو یا چند ردیف از سلول های جدول را پوشش میدهند و یکی از ستون ها سه ستون جدول را پوشش میدهد.