Thẻ tbody trong HTML
Bùi Tấn Lực - 901
- 30/09/2025
Chức năng của Thẻ tbody trong HTML
Thẻ tbody trong HTML dùng để chứa các hàng chính cho phần thân của bảng, còn thead sẽ chứa hàng tên cột, tfoot thường chứa hàng tính tổng.
Cú pháp của Thẻ tbody trong HTML
<tbody>thehtmlcon</tbody>
thehtmlcon: Thẻ con bao gồm thẻ tr và thẻ td.
Code Thẻ tbody trong HTML
Code một phần
<tbody>
<tr>
<td>1</td>
<td>Bùi Tấn Lực</td>
<td>20.000.000VNĐ</td>
</tr>
</tbody>
Code hoàn chỉnh
<!DOCTYPE html>
<html>
<head>
<title>Thẻ tbody 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ẻ tbody trong HTML
Thẻ tbody chỉ nên chứa các thẻ tr
Trong cấu trúc bảng HTML, tbody chỉ được sử dụng để nhóm các hàng dữ liệu, vì vậy phần tử này chỉ nên chứa các phần tử tr. Mỗi hàng sẽ bao gồm các ô dữ liệu được tạo bằng td hoặc th. Việc chèn trực tiếp các phần tử không thuộc cấu trúc bảng có thể khiến trình duyệt tự điều chỉnh mã nguồn hoặc hiển thị không đúng như mong muốn.
Để đảm bảo tính hợp lệ của tài liệu HTML, hãy xây dựng bảng theo đúng thứ tự giữa thead, tbody và tfoot. Điều này cũng giúp mã nguồn rõ ràng, dễ bảo trì và tương thích tốt với các trình duyệt hiện đại.
Có thể sử dụng nhiều thẻ tbody trong cùng một bảng khi nào?
Một bảng HTML không bị giới hạn chỉ có một tbody. Bạn hoàn toàn có thể sử dụng nhiều phần tử tbody để chia dữ liệu thành từng nhóm riêng biệt. Mỗi nhóm vẫn chứa các hàng tr độc lập, giúp việc quản lý và đọc dữ liệu trở nên thuận tiện hơn.
Việc chia thành nhiều tbody đặc biệt hữu ích trong các bảng có số lượng bản ghi lớn hoặc cần phân loại theo từng chủ đề, từng tháng, từng phòng ban hoặc từng danh mục. Nhờ đó, mã nguồn có cấu trúc rõ ràng và dễ mở rộng khi cần bổ sung dữ liệu.
<table>
<tbody>
<tr>
<td>Nhóm dữ liệu 1</td>
</tr>
</tbody>
<tbody>
<tr>
<td>Nhóm dữ liệu 2</td>
</tr>
</tbody>
</table>
Trình duyệt có tự động thêm tbody nếu bạn không khai báo không?
Có. Phần lớn trình duyệt hiện nay sẽ tự động tạo một tbody nếu bảng chỉ chứa các hàng tr mà không khai báo phần tử này. Đây là cơ chế giúp bảng vẫn hiển thị bình thường dù mã nguồn chưa đầy đủ.
Tuy nhiên, bạn không nên phụ thuộc vào hành vi tự động này. Việc khai báo rõ tbody giúp cấu trúc HTML nhất quán, dễ đọc hơn và hạn chế những khác biệt khi thao tác bằng JavaScript hoặc CSS.
Những lỗi thường gặp khi sử dụng thẻ tbody
Một số lỗi phổ biến khi làm việc với tbody có thể khiến bảng hoạt động không như mong đợi:
- Đặt các phần tử không thuộc cấu trúc bảng trực tiếp bên trong tbody.
- Đặt tbody sai vị trí so với thead hoặc tfoot.
- Quên đóng thẻ khiến cấu trúc bảng bị lệch.
- Viết mã JavaScript hoặc CSS nhưng không tính đến việc trình duyệt có thể tự sinh tbody.
Để tránh các lỗi trên, hãy luôn kiểm tra cấu trúc HTML sau khi hoàn thành và tuân thủ đúng quy tắc xây dựng bảng. Một cấu trúc chuẩn không chỉ giúp mã nguồn dễ bảo trì mà còn tăng khả năng tương thích giữa các trình duyệt và công cụ xử lý HTML.
Lời kết
Cảm ơn các bạn đã tham khảo bài viết Thẻ tbody 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 *
