تگ های HTML - تگ tfoot

عضویت در سایت

نام کاربری*

ایمیل*

رمزعبور*

تایید رمز عبور*

نام*

نام خانوادگی*

نام نمایشی*

تصویر پروفایل*

مرور

کشور*

شهر*

جنسیت* آقا

خانم

سایر

سن*

قوانین و مقررات* با تیک زدن این گزینه شما قوانین و مقررات را میپذیرید.

عضویت در سایت

رایگان ثبت نام کنید و سوالات خود را بپرسید، همچنین میتوانید در پاسخگویی به سوالات دیگر کاربران نیز سهیم باشید، هر مشکلی در ثبت نام یا ورود داشتید با ایمیل beporsam@gmail.com در ارتباط باشید

تگ های HTML – تگ tfoot

سلام

با معرفی تگ <tfoot> از سری تگ های HTML در خدمتتون هستیم.

نمونه کد تگ <tfoot>

در نمونه کد زیر برای ساخت یک جدول از تگ ها thead, tbody و tfoot که داخل تگ table قرار داده شده است، استفاده کردیم

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

۱۰

۱۱

۱۲

۱۳

۱۴

۱۵

۱۶

۱۷

۱۸

۱۹

۲۰

۲۱

۲۲

۲۳

۲۴

<table>

<thead>

<tr>

<th>Month</th>

<th>Savings</th>

</tr>

</thead>

<tbody>

<tr>

<td>January</td>

</tr>

<tr>

<td>February</td>

</tr>

</tbody>

<tfoot>

<tr>

</tr>

</tfoot>

</table>

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

از تگ <tfoot> برای ایجاد فوتر(پایین ترین قسمت) در جدول استفاده میشود.

تگ <tfoot> باید دارای یک یا بیشتر تگ <tr> داخل خود داشته باشد.

مطلب پیشنهادی: سورس کد بازی دوز جاوا اسکریپت

برای استفاده از این تگ نمی توانیم آن را به تنهاتیی استفاده کنیم؛ برای استفاده از تگ tfoot> نیاز به استفاده از تگ های <table>(برای ساخت جدول)، <tbody>(که بدنه اصلی جدول می باشد) و تگ <thead>(که برای هدر استفاده میشود) داریم.

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

تگ <tfoot> داخل تگ <table> قرار می گیرد پس از عناصر <caption> ، <colgroup> و عنصر <thead> و قبل از عناصر <tbody> و <tr> می آید.

نکته: عناصر <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>

۱۰

۱۱

۱۲

۱۳

۱۴

۱۵

۱۶

۱۷

۱۸

۱۹

۲۰

۲۱

۲۲

۲۳

۲۴

۲۵

۲۶

۲۷

۲۸

۲۹

۳۰

۳۱

۳۲

۳۳

۳۴

۳۵

۳۶

۳۷

۳۸

<html>

<head>

<style>

thead {color: green;}

tbody {color: blue;}

tfoot {color: red;}

table, th, td {

border: ۱px solid black;

}

</style>

</head>

<body>

<table>

<thead>

<tr>

<th>Month</th>

<th>Savings</th>

</tr>

</thead>

<tbody>

<tr>

<td>January</td>

</tr>

<tr>

<td>February</td>

</tr>

</tbody>

<tfoot>

<tr>

</tr>

</tfoot>

</table>

مطلب پیشنهادی: آموزش اوبونتو - قسمت چهاردهم(دستورات اطلاعات سیستم)

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

عنصر
tfoot	بله	بله	بله	بله	بله

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

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

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

tfoot {

display: table-footer-group;

vertical-align: middle;

border-color: inherit;

}

معرفی این تگ نیز به پایان رسید.

موفق باشید.