Categories HTML

Thẻ tfoot trong HTML

Ví dụ

Một bảng HTML với các phần tử <tfoot>, <thead> 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áng Số tiền kiếm được
Tháng 1 5 triệu
Tháng 2 7 triệu
Tổng 12 triệu

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

Thẻ <tfoot> được sử dụng để nhóm nội dung chân trang trong bảng HTML.

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

Các 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ẻ <tfoot> được sử dụng tuân theo cú pháp sau: Nó phải là con của phần tử <table>, nằm sau phần tử <caption>, <colgroup><thead> và nằm trước bất kỳ phần tử <tbody><tr> nào.


Trình duyệt hỗ trợ

Thẻ  Chrome  IE  FireFox  Safari  Opera
<tfoot>

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

Lưu ý: Phần tử <tfoot> 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 thuộc tính nào thuộc HTML 4.01 được hỗ trợ trong HTML5.


Các thuộc tính

Thuộc tính Giá trị Mô tả
align right
left
center
justify
char
Không hỗ trợ trong HTML5.
Căn lề nội dung bên trong phần tử <tfoot >
char character Không hỗ trợ trong HTML5.
Căn lề nội dung bên trong phần tử <tfoot> tới một ký tự
charoff number Không hỗ trợ trong HTML5.Thiết lập số lượng ký tự nội dung bên trong <tfoot> sẽ căn lề từ ký tự chỉ định bởi thuộc tính char
valign top
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ử <tfoot>

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ử <tfoot> với các giá trị mặc đinh sau:

tfoot {
display: table-footer-group;
vertical-align: middle;
border-color: inherit;
}
Back to Top