<tfoot>
Misol
<thead>, <tbody> va <tfoot> elementlariga ega HTML jadval:
<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>
O‘zingiz sinab ko‘ring »
Quyida ko‘proq "O‘zingiz sinab ko‘ring" misollari keltirilgan.
Ta’rif va qo‘llanilishi
<tfoot> tegi HTML jadvaldagi pastki (footer) kontentni guruhlash uchun ishlatiladi.
<tfoot> elementi jadvalning har bir qismini (pastki qism, sarlavha, asosiy qism) belgilash uchun <thead> va <tbody> elementlari bilan birgalikda ishlatiladi.
Brauzerlar bu elementlardan jadvalning asosiy qismini sarlavha va pastki qismdan mustaqil ravishda aylantirish (scroll) imkonini berish uchun foydalanishi mumkin. Shuningdek, bir necha sahifaga cho‘ziladigan katta jadvalni chop etishda bu elementlar jadval sarlavhasi va pastki qismini har bir sahifaning yuqorisi va pastida chop etish imkonini beradi.
Eslatma: <tfoot> elementi ichida bir yoki bir nechta <tr> tegi bo‘lishi shart.
<tfoot> tegi quyidagi kontekstda ishlatilishi shart: <table> elementining bolasi sifatida, barcha <caption>, <colgroup>, <thead> va <tbody> elementlaridan keyin.
Maslahat: <thead>, <tbody> va <tfoot> elementlari standart holatda jadval maketiga ta’sir qilmaydi. Biroq bu elementlarni CSS yordamida bezashingiz mumkin (quyidagi misolga qarang)!
Brauzerlarda qo‘llab-quvvatlash
| Element | |||||
|---|---|---|---|---|---|
| <tfoot> | Ha | Ha | Ha | Ha | Ha |
Global atributlar
<tfoot> tegi HTML’dagi global atributlarni ham qo‘llab-quvvatlaydi.
Hodisa atributlari
<tfoot> tegi HTML’dagi hodisa atributlarini ham qo‘llab-quvvatlaydi.
Ko‘proq misollar
Misol
<thead>, <tbody> va <tfoot> ni CSS yordamida bezash:
<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>
O‘zingiz sinab ko‘ring »
Misol
<tfoot> ichidagi kontentni tekislash (CSS yordamida):
<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>
O‘zingiz sinab ko‘ring »
Misol
<tfoot> ichidagi kontentni vertikal tekislash (CSS yordamida):
<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="vertical-align:bottom">
<tr style="height:100px">
<td>Sum</td>
<td>$180</td>
</tr>
</tfoot>
</table>
O‘zingiz sinab ko‘ring »
Standart CSS sozlamalari
Ko‘pchilik brauzerlar <tfoot> elementini quyidagi standart qiymatlar bilan ko‘rsatadi:
tfoot {
display: table-footer-group;
vertical-align: middle;
border-color: inherit;
}
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!