Thẻ tr trong HTML
Bùi Tấn Lực - 1258
- 30/09/2025
Chức năng của Thẻ tr trong HTML
Thẻ tr trong HTML dùng để chứa các cột của một hàng, thẻ tr nằm trong tbody hoặc thead hoặc tfoot, thẻ tr chứa cột td và cột th.
Cú pháp của Thẻ tr trong HTML
<tr>cacthekhac</tr>
cacthekhac: Bên trong thẻ tr có các thẻ td, th.
Code Thẻ tr trong HTML
Thẻ tr nằm trong thẻ thead
<thead>
<tr>
<th>STT</th>
<th>Họ Tên</th>
<th>Lương</th>
</tr>
</thead>
Thẻ tr nằm trong thẻ tbody
<tbody>
<tr>
<td>1</td>
<td>Bùi Tấn Lực</td>
<td>20.000.000VNĐ</td>
</tr>
</tbody>
Thẻ tr nằm trong thẻ tfoot
<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ẻ tr 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Đ | |
Các lưu ý khi sử dụng thẻ tr trong HTML
Thẻ tr là thành phần tạo nên từng hàng trong bảng HTML. Mặc dù cách sử dụng không phức tạp, nhưng nếu đặt sai vị trí hoặc kết hợp không đúng với các thẻ liên quan, bố cục bảng có thể bị lỗi hoặc gây khó khăn khi bảo trì. Dưới đây là những lưu ý quan trọng giúp bạn sử dụng thẻ này hiệu quả hơn.
Thẻ tr chỉ được đặt bên trong table
Thẻ tr phải được khai báo bên trong table. Tùy theo cấu trúc của bảng, mỗi hàng có thể nằm trong thead, tbody hoặc tfoot. Việc đặt tr bên ngoài table sẽ khiến tài liệu HTML không đúng chuẩn và trình duyệt có thể hiển thị kết quả không như mong muốn.
<table>
<tbody>
<tr>
<td>Nội dung</td>
</tr>
</tbody>
</table>
Không đặt trực tiếp nội dung văn bản trong tr
Thẻ tr chỉ đóng vai trò tạo hàng, không dùng để chứa trực tiếp văn bản. Mọi dữ liệu trong hàng cần được đặt bên trong các ô bằng thẻ td hoặc th. Điều này giúp cấu trúc bảng rõ ràng và đảm bảo HTML hợp lệ.
<table>
<tr>
<td>Dữ liệu 1</td>
<td>Dữ liệu 2</td>
</tr>
</table>
Mỗi hàng nên có số lượng cột thống nhất
Trong hầu hết trường hợp, các hàng trong cùng một bảng nên có cùng số lượng cột để dữ liệu được căn chỉnh chính xác. Nếu số lượng ô giữa các hàng khác nhau mà không sử dụng thuộc tính phù hợp, bố cục bảng có thể bị lệch và làm giảm khả năng đọc dữ liệu.
Có thể kết hợp với thuộc tính colspan và rowspan
Khi cần gộp nhiều cột hoặc nhiều hàng, bạn nên sử dụng thuộc tính colspan hoặc rowspan trên thẻ td hoặc th. Thẻ tr vẫn giữ vai trò tạo hàng, còn việc mở rộng phạm vi hiển thị sẽ do các ô dữ liệu đảm nhiệm.
<table>
<tr>
<td colspan="2">Tiêu đề chung</td>
</tr>
<tr>
<td>Cột 1</td>
<td>Cột 2</td>
</tr>
</table>
Nên sử dụng thead, tbody và tfoot để tổ chức bảng rõ ràng
Đối với những bảng có nhiều dữ liệu, việc phân chia phần tiêu đề, nội dung và chân bảng bằng thead, tbody và tfoot sẽ giúp cấu trúc tài liệu dễ hiểu hơn. Cách tổ chức này cũng hỗ trợ việc chỉnh sửa CSS, xử lý bằng JavaScript và nâng cao khả năng bảo trì trong các dự án thực tế.
Lời kết
Cảm ơn các bạn đã tham khảo bài viết Thẻ tr 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 *
