Thẻ HTML <tbody>
Định nghĩa và cách sử dụng thẻ <tbody>
Thẻ <tbody>
được sử dụng để nhóm nội dung body trong bảng HTML. Phần tử <tbody>
được sử dụng kết hợp với các phần tử <thead>
và <tfoot>
để chỉ định từng phần của bảng (nội dung, footer, header). Ví dụ về bảng HTML có phần tử <thead>
, <tbody>
và <tfoot>
:
<table>
<thead>
<tr>
<th>Tháng</th>
<th>Số tiền tiết kiệm</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tháng 1</td>
<td>$100</td>
</tr>
<tr>
<td>Tháng 2</td>
<td>$80</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Tổng</td>
<td>$180</td>
</tr>
</tfoot>
</table>
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ử <tbody>
phải có một hoặc nhiều thẻ <tr>
bên trong.
Thẻ <tbody>
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> và <thead>
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, bạn có thể sử dụng CSS để tạo kiểu cho các phần tử này!
Hỗ trợ trình duyệt
Phần tử <tbody> | Google Chrome | MS Edge | Firefox | Safari | Opera |
---|---|---|---|---|---|
Có | Có | Có | Có | Có |
Thuộc tính Global
Thẻ <tbody>
cũng hỗ trợ thuộc tính Global trong HTML.
Thuộc tính sự kiện
Thẻ <tbody>
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>Tháng</th>
<th>Số tiền tiết kiệm</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tháng 1</td>
<td>$100</td>
</tr>
<tr>
<td>Tháng 2</td>
<td>$80</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Tổng</td>
<td>$180</td>
</tr>
</tfoot>
</table>
Căn chỉnh nội dung bên trong <tbody> (bằng CSS):
<table style="width:100%">
<thead>
<tr>
<th>Tháng</th>
<th>Số tiền tiết kiệm</th>
</tr>
</thead>
<tbody style="text-align:right">
<tr>
<td>Tháng 1</td>
<td>$100</td>
</tr>
<tr>
<td>Tháng 2</td>
<td>$80</td>
</tr>
</tbody>
</table>
Căn chỉnh nội dung theo chiều dọc bên trong <tbody>
(bằng CSS):
<table style="width:50%;">
<tr>
<th>Tháng</th>
<th>Số tiền tiết kiệm</th>
</tr>
<tbody style="vertical-align:bottom">
<tr style="height:100px">
<td>Tháng 1</td>
<td>$100</td>
</tr>
<tr style="height:100px">
<td>Tháng 2</td>
<td>$80</td>
</tr>
</tbody>
</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ử <tbody>
với các giá trị mặc định sau:
tbody {
display: table-row-group;
vertical-align: middle;
border-color: inherit;
}
Bạn nên đọc
Theo Nghị định 147/2024/ND-CP, bạn cần xác thực tài khoản trước khi sử dụng tính năng này. Chúng tôi sẽ gửi mã xác thực qua SMS hoặc Zalo tới số điện thoại mà bạn nhập dưới đây:


Cũ vẫn chất
-
Cách đăng ký cấp lại thẻ CCCD gắn chip online mẫu mới
Hôm qua -
Code Lăng Vân Chi Kiếm mới nhất và cách nhập code
Hôm qua -
Code Sơn Hải Kinh 3D Mobile mới nhất
Hôm qua -
Tải full bộ hình nền iOS 18 đầy đủ với độ phân giải cao
Hôm qua -
Lời chúc ngày Gia đình Việt Nam 28/6 hay và ý nghĩa
Hôm qua 2 -
Cách bật tùy chọn nhà phát triển và tắt nó trên Android
Hôm qua -
14/6 là ngày gì?
Hôm qua -
Code Vương Giả Vinh Diệu, code Honor of Kings mới nhất
Hôm qua -
Những câu nói hay về tháng 7, stt chào tháng 7 yêu thương
Hôm qua -
Cách chia sẻ album ảnh trên iPhone
Hôm qua