آموزش تگ tfoot در HTML

دوست من سلام امیدوارم حالتون عالی و پر از انرژی باشید. توی این بخش از آموزش html css قراره که با نحوه ی قرار دادن و آموزش تگ tfoot در HTML به صورت کامل آشنا بشید.

تگ tfoot در HTML

تگ tfoot که از کلمه ترکیبی Table Footer بر گرفته شده است ، تگی است که در داخل تگ Table قرار میگیرد و با استفاده از آن میتوان فوتر ( پایینی ترین قسمت یک جدول ) را تعریف و یا ایجاد کرد.

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

ما تگ هایی به نام های Tbody و Thead را هم داریم این دو تگ علاوه بر تگ Tfoot هستند، که تگ Tbody برای ایجاد کردن بدنه اصلی جدول ( بصورت ثابت ) و تگ Thead نیز برای تعریف هدر ( بصورت ثابت ) بکار می رود.

طریقه قرار گیری تگ <tfoot>

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

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

عناصر <thead> ،<tbody> و <tfoot> به طور پیش فرض بر روی طرح جدول اثر گذار نیست.

مثال از تگ tfoot در HTML

در ادامه آموزش html و css میتوانید یک مثال از این تگ را مشاهده نمایید.

<tfoot>
 <tr>
  <td colspan="2">مجموع کالا : 4</td>
  <td>مجموع : 530,000 هزارتومان</td>
 </tr>
</tfoot>

راستی اگر دنبال آموزش html css پروژه محور هستید می توانید از دوره ی آموزش وردپرس پوش استفاده کنید. جهت مشاهده ی 28 ساعت ویدیو آموزشی با پشتیبانی مادام العمر روی این لینک کلیک کنید.

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

در جدولی که در پایین مشاهده می کنید به این نتیجه می رسید که آیا مرورگرهای اینترنتی از تگ tfoot در HTML پشتیبانی میکنند یا خیر.

پشتیبانی از صفات و رویدادهای عمومی

تگ tfoot از صفات عمومی و رویدادهای عمومی در HTML پشتیبانی می کند.

دستورات CSS پیش فرض

در اکثر مواقع مرورگرها تگ tfoot را بصورت پیش فرض با دستورات CSS زیر نمایش می دهند.

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

شما میتوانید با دوره ی آموزشی html css در این موارد بسیار مهارت پیدا کنید.