برچسب <tfoot> در اچ‌تی‌ام‌ال

از ویکی‌کد، دانشنامهٔ برنامه‌نویسی
پرش به ناوبری پرش به جستجو
محتوای پاورقی را در یک جدول قرار می‌دهد
معرفی شده در نسخهٔ:۲
حذف شده در نسخهٔ: هنوز در حال استفاده است
ویژگی‌های مجاز:به پائین مراجعه کنید
تنظیمات پیش‌فرض CSS:به پائین مراجعه کنید

{{منو اسکرول چپ|نام منو={{مرجع منو اچ‌تی‌ام‌ال|expanded=مرجع}}}}

مثال

یک جدول اچ‌تی‌ام‌ال با یک عنصر <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>


مثال‌های بیشتری از «مشاهدهٔ نتیجه» در زیر.

تعریف و کاربرد

برچسب <tfoot> برای گروه‌بندی محتوای زیرآمد (footer) در یک جدول اچ‌تی‌ام‌ال استفاده می‌شود.[۱]

عنصر <tfoot> در رابطه با عنصرهای <thead> و <tbody> استفاده می‌شود تا هر بخش از جدول را مشخص کنند (زیرآمد، سرآمد (header)، بدنه (body)).

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

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

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

عنصر Chrome Internet Explorer / Edge Firefox Safari Opera
<tfoot> بله بله بله بله بله

نکات و ملاحظات

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

نکته: عنصرهای <thead>، <tbody> و <tfoot> به شکل پیش‌فرض طرح‌بندی جدول را تغییر نمی‌دهند. هرچند، شما می‌توانید از CSS برای سبک‌دهی به این عناصر استفاده کنید.

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

همچنین برچسب <tfoot> از ویژگی‌های سراسری (Global Attributes) در اچ‌تی‌ام‌ال پشتیبانی می‌کند.

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

همچنین برچسب <tfoot> از ویژگی‌های رویداد (Event Attributes) در اچ‌تی‌ام‌ال پشتیبانی می‌کند.

مثال‌های بیشتر

مثال

محتوای درون <tfoot> را چگونه تراز کنیم (با 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>


مثال

محتوای درون <tfoot> را چگونه به‌صورت عمودی تراز کنیم (با 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">
    <tr style="height:100px">
      <td>Sum</td>
      <td>$180</td>
    </tr>
  </tfoot>
</table>


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

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

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


منابع آموزشی