Thẻ HTML <tfoot>
Thí dụ
Một bảng HTML có phần tử <thead>, <tbody> và <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>
Thêm các ví dụ "Hãy tự mình thử" bên dưới.
Định nghĩa và Cách sử dụng
Thẻ <tfoot>được sử dụng để nhóm nội dung chân trang trong bảng HTML.
Phần <tfoot>tử được sử dụng cùng với phần tử
<thead> và <tbody> để chỉ định từng phần của bảng (footer, header, body).
Trình duyệt có thể sử dụng các phần tử này để cho phép cuộn nội dung bảng một cách độc lập với đầu trang và chân trang. Ngoài ra, khi in một bảng lớn kéo dài nhiều trang, các phần tử này có thể cho phép in đầu trang và chân trang của bảng ở đầu và cuối mỗi trang.
Lưu ý: Phần <tfoot>tử phải có một hoặc nhiều
thẻ <tr> bên trong.
Thẻ <tfoot>phải được sử dụng trong ngữ cảnh sau: Là phần tử con của
phần tử <table> , sau bất kỳ phần tử nào
<caption> , <colgroup> ,
<thead> và <tbody> .
Mẹo: Các phần tử <thead>, <tbody> và <tfoot>sẽ không ảnh hưởng đến bố cục của bảng theo mặc định. Tuy nhiên, bạn có thể sử dụng CSS để tạo kiểu cho các phần tử này (xem ví dụ bên dưới)!
Hỗ trợ trình duyệt
| Element | |||||
|---|---|---|---|---|---|
| <tfoot> | Yes | Yes | Yes | Yes | Yes |
Thuộc tính toàn cầu
Thẻ <tfoot>cũng hỗ trợ Thuộc tính chung trong HTML .
Thuộc tính sự kiện
Thẻ <tfoot>cũng hỗ trợ Thuộc tính sự kiện trong HTML .
Các ví dụ khác
Thí dụ
Tạo kiểu cho <thead>, <tbody> và <tfoot> bằng 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>
Thí dụ
Cách căn chỉnh nội dung bên trong <tfoot> (với CSS):
<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>
Thí dụ
Cách căn chỉnh nội dung theo chiều dọc bên trong <tfoot> (với CSS):
<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>
Cài đặt CSS mặc định
Hầu hết các trình duyệt sẽ hiển thị <tfoot>phần tử với các giá trị mặc định sau:
tfoot {
display: table-footer-group;
vertical-align: middle;
border-color: inherit;
}