تگ های 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>

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

از تگ <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>

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

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

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

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

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

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

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

موفق باشید.