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á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ẻ <thead> được sử dụng để nhóm các nội dung tiêu đề trong bảng HTML.
Phần tử <thead> được sử dụng kết hợp với phần tử <tbody> và <tfoot> để xác định các phần riêng biệt của bảng (phần tiêu đề trên đâu, phần nội dung bảng 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ẻ <thead> phải tuân thủ cú pháp sau: Nó phải là con của phần tử <table>, nằm sau bất cứ phần tử <caption> và <colgroup> nào, và nằm trước bất cứ phần tử <tbody>, <tfoot> và <tr>.
Trình duyệt hỗ trợ
| Thẻ | Chrome | IE | FireFox | Safari | Opera |
|---|---|---|---|---|---|
| <thead> | Có | Có | Có | Có | Có |
Các mẹo và lưu ý
Lưu ý: Phần tử <thead> 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ử <thead > |
| char | character | Không hỗ trợ trong HTML5. Căn lề nội dung bên trong phần tử <thead> 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 <thead> 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ử <thead> |
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ử <thead> với các giá trị mặc định sau:
thead {
display: table-header-group;
vertical-align: middle;
border-color: inherit;
}