Thẻ HTML <tbody>
Ví dụ
Bảng HTML có phần tử <thead>, <tbody> và <tfoot>:
<table>
<thead>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
</thead>
<tbody>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Sum</td>
<td>$180</td>
</tr>
</tfoot>
</table>
Hãy tự mình thử »Thêm ví dụ "Hãy tự mình thử" bên dưới.
Định nghĩa và cách sử dụng
Thẻ <tbody>
được sử dụng để nhóm nội dung nội dung 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, đầu trang, chân trang).
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 đầu trang và chân trang. 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 đầu trang và chân trang 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 (xem ví dụ bên dưới)!
Hỗ trợ trình duyệt
Element | |||||
---|---|---|---|---|---|
<tbody> | Yes | Yes | Yes | Yes | Yes |
Thuộc tính chung
Thẻ <tbody>
cũng hỗ trợ Thuộc tính chung trong HTML .
Thuộc tính sự kiện
Thẻ <tbody>
cũng hỗ trợ Thuộc tính sự kiện trong HTML .
Thêm ví dụ
Ví dụ
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>Month</th>
<th>Savings</th>
</tr>
</thead>
<tbody>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Sum</td>
<td>$180</td>
</tr>
</tfoot>
</table>
Hãy tự mình thử »Ví dụ
Cách căn chỉnh nội dung bên trong <tbody> (bằng CSS):
<table style="width:100%">
<thead>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
</thead>
<tbody style="text-align:right">
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</tbody>
</table>
Hãy tự mình thử »Ví dụ
Cách 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>Month</th>
<th>Savings</th>
</tr>
<tbody style="vertical-align:bottom">
<tr
style="height:100px">
<td>January</td>
<td>$100</td>
</tr>
<tr
style="height:100px">
<td>February</td>
<td>$80</td>
</tr>
</tbody>
</table>
Hãy tự mình thử »Cài đặt CSS mặc định
Hầu hết các 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;
}