HTML <tfoot> 标签

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

<tfoot> thẻ được sử dụng để nhóm nội dung chân trang trong bảng HTML.

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

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

Lưu ý: yếu tố <tfoot> phải chứa một hoặc nhiều <tr> thẻ.

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

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

Mô hình

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 <tfoot> nội dung trong đó (sử dụng CSS):

<table style="width:100%">
  <tr>
    <th>Tháng</th>
    <th>Lưu trữ</th>
  </tr>
  <tr>
    <td>Tháng Một</td>
    <td>￥3400</td>
  </tr>
  <tr>
    <td>Tháng Hai</td>
    <td>￥4500</td>
  </tr>
  <tfoot style="text-align:center">
    <tr>
      <td>Tổng cộng</td>
      <td>￥7900</td>
    </tr>
  </tfoot>
</table>

Thử ngay

Ví dụ 4

Cách canh dọc <tfoot> nội dung trong đó (sử dụng CSS):

<table style="width:100%">
  <tr>
    <th>Tháng</th>
    <th>Lưu trữ</th>
  </tr>
  <tr>
    <td>Tháng Một</td>
    <td>￥3400</td>
  </tr>
  <tr>
    <td>Tháng Hai</td>
    <td>￥4500</td>
  </tr>
  <tfoot style="vertical-align:bottom">
    <tr style="height:100px">
      <td>Tổng cộng</td>
      <td>￥7900</td>
    </tr>
  </tfoot>
</table>

Thử ngay

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

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

Thuộc tính sự kiện

<tfoot> 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ị giá trị mặc định sau đây <tfoot> Thành phần:

tfoot {
  display: nhóm footer table;
  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ợ