Thẻ HTML

Chủ nhật - 23/06/2024 23:24

Đị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
Phần tử <thead>	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;
}

Nguồn tin: Quantrimang.com:

Ý kiến bạn đọc

Bạn cần đăng nhập với tư cách là Thành viên chính thức để có thể bình luận

Những tin mới hơn

Những tin cũ hơn

Karaoke Giọt Nước Mắt Thừa - Nguyên Khôi

Chấp niệm

Karaoke Tình Đơn Phương 3 (ATOM Remix) - Hi Anh Trai Cover

Karaoke Ai rồi cũng sẽ khác- Hà Nhi Cover (Vinh Over ReMix)

Hẹn gặp lại nhau khi lòng đã hóa bình yên