Thẻ thead trong HTML
Bùi Tấn Lực - 946
- 30/09/2025
Chức năng của Thẻ thead trong HTML
Thẻ thead trong HTML dùng để chứa tiêu đề của các cột trong bảng, trong thẻ thead chứa thẻ tr và thẻ th.
Cú pháp của Thẻ thead trong HTML
<thead>thehtmlcon</thead>
thehtmlcon: Thẻ HTML con bao gồm thẻ tr và thẻ th.
Code Thẻ thead trong HTML
Code một phần
<thead>
<tr>
<th>STT</th>
<th>Họ Tên</th>
<th>Lương</th>
</tr>
</thead>
Code hoàn chỉnh
<!DOCTYPE html>
<html>
<head>
<title>Thẻ thead 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 lưu ý khi sử dụng thẻ thead trong HTML
Khi nào nên sử dụng thẻ thead
Thẻ thead nên được sử dụng khi bảng có hàng tiêu đề cần tách biệt với phần dữ liệu. Việc này giúp cấu trúc bảng rõ ràng hơn, hỗ trợ trình duyệt, công cụ đọc màn hình và các thư viện xử lý dữ liệu nhận biết chính xác đâu là phần tiêu đề.
Trong các bảng có nhiều cột hoặc số lượng dữ liệu lớn, việc khai báo thead còn giúp quá trình bảo trì, chỉnh sửa và mở rộng bảng trở nên thuận tiện hơn. Đây cũng là cách tổ chức bảng được khuyến khích trong HTML hiện đại.
Phân biệt thead với tbody và tfoot
Mỗi nhóm thẻ trong bảng đều có vai trò riêng, vì vậy cần sử dụng đúng mục đích để cấu trúc tài liệu luôn rõ ràng.
| Thẻ | Chức năng |
|---|---|
| thead | Chứa hàng tiêu đề của bảng, thường bao gồm tên các cột. |
| tbody | Chứa toàn bộ dữ liệu chính của bảng. |
| tfoot | Chứa phần tổng kết, thống kê hoặc ghi chú ở cuối bảng. |
Khi kết hợp đầy đủ ba nhóm này, bảng dữ liệu sẽ có cấu trúc logic, dễ đọc và dễ quản lý hơn, đặc biệt đối với các bảng có nhiều dòng dữ liệu.
Các lỗi thường gặp khi sử dụng thẻ thead
- Đặt dữ liệu thông thường vào thead thay vì chỉ chứa tiêu đề.
- Không sử dụng thẻ th trong hàng tiêu đề.
- Khai báo nhiều thẻ thead trong cùng một bảng.
- Đặt thead sau tbody, làm sai cấu trúc bảng.
- Bỏ qua thead trong những bảng lớn khiến mã HTML khó đọc và khó bảo trì.
Việc tránh các lỗi trên sẽ giúp bảng hiển thị ổn định trên nhiều trình duyệt, đồng thời nâng cao chất lượng mã nguồn và khả năng mở rộng sau này.
Thẻ thead có bắt buộc trong bảng HTML không?
thead không phải là thẻ bắt buộc để bảng hoạt động. Một bảng vẫn có thể hiển thị bình thường nếu chỉ sử dụng table, tr và td.
Tuy nhiên, khi bảng có hàng tiêu đề, việc sử dụng thead là lựa chọn nên áp dụng. Cách làm này giúp mã HTML tuân thủ ngữ nghĩa, hỗ trợ tốt hơn cho công cụ tìm kiếm, các thiết bị hỗ trợ người dùng và những ứng dụng cần phân tích cấu trúc bảng.
Đối với các dự án chuyên nghiệp hoặc website có nhiều bảng dữ liệu, việc kết hợp thead, tbody và tfoot sẽ mang lại cấu trúc chuẩn, dễ bảo trì và thuận lợi cho quá trình phát triển lâu dài.
Lời kết
Cảm ơn các bạn đã tham khảo bài viết Thẻ thead 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 *
