‎‎تگ فوترجدولHTML <tfoot> Tag -‎

Previous >    <Next  

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

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

‎‎تگ‎<tfoot>‎ براي گروه بندي محتويات پاورقي استفاده ميشود.

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

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

‎

‎نكته ـ عنصر‎<tfoot>‎ بايديك يا ياچند عنصر‎<tr>‎ را در داخل خود ‎داشته باشد.

‎تگ‎<tfoot>‎ بعنوان تگ فرزند‎<table>‎ پس از تمام عناصر ‎<caption> , <colgroup> , <theah>‎‎بايد استفاده شود .

‎

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

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

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

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

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

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

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

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

‎‎مثال ـ استايل نمودن‎<thead> , <tbody> , <tfoot>‎ با 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)

‎‎مثال ـ تراز فوتر باCSS

‎ 
 <table style="width:100%">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$80</td>
  </tr>
  <tfoot style="text-align:center">
    <tr>
      <td>Sum</td>
      <td>$180</td>
    </tr>
  </tfoot>
</table>

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

‎‎مثال ـ تراز عمودي فوتر باCSS

‎ 
<table style="width:100%">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$80</td>
  </tr>
  <tfoot style="vertical-align:bottom">
    style="height:100px">
      <td>Sum</td>
      <td>$180</td>
    </tr>
  </tfoot>
</table>

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

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

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

‎ 
tfoot {
  display: table-footer-group;
  vertical-align: middle;
  border-color: inherit;
}

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

Previous >    <Next