Thẻ HTML <thead>
Thí dụ
Một bảng HTML có phần tử <thead>, <tbody> và <tfoot>:
<table>
<thead>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
</thead>
<tbody>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Sum</td>
<td>$180</td>
</tr>
</tfoot>
</table>
Thêm các ví dụ "Hãy tự mình thử" bên dưới.
Định nghĩa và Cách sử dụng
Thẻ <thead>
được sử dụng để nhóm nội dung tiêu đề trong bảng HTML.
Phần <thead>
tử được sử dụng cùng với các phần tử <tbody> và <tfoot> để chỉ định từng phần của bảng (đầu trang, nội dung, chân trang).
Trình duyệt có thể sử dụng các phần tử này để cho phép cuộn nội dung bảng một cách độc lập với đầu trang và chân trang. Ngoài ra, khi in một bảng lớn kéo dài nhiều trang, các phần tử này có thể cho phép in đầu trang và chân trang của bảng ở đầu và cuối mỗi trang.
Lưu ý: Phần <thead>
tử phải có một hoặc nhiều
thẻ <tr> bên trong.
Thẻ <thead>
phải được sử dụng trong ngữ cảnh sau: Là phần tử con của
phần tử <table> , sau bất kỳ phần tử
<caption> và <colgroup> nào và trước bất kỳ phần tử nào
<tbody> , <tfoot> và
<tr> .
Mẹo: Các phần <thead>
tử, <tbody> và <tfoot> sẽ không ảnh hưởng đến bố cục của bảng theo mặc định. Tuy nhiên, bạn có thể sử dụng CSS để tạo kiểu cho các phần tử này (xem ví dụ bên dưới)!
Hỗ trợ trình duyệt
Element | |||||
---|---|---|---|---|---|
<thead> | Yes | Yes | Yes | Yes | Yes |
Thuộc tính toàn cầu
Thẻ <thead>
cũng hỗ trợ Thuộc tính chung trong HTML .
Thuộc tính sự kiện
Thẻ <thead>
cũng hỗ trợ Thuộc tính sự kiện trong HTML .
Các ví dụ khác
Thí dụ
Tạo kiểu cho <thead>, <tbody> và <tfoot> bằng CSS:
<html>
<head>
<style>
thead {color: green;}
tbody {color: blue;}
tfoot {color: red;}
table, th, td {
border: 1px solid black;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
</thead>
<tbody>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Sum</td>
<td>$180</td>
</tr>
</tfoot>
</table>
Thí dụ
Cách căn chỉnh nội dung bên trong <thead> (với CSS):
<table style="width:100%">
<thead
style="text-align:left">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
</thead>
<tbody>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</tbody>
</table>
Thí dụ
Cách căn chỉnh theo chiều dọc nội dung bên trong <thead> (với CSS):
<table style="width:50%;">
<thead
style="vertical-align:bottom">
<tr
style="height:100px">
<th>Month</th>
<th>Savings</th>
</tr>
</thead>
<tbody>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</tbody>
</table>
Cài đặt CSS mặc định
Hầu hết các trình duyệt sẽ hiển thị <thead>
phần tử với các giá trị mặc định sau:
thead {
display: table-header-group;
vertical-align: middle;
border-color: inherit;
}