Thẻ tfoot trong HTML
Bùi Tấn Lực - 1009
- 30/09/2025
Chức năng của Thẻ tfoot trong HTML
Thẻ tfoot trong HTML dùng để chứa các cột tính tổng nằm ở cuối bảng, trong thẻ này thường chứa thẻ th là tên cột và td chứa giá trị tổng, thẻ tr chứa 1 hàng.
Cú pháp của Thẻ tfoot trong HTML
<tfoot>cacthekhac</tfoot>
cacthekhac: Trong thẻ tfoot sẽ có thẻ tr chứa 1 hàng, th là thẻ tiêu đề, td là cột chứa giá trị.
Code Thẻ tfoot trong HTML
<tfoot>
<tr>
<th colspan= "2">Tổng Lương</th>
<td>85.000.000VNĐ</td>
</tr>
</tfoot>
Code hoàn chỉnh:
<!DOCTYPE html>
<html>
<head>
<title>Thẻ tfoot trong HTML</title>
<style>
table{width:100%;border-collapse: collapse; font-family: sans-serif; font-size: 15px; letter-spacing: 1px;}
table, th, td { border:1px solid black; }
td, th {text-align: left; padding: 8px; }
caption{padding: 8px;text-transform: uppercase;font-size:18px;font-weight:bold}
tr:nth-child(even) { background-color: #dddddd; }
</style>
</head>
<body>
<table>
<caption> Bảng Lương</caption>
<thead>
<tr>
<th>STT</th>
<th>Họ Tên</th>
<th>Lương</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Bùi Tấn Lực</td>
<td>20.000.000VNĐ</td>
</tr>
<tr>
<td>2</td>
<td>Trần Thị Vân</td>
<td>25.000.000VNĐ</td>
</tr>
<tr>
<td>3</td>
<td>Nguyễn Thùy Dung</td>
<td>20.000.000VNĐ</td>
</tr>
<tr>
<td>4</td>
<td>Trần Ngọc Thanh</td>
<td>20.000.000VNĐ</td>
</tr>
</tbody>
<tfoot>
<tr>
<th colspan= "2">Tổng Lương</th>
<td>85.000.000VNĐ</td>
</tr>
</tfoot>
</table>
</body>
</html>
Kết quả:
| STT | Họ Tên | Lương |
|---|---|---|
| 1 | Bùi Tấn Lực | 20.000.000VNĐ |
| 2 | Trần Thị Vân | 25.000.000VNĐ |
| 3 | Nguyễn Thùy Dung | 20.000.000VNĐ |
| 4 | Trần Ngọc Thanh | 20.000.000VNĐ |
| Tổng Lương | 85.000.000VNĐ | |
Những câu hỏi thường gặp về thẻ tfoot trong HTML
Thẻ tfoot có bắt buộc phải sử dụng trong bảng không?
Không. Thẻ tfoot là thành phần tùy chọn trong HTML. Bạn chỉ nên sử dụng khi bảng dữ liệu có phần tổng kết, thống kê hoặc nội dung cần tách biệt với phần dữ liệu chính. Với các bảng đơn giản không có dòng tổng hợp, có thể bỏ qua thẻ này mà không ảnh hưởng đến khả năng hiển thị.
Việc sử dụng tfoot giúp cấu trúc bảng rõ ràng hơn, đồng thời hỗ trợ các công cụ đọc màn hình và giúp lập trình viên dễ quản lý khi bảng có nhiều hàng dữ liệu.
tfoot nên đặt trước hay sau tbody?
Trong HTML5, tfoot nên được đặt sau tbody để đảm bảo đúng chuẩn hiện hành và giúp mã nguồn dễ đọc. Đây cũng là cách được các trình duyệt hiện đại xử lý ổn định.
Nếu bảng không có tbody, thẻ tfoot sẽ được đặt sau thead và trước khi kết thúc bảng. Điều quan trọng là duy trì cấu trúc nhất quán để thuận tiện cho việc bảo trì về sau.
Có thể sử dụng nhiều thẻ tfoot trong một bảng không?
Không. Mỗi bảng HTML chỉ được phép có một thẻ tfoot. Nếu cần hiển thị nhiều dòng tổng kết, bạn chỉ việc thêm nhiều hàng tr bên trong cùng một tfoot.
<tfoot>
<tr>
<td colspan="3">Tổng doanh thu</td>
<td>150.000.000</td>
</tr>
<tr>
<td colspan="3">Thuế VAT</td>
<td>15.000.000</td>
</tr>
</tfoot>
Cách tổ chức này vừa đúng chuẩn HTML vừa giúp phần chân bảng dễ mở rộng khi cần bổ sung thông tin.
Khi nào nên dùng tfoot thay vì một hàng tr thông thường?
Bạn nên dùng tfoot khi hàng dữ liệu đóng vai trò tổng kết hoặc kết luận của toàn bộ bảng, chẳng hạn:
- Tổng tiền hóa đơn.
- Tổng số lượng sản phẩm.
- Điểm trung bình.
- Kết quả thống kê cuối bảng.
Nếu chỉ là một hàng dữ liệu giống các hàng còn lại thì nên đặt trong tbody. Điều này giúp cấu trúc bảng mang đúng ý nghĩa ngữ nghĩa và dễ xử lý bằng CSS hoặc JavaScript.
Các trình duyệt hiện nay có hỗ trợ đầy đủ thẻ tfoot không?
Có. Thẻ tfoot đã được các trình duyệt phổ biến như Chrome, Firefox, Edge, Safari và Opera hỗ trợ trong nhiều năm. Vì vậy, bạn có thể sử dụng mà không cần lo ngại về khả năng tương thích.
Tuy nhiên, để đạt hiệu quả tốt nhất, hãy viết đúng cấu trúc bảng HTML, kết hợp hợp lý giữa thead, tbody và tfoot. Điều này không chỉ giúp trình duyệt hiển thị chính xác mà còn nâng cao khả năng bảo trì và mở rộng mã nguồn trong tương lai.
Lời kết
Cảm ơn các bạn đã tham khảo bài viết Thẻ tfoot trong HTML.
- 0 Bình luận
Email, Điện thoại của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *
