Thẻ <tbody> trong HTML

1) Giới thiệu về "mẫu bảng có ba thành phần"

- Thông thường, khi truy cập vào các trang web, ta sẽ thỉnh thoảng thấy một số bảng có cấu trúc gồm ba phần (đầu bảng, thân bảng, chân bảng) được phân biệt rõ ràng.

- Ví dụ: Bên dưới là một bảng có cấu trúc gồm ba phần phân biệt rõ ràng:

• Dòng đầu tiên là phần đầu của bảng.
• Bốn dòng kế là phần thân của bảng.
• Dòng cuối cùng là phần chân của bảng.

2) Thẻ <tbody> trong HTML

- Thẻ <tbody> dùng để xác định những dòng nào thuộc "phần thân" của bảng.

- Thẻ <tbody> thường được sử dụng chung với thẻ <thead> và <tfoot> để xác định những dòng nào thuộc "phần đầu" và "phần chân" của bảng.

- Thẻ <tbody> phải được đặt bên trong phần tử <table> và đặt bên ngoài phần tử <tr>

- Đối với bảng có sử dụng các thẻ <thead> - <tbody> - <tfoot> thì nó sẽ có hai điều đặc biệt:

• Thứ nhất: Cho dù các phần tử <thead> - <tbody> - <tfoot> không được sắp xếp theo đúng thứ tự. Tuy nhiên, khi hiển thị lên màn hình thì các thành phần của bảng sẽ được hiển thị theo đúng thứ tự: đầu bảng -> thân bảng -> chân bảng (Xem ví dụ)
• Thứ hai: Ở chế độ xem trước khi in Ctrl + P , nếu bảng quá dài dẫn đến việc bị trải trên nhiều trang thì phần đầu của bảng sẽ được hiển thị lặp lại ở mỗi trang (Xem ví dụ)

3) Các thuộc tính của thẻ <tbody>

- Thẻ <tbody> có hai thuộc tính cơ bản.

- Dưới đây là bảng mô tả sơ lược về hai thuộc tính đó:

3.1) Thuộc tính align

- Thuộc tính align dùng để canh lề cho nội dung của các ô nằm bên trong phần tử <tbody> theo chiều ngang.

- Thuộc tính align có bốn giá trị cơ bản:

<table>
    
    ...

    <tbody align="right">
        
        ...

    </tbody>
    
    ...

</table>

- Lưu ý: Thay vì dùng thuộc tính align của thẻ <tbody> thì ta cũng có thể sử dụng thuộc tính text-align trong CSS để thay thế.

3.2) Thuộc tính valign

- Thuộc tính valign dùng để canh lề cho nội dung của các ô nằm bên trong phần tử <tbody> theo chiều dọc.

- Thuộc tính valign có ba giá trị cơ bản:

<table>
    
    ...

    <tbody valign="bottom">
        
        ...

    </tbody>
    
    ...

</table>

- Lưu ý: Thay vì dùng thuộc tính valign của thẻ <tbody> thì ta cũng có thể sử dụng thuộc tính vertical-align trong CSS để thay thế.

4) Định dạng CSS mặc định

tbody {
    display: table-row-group;
    vertical-align: middle;
    border-color: inherit;
}