Thẻ HTML <tfoot>
Định nghĩa và cách sử dụng thẻ <tfoot>
Thẻ <tfoot>
được sử dụng để nhóm nội dung footer trong bảng HTML. Ví dụ về 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>
Phần tử <tfoot>
được sử dụng kết hợp với các phần tử <thead>
và <tbody>
để chỉ định từng phần của bảng (footer, tiêu đề, nội dung).
Trình duyệt có thể sử dụng các phần tử này để cho phép cuộn phần thân bảng một cách độc lập với header và footer. Ngoài ra, khi in một bảng lớn trải dài trên nhiều trang, các phần tử này có thể cho phép in header và footer của bảng ở đầu và cuối mỗi trang.
Lưu ý: Phần tử <tfoot>
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ử <caption>, <colgroup>, <thead> và <tbody> nào.
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, 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
Phần tử <tfoot> | Google Chrome | MS Edge | Firefox | Safari | Opera |
---|---|---|---|---|---|
Có | Có | Có | Có | Có |
Thuộc tính Global
Thẻ <tfoot>
cũng hỗ trợ thuộc tính Global 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
Tạo kiểu <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>
Cách căn chỉnh nội dung bên trong <tfoot> (bằng 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>
Cách căn chỉnh nội dung theo chiều dọc bên trong <tfoot> (bằng 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 mọi trình duyệt sẽ hiển thị phần tử <tfoot>
với các giá trị mặc định sau:
tfoot {
display: table-footer-group;
vertical-align: middle;
border-color: inherit;
}
Bạn nên đọc
![❖](https://st.quantrimang.com/photos/avatars/default.png)
![❖](https://st.quantrimang.com/photos/image/icon/hoc-HTML-5-size-24x24-znd.png)
Cũ vẫn chất
-
Stt cho những đêm tâm trạng không ngủ được
2 ngày -
Kết quả của các trận đấu trong Record of Ragnarok
Hôm qua -
Xử lý nhanh lỗi màn hình iPhone không nhạy, cảm ứng kém
Hôm qua -
Cách xem phiên bản di động của một trang web bất kỳ trên máy tính
2 ngày -
Cách đánh số trang trong Excel cực nhanh và dễ
Hôm qua -
Cách view source, xem mã nguồn trang web bằng điện thoại, máy tính
Hôm qua 1 -
11 thủ thuật mở Local Group Policy Editor trên Windows
Hôm qua -
2 cách lặp lại thanh tiêu đề trong Word cho bảng
Hôm qua -
Những câu stt hay tâm trạng về lặng nhìn cuộc sống
2 ngày -
Cách sửa lỗi không tải được file lên Google Drive
2 ngày