Thẻ HTML <thead>
Định nghĩa và cách sử dụng thẻ <thead>
Thẻ <thead>
được sử dụng để nhóm nội dung tiêu đề trong bảng HTML. Ví dụ, trong bảng HTML sau 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>
Phần tử <thead>
được sử dụng kết hợp với các phần tử <tbody> và <tfoot> để chỉ định từng phần của bảng (tiêu đề, nội dung, footer).
Trình duyệt có thể sử dụng các phần tử này để cho phép cuộn phần thân bảng một cách độc lập với header và footer. Ngoài ra, khi in một bảng lớn trải dài trên nhiều trang, các phần tử này có thể cho phép in header và footer của bảng ở đầu và cuối mỗi trang.
Lưu ý: Phần tử <thead>
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ử <tbody>
, <tfoot>
và <tr>
nào .
Mẹo: Các phần tử <thead>
, <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
Phần tử <thead> | Google Chrome | MS Edge | Firefox | Safari | Opera |
---|---|---|---|---|---|
Có | Có | Có | Có | Có |
Thuộc tính Global
Thẻ <thead>
cũng hỗ trợ thuộc tính Global 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
Tạo kiểu <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>
Cách căn chỉnh nội dung bên trong <thead>
(bằng 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>
Cách căn chỉnh nội dung theo chiều dọc bên trong <thead>
(bằng 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 mọi 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;
}
Bạn nên đọc
Theo Nghị định 147/2024/ND-CP, bạn cần xác thực tài khoản trước khi sử dụng tính năng này. Chúng tôi sẽ gửi mã xác thực qua SMS hoặc Zalo tới số điện thoại mà bạn nhập dưới đây:


Cũ vẫn chất
-
Cách chuyển bài hát tải từ Zing MP3 sang thư mục Music
Hôm qua -
Cách sử dụng mail merge trong Word để trộn văn bản
Hôm qua -
Fake IP, phần mềm đổi IP, lướt web ẩn danh tốt nhất
Hôm qua -
4 cách hẹn giờ tắt máy tính dễ dàng, nhanh, đơn giản nhất
Hôm qua -
3 cách cố định hình ảnh trong Word, khóa di chuyển để không làm ảnh hưởng bố cục
Hôm qua -
Cách xem ai chặn bạn trên Facebook rất đơn giản
Hôm qua -
Tổng hợp các cách bật Bluetooth trên Windows 10/8/7
Hôm qua -
15 cách mở Device Manager trong Windows 10
Hôm qua -
Top ứng dụng Android đang miễn phí và giảm giá 10/07/2025
Hôm qua 8 -
Dãn hay giãn đúng chính tả? Co dãn hay Co giãn, Thư dãn hay Thư giãn mới đúng?
Hôm qua