معرفی و کاربرد تگ tfoot در HTML
معرفی و کاربرد تگ tfoot در HTML محتوای پایانی جدول
در این مقاله از سایت آموزی جهت استفاده شما همراهان گرامی به معرفی و کاربرد تگ <tfoot> در HTML می پردازیم.
تگ <tfoot> در HTML
تعریف و کاربرد تگ tfoot در HTML
تگ <tfoot> برای گروه محتوای پایانی یک جدول HTML استفاده می شود. تگ <tfoot> همراه با تگ thead ( عناوین ستونها (header)) و تگ tbody (بدنه اصلی(body))برای مشخص کردن هر قسمت از جدول استفاده می شوند.
مرورگرهای وب می توانند از این عناصر برای فعال کردن پیمایش بدنه جدول مستقل از سربرگ و پاورقی استفاده کنند. همچنین هنگام print گرفتن از جدول های بزرگ که معمولا چند صفحه ای می باشند این عناصر قادر هستند که header و footer جداول را در بالا و پایین همه صفحات چاپی تکرار کنند.
طریقه قرار گیری تگ <tfoot> :
تگ <tfoot> داخل تگ table قرار می گیرد پس از تگ caption و تگ colgroup و عنصر <thead> و قبل از عناصر <tbody> و <tr> می آید. تگ <tfoot> باید حداقل یک تگ tr درون خود داشته باشد. عناصر <thead> ،<tbody> و <tfoot> به طور پیش فرض بر روی طرح جدول تاثیر نمی گذارند. با این حال، شما می توانید برای استایل دادن به این عناصر از CSS استفاده کنید.
مثال در مورد تگ <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>
خروجی کد در مرورگر اینترنتی
Month | Savings |
---|---|
January | $100 |
February | $80 |
Sum | $180 |
بررسی تگ <tfoot> در HTML 4.01 و HTML5
هیچکدام از خصوصیت های ویژه تگ <tfoot> در HTML5 پشتیبانی نمی شود.
برای کسب اطلاعات بیشتر در مورد طراحی وب حتما به صفحه آموزش طراحی سایت سر بزنید.
خصوصیات ویژه تگ <tfoot> در اچ تی ام ال
خصوصیت | مقدار | توضیحات |
---|---|---|
autofocus | autofocus | این خصوصیت باعث می شود که بعد از لود شدن صفحه، مکان نما بصورت پیشفرض روی آن فیلد قرار گیرد. |
cols | number | پهنا را برای text area مشخص می کند. |
disabled | disabled | مشخص می کند که text area باید به صورت غیر فعال باشد. |
form | form_id | این خصوصیت فرم یا فرم هایی که فیلد مورد نظر به آن ها تعلق دارد را مشخص می کند. |
maxlength | number | تعداد maximum کاراکتری که عنصر text area در خود جای می دهد. |
name | text | یک name برای text area مشخص می کند. |
placeholder | text | یک عبارت را به صورت کم رنگ در داخل فیلد ورودی می نویسد که با فوکوس روی آن فیلد از بین می رود و فیلد خالی می شود. |
readonly | readonly | مشخص می کند که text area فقط خواندنی است. |
required | required | مشخص می کند که پر کردن text area قبل از ارسال فرم باید انجام شود. |
rows | number | تعداد سطرهای قابل مشاهده در text area را مشخص می کند. |
wrap | hard soft |
Specifies how the text in a text area is to be wrapped when submitinted a form |
ویژگی های عمومی تگ <tfoot> در HTML
تگ <tfoot> از کلیه ویژگی های عمومی در سند HTML پشتیبانی می کند.
رویدادهای عمومی تگ <tfoot> در HTML
تگ <tfoot> از کلیه رویدادهای عمومی در سند HTML پشتیبانی می کند.
برای متخصص شدن در طراحی سایت فروشگاهی با وردپرس روی لینک زیر کلیک کن و تو دوره ثبت نام کن:
دوره فوق حرفه ای آموزش طراحی سایت فروشگاهی با وردپرس پروژه محور
برای متخصص شدن در طراحی بخش Front End سایت روی لینک زیر کلیک کن و تو دوره ثبت نام کن:
دوره فوق حرفه ای آموزش طراحی وب با HTML5 و CSS3 و jQuery
برای متخصص شدن در بهینه سازی و سئوی سایت روی لینک زیر کلیک کن و تو دوره ثبت نام کن:
دوره آموزش سئو محتوا کاملا حرفه ای براساس آخرین آپدیت های گوگل
پشتیبانی مرورگرها از تگ <tfoot> در HTML
تگ <tfoot> در همه مرورگرهای معتبر اینترنتی نظیر اینترنت اکسپلورر ، فایرفاکس ، اپرا ، گوگل کروم و سافاری پشتیبانی می شود.
پیوندهای مهم و کاربردی
تگ های HTML در سایت آموزی | تگ های جدید HTML5 در سایت آموزی | صفات تگ های HTML در سایت آموزی | تگ های منسوخ شده HTML5 در سایت آموزی | تگ های block level و inline level در سایت آموزی | تگ های HTML در W3school | ویژگی های CSS در سایت آموزی | ویژگی های CSS در W3schools
معرفی و کاربرد تگ tfoot در HTML محتوای پایانی جدول – اختصاصی سایت آموزی
درباره سایت آموزی
علیرضا ابراهیمی - بنیانگذار وبسایت آموزشی سایت آموزی ، 8 سال سابقه فعالیت حرفه ای در زمینه طراحی سایت ، سئو ، سابقه تدریس اغلب زبان های برنامه نویسی تحت وب ، محقق و تحلیلگر ساختارهای توسعه دهنده وب
نوشته های بیشتر از سایت آموزی
دیدگاهتان را بنویسید