‎‎تگ سلول هدر جدولHTML <th> Tag -‎

Previous >    <Next  

‎‎مثال ـ جدول سادهHTML با سه سطر ،دو سلول هدر وچهارسلول داده

‎ 
<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>

--(go to editor for change code and run)

‎‎تعريف وكاربردDefinition and Usage -‎

‎‎تگ‎<th>‎ سلول هدر جدول را تعريف ميكند .

‎‎يگ جدول داراي دونوع سلول ميباشد:

‎‎با پيش فرض متن در عنصر سلول هدر بصورت پررنگ‎"bold‎"‎و در وسط سلول قرار ميگيرد .ترازcenter

‎‎بصورت پيش فرض متن در سلول داده بصورت عادي و تراز سمت چپ ميباشد.

‎‎پشتيباني مرورگرBrowser Support -‎

‎
‎Element‎ Chorome Edge Firefox Safari Opera
‎‎<th>‎‎ ‎Yes‎ ‎Yes‎ ‎Yes‎ ‎Yes‎ ‎Yes‎

‎‎ويژگي هاAttributes -‎

‎
‎‎ويژگي ‎‎مقدار ‎‎شــرح
‎abbr‎ ‎text‎‎ ‎‎نسخه خلاصه مطالب هدر را مشخص ميكند.
‎colspan‎ ‎number‎‎ ‎‎تعداد سلول هدر مرتبط براي يكي شدن
‎headers‎ ‎header_id‎‎ ‎‎مشخص ميكندكه چه سلوهاي داده به چه سلولهاي هدر مرتبط ميباشند.
‎rowspan‎ ‎number‎‎ ‎‎تعداد سطر سلول هدر براي يكي شدن
‎scope‎ ‎col
colgroup
row
rowgroup‎‎ 		‎‎.‎نوع سلول هدر را مشخص ميكند.

‎‎ويژگي هاي جهانيGlobal Attributes -‎

‎‎تگ‎<th>‎ از ويژگي هاي جهانيHTML پيروي ميكند.

‎‎ويژگي هاي رويدادي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>

--(go to editor for change code and run)

‎‎مثال ـ تنظيم رنگ زمينه سلول هدر

‎ 
 <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>

--(go to editor for change code and run)

‎‎مثال ـ تنظيم ارتفاع سلول هدر با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>

--(go to editor for change code and run)

‎‎مثال ـ تنظيم هدر بدون شكستگي وتك خطي

‎ 
<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>

--(go to editor for change code and run)

‎‎مثال ـ تنظيم تراز عمودي سلول هدر

‎ 
<table style="width:50%;">
  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>

--(go to editor for change code and run)

‎‎مثال ـ تنظيم عرض سلول هدر جدول با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>

--(go to editor for change code and run)

‎‎مثال ـ ايجاد هدر در جدول

‎ 
<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>

--(go to editor for change code and run)

‎‎مثال ـ ايجاد يك جدول با عنوان جدول

‎ 
 <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>

--(go to editor for change code and run)

‎‎مثال ـ ايجاد جدول با تجميع ستونها وسطرها

‎ 
<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>

--(go to editor for change code and run)

‎‎تنظيمات پيش فرضDefault CSS Settings -‎

‎‎اغلب مرورگرها نمايش عنصر‎<th>‎ مطابق تنظيمات پيش فرضي زيرانجام ميدهند.

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

‎مرجع كامل تگهايHTML‎
‎مرجع كامل ويژگيهايHTML‎

Previous >    <Next