‎‎تگ هد جدولHTML <thead> Tag -‎

Previous >    <Next  

‎‎مثال ـ يك جدولHTML با عناصر ‎<thead> , <tbody> ,<tfoot>‎

‎ 
<table>
  <thead>
    <tr>
      <th>Month</th>
      <th>Savings</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>January</td>
      <td>$100</td>
    </tr>
    <tr>
      <td>February</td>
      <td>$80</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Sum</td>
      <td>$180</td>
    </tr>
  </tfoot>
</table>

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

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

‎‎تگ‎<thead>‎ براي معرفي محتوي هدر جدول HTML استفاده ميشود .

‎عنصر‎<thead>‎ همراه عناصر ‎<tbody> , <tfoot>‎ براي مشخص ‎نمودن قسمتهائي ازجدول) ‎هدر، بدنه، فوت ياپاورقي( ‎استفاده ميشوند.

‎مرورگرها ميتوانند ازاين عناصر براي فعال كردن پيمايش بدنه جدول، مستقل ازهدر وفوتر استفاده ‎،كنند .همچنين هنگام چاپ يك جدول بزرگ كه چندين صفحه را شامل ميشود، اين عناصر در جاي خود ‎يعني سرصفحه وپائين صفحه چاپ ميشوند.

‎

‎‎نكته ـ عنصر‎<thead>‎ بايد شامل يك يا چند تگ ‎<tr>‎ باشد .

‎نكته ـ تگ‎<thead>‎ بعنوان تگ فرزند ‎<table>‎ بعداز هر عنصر ‎<caption> ,<colgroup>‎‎وقبل ازهرعنصر‎<tbody> , <tfoot>, <tr>‎

‎نكته ـ عناصر‎<thead>‎ ،‎<tbody>‎ و‎<tfoot>‎ بصورت ‎پيش فرض تاثيري در طربندي جدول ندارند، اما ميتوان با استفاده ازCSS تاثير گذاست . بمثال ‎توجه فرمائيد.

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

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

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

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

‎‎ويژگي هاي رويداديEvent Attributes -‎

‎‎تگ فوق همچنين از ويژگي هاي رويدادي پيروي ميكند.

‎‎مثالهاي بيشتر

‎‎مثال ـ استايل هد، بدنه وفوترباCSS

‎ 
 <html>
<head>
<style>thead {color: green;}
tbody {color: blue;}
tfoot {color: red;}

table, th, td {
  border: 1px solid black;
}
</style></head>
<body>

<table>
  <thead>
    <tr>
      <th>Month</th>
      <th>Savings</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>January</td>
      <td>$100</td>
    </tr>
    <tr>
      <td>February</td>
      <td>$80</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Sum</td>
      <td>$180</td>
    </tr>
  </tfoot>
</table>

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

‎‎مثال ـ تراز عناصر داخلي‎<thead>‎ در جدول با CSS

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

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

‎‎مثال ـ تراز عمودي عناصر‎<thead>‎ با CSS

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

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

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

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

‎ 
thead {
  display: table-header-group;
  vertical-align: middle;
  border-color: inherit;
}

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

Previous >    <Next