Thẻ tbody trong HTML

Ví dụ

Một bảng HTML với các phần tử <thead>, <tfoot> và <tbody>:

<table>
<thead>
<tr>
<th>Tháng</th>
<th>Số tiền kiếm được</th>
</tr>
</thead>
<tfoot>
<tr>
<td>Tổng</td>
<td>12 triệu</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>Tháng 1</td>
<td>5 triệu</td>
</tr>
<tr>
<td>Tháng 2</td>
<td>7 triệu</td>
</tr>
</tbody>
</table>

Kết quả:

ThángSố tiền kiếm được
Tháng 15 triệu
Tháng 27 triệu
Tổng12 triệu

Định nghĩa và cách dùng

Thẻ <tbody> được sử dụng để nhóm phần nội dung thân trong bảng HTML.

Phần tử <tbody> được sử dụng kết hợp với phần tử <thead> và <tfoot> để chỉ định các phần khác nhau của bảng (phần thần, phần đầu, và phần chân bảng).

Trình duyệt có thể sử dụng những yếu tố này để cho phép di chuyển phần thân bảng độc lập với các phần header và footer. Ngoài ra, khi in một bảng lớn kéo dài nhiều trang, các yếu tố này có thể cho phép các tiêu đề bảng và chân trang được in ở đầu và cuối mỗi trang.

Thẻ <tbody> phải được dùng tuân thủ cú pháp sau: Nó là con của phần tử <table> nằm sau bất cứ phần tử <caption>, <colgroup><thead> nào.

Trình duyệt hỗ trợ

Thẻ Chrome IE FireFox SafariOpera
<tbody>

Các mẹo và lưu ý

Lưu ý: Phần tử <tbody> phải có ít nhất một thẻ <tr> bên trong.

Mẹo: Phần tử <thead>, <tbody>, và <tfoot> sẽ có các thuộc tính layout theo mặc định. Dù sao bạn có thể sử dụng CSS để tạo style cho các phần tử đó.

Sự khác nhau giữa HTML 4.01 và HTML5

Không một thuộc tính nào của HTML 4.01 được hỗ trợ trong HTML5.

Các thuộc tính

Thuộc tínhGiá trịMô tả
alignright
left
center
justify
char
Không hỗ trợ trong HTML5.
Căn lề nội dung bên trong của phần tử <tbody>
charcharacterKhông hỗ trợ trong HTML5.
Căn lề nội dung bên trong phần tử <tbody> tới một ký tự
charoffnumberKhông hỗ trợ trong HTML5.
Thiết lập số lượng ký tự nội dung bên trong <tbody> sẽ căn lề từ ký tự chỉ định bởi thuộc tính char
valigntop
middle
bottom
baseline
Không hỗ trợ trong HTML5.
Căn lề nội dung theo chiều thẳng đứng bên trong phần tử <tbody>

Thiết lập 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;
}

Leave a Comment