HTML <thead> 标签

định nghĩa và cách sử dụng

<thead> thẻ được sử dụng để nhóm nội dung tiêu đề trong bảng HTML.

<thead> yếu tố với <tbody> và <tfoot> yếu tố kết hợp sử dụng để quy định mỗi phần của bảng (tiêu đề, nội dung, chân trang).

browser có thể sử dụng các yếu tố này để hiển thị tiêu đề và chân trang độc lập khi cuộn nội dung của bảng. Ngoài ra, khi in bảng lớn trải qua nhiều trang, các yếu tố này có thể làm cho tiêu đề và chân trang được in ở đầu và cuối mỗi trang.

lưu ý:<thead> yếu tố nội bộ phải có một hoặc nhiều <tr> thẻ.

<thead> thẻ phải được sử dụng trong ngữ cảnh sau: làm <table> yếu tố con của yếu tố, ở bất kỳ <caption> và <colgroup> sau yếu tố, và ở bất kỳ <tbody>,<tfoot> và <tr> trước yếu tố

lưu ý:mặc định,<thead>yếu tố <tbody> và <tfoot> không ảnh hưởng đến bố cục của bảng. Nhưng, bạn có thể sử dụng CSS để đặt样式 cho các yếu tố này (xem ví dụ dưới đây)!

mẫu

ví dụ 1

Bảng HTML chứa các yếu tố <thead>, <tbody> và <tfoot>:

<table>
  <thead>
    <tr>
      <th>Tháng</th>
      <th>Lưu trữ</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Tháng một</td>
      <td>￥3400</td>
    </tr>
    <tr>
      <td>Tháng hai</td>
      <td>￥4500</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>tổng cộng</td>
      <td>￥7900</td>
    </tr>
  </tfoot>
</table>

Thử ngay

ví dụ 2

Đặt样式 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>Tháng</th>
      <th>Lưu trữ</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Tháng một</td>
      <td>￥3400</td>
    </tr>
    <tr>
      <td>Tháng hai</td>
      <td>￥4500</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>tổng cộng</td>
      <td>￥7900</td>
    </tr>
  </tfoot>
</table>

Thử ngay

ví dụ 3

cách canh <thead> nội dung (sử dụng CSS):

<table style="width:100%">
  <thead style="text-align:left">
    <tr>
      <th>Tháng</th>
      <th>Lưu trữ</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Tháng một</td>
      <td>￥3400</td>
    </tr>
    <tr>
      <td>Tháng hai</td>
      <td>￥4500</td>
    </tr>
  </tbody>
</table>

Thử ngay

ví dụ 4

cách canh dọc <thead> nội dung (sử dụng CSS):

<table style="width:50%;">
  <thead style="vertical-align:bottom">
    <tr style="height:100px">
      <th>Tháng</th>
      <th>Lưu trữ</th>
    </tr>
  </thead>
   <tbody>
    <tr>
      <td>Tháng một</td>
      <td>￥3400</td>
    </tr>
    <tr>
      <td>Tháng hai</td>
      <td>￥4500</td>
    </tr>
  </tbody>
</table>

Thử ngay

Thuộc tính toàn cục

<thead> Thẻ cũng hỗ trợ Thuộc tính toàn cục trong HTML.

Thuộc tính sự kiện

<thead> Thẻ cũng hỗ trợ Thuộc tính sự kiện trong HTML.

Cài đặt CSS mặc định

Hầu hết các trình duyệt sẽ hiển thị các giá trị mặc định sau <thead> Thành phần:

thead {
  display: nhóm tiêu đề bảng;
  vertical-align: giữa;
  border-color: di truyền;
}

Hỗ trợ trình duyệt

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Hỗ trợ Hỗ trợ Hỗ trợ Hỗ trợ Hỗ trợ