HTML <tfoot> تگ

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

<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> مطالب (استفاده از CSS):

<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> مطالب (استفاده از CSS):

<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: گروه پایین جدول;
  vertical-align: وسط;
  border-color: از میراث می‌گیرد;
}

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

کروم آیز افراط سافاری اپرا
کروم آیز افراط سافاری اپرا
پشتیبانی پشتیبانی پشتیبانی پشتیبانی پشتیبانی