Thẻ thead 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á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><colgroup> nào, và nằm trước bất cứ phần tử <tbody>, <tfoot><tr>.

Trình duyệt hỗ trợ

Thẻ  Chrome  IE  FireFox  Safari  Opera
<thead>

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;
}