برچسب <tfoot> HTML

تعریف و استفاده

<tfoot> برچسب برای گروه‌بندی محتوای پایش در جدول HTML استفاده می‌شود.

<tfoot> عناصر با <thead> و <tbody> عناصر با هم ترکیب می‌شوند تا هر بخش جدول (پایش، سربرگ، متن) مشخص شود.

با استفاده از این عناصر، مرورگر می‌تواند هنگام حرکت در متن جدول، سربرگ و پایش مستقل نمایش دهد. علاوه بر این، هنگام چاپ جدول‌های بزرگ چند صفحه‌ای، این عناصر می‌توانند سربرگ و پایش جدول را در بالای هر صفحه چاپ کنند.

توجه: عناصر <tfoot> باید شامل یک یا چند <tr> برچسب.

<tfoot> برچسب باید در محیط زیر استفاده شود: به عنوان <table> عناصر فرزند، در هر <caption>و<colgroup>و<thead> و <tbody> عناصر بعد از

توجه:به صورت پیش‌فرض، <thead>، <tbody> و <tfoot> عناصر تأثیری بر چیدمان جدول ندارند. اما می‌توانید از CSS برای تنظیم استایل این عناصر استفاده کنید (لطفاً مثال‌های زیر را مشاهده کنید)!

مثال

مثال 1

HTML جدول شامل <thead>، <tbody> و <tfoot>:

<table>
  <thead>
    <tr>
      <th>ماه</th>
      <th> پس‌انداز</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>一月</td>
      <td>￥3400</td>
    </tr>
    <tr>
      <td>فوریه</td>
      <td>￥4500</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>جمع</td>
      <td>￥7900</td>
    </tr>
  </tfoot>
</table>

آزمایش کنید

مثال 2

استفاده از CSS برای تنظیم استایل <thead>، <tbody> و <tfoot>:

<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>ماه</th>
      <th> پس‌انداز</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>一月</td>
      <td>￥3400</td>
    </tr>
    <tr>
      <td>فوریه</td>
      <td>￥4500</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>جمع</td>
      <td>￥7900</td>
    </tr>
  </tfoot>
</table>

آزمایش کنید

مثال 3

چگونه تنظیم شود <tfoot> محتوای

<table style="width:100%">
  <tr>
    <th>ماه</th>
    <th> پس‌انداز</th>
  </tr>
  <tr>
    <td>一月</td>
    <td>￥3400</td>
  </tr>
  <tr>
    <td>فوریه</td>
    <td>￥4500</td>
  </tr>
  <tfoot style="text-align:center">
    <tr>
      <td>جمع</td>
      <td>￥7900</td>
    </tr>
  </tfoot>
</table>

آزمایش کنید

مثال 4

چگونه عمودی تنظیم شود <tfoot> محتوای

<table style="width:100%">
  <tr>
    <th>ماه</th>
    <th> پس‌انداز</th>
  </tr>
  <tr>
    <td>一月</td>
    <td>￥3400</td>
  </tr>
  <tr>
    <td>فوریه</td>
    <td>￥4500</td>
  </tr>
  <tfoot style="vertical-align:bottom">
    <tr style="height:100px">
      <td>جمع</td>
      <td>￥7900</td>
    </tr>
  </tfoot>
</table>

آزمایش کنید

ویژگی‌های جهانی

<tfoot> این برچسب‌ها همچنین از ویژگی‌های رویداد پشتیبانی می‌کنند ویژگی‌های جهانی در HTML.

ویژگی‌های رویداد

<tfoot> این برچسب‌ها همچنین از ویژگی‌های رویداد پشتیبانی می‌کنند ویژگی‌های رویداد در HTML.

تنظیمات پیش‌فرض CSS

بیشتر مرورگرها از مقادیر پیش‌فرض زیر برای نمایش استفاده می‌کنند <tfoot> عنصر:

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

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

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
پشتیبانی پشتیبانی پشتیبانی پشتیبانی پشتیبانی