پاورقی جدول (tfoot)
پاورقی جدول (Table Footer) با تگ tfoot بخش جمع بندی جدول است. معمولاً جمع کل یا توضیح پایانی را نشان می دهد. مثل ردیف «جمع نمره ها» در کارنامه.
پاورقی جدول (tfoot) کجا می آید؟
داخل جدول می آید و باید شامل یک یا چند ردیف tr باشد. همچنین، کنار سرصفحه thead و بدنه tbody استفاده می شود تا بخش ها جدا شوند. این جداسازی برای چاپ و اسکرول مستقل مفید است.
مثال 1: 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>
مثال 2: استایل دهی ساده با CSS
<style>
thead {
color: green;
}
tbody {
color: blue;
}
tfoot {
color: red;
}
table,
th,
td {
border: 1px solid black;
}
<\/style>
مثال 3: تراز افقی در tfoot
<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>
مثال 4: تراز عمودی در tfoot
<table style="width:100%;">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr style="height:100px">
<td>January</td>
<td>$100</td>
</tr>
<tr style="height:100px">
<td>February</td>
<td>$80</td>
</tr>
<tfoot style="vertical-align:bottom">
<tr>
<td>Sum</td>
<td>$180</td>
</tr>
</tfoot>
</table>
تمرین گام به گام
- یک جدول بساز و ستون ها را مشخص کن.
- ردیف های داده را در tbody قرار بده.
- جمع کل را در tfoot بنویس و استایل بده.
نکته: برای سرجدول از thead و برای بدنه از tbody استفاده کن. این کار مدیریت چاپ و اسکرول را آسان می کند.
جمع بندی سریع
- پاورقی جدول برای جمع بندی است.
- همیشه شامل ردیف های tr است.
- کنار thead و tbody بیاید.
- تراز و رنگ را با CSS تنظیم کن.
- در چاپ، تیتر و پاورقی تکرار می شوند.