<tfoot>: Phần tử Chân Bảng

Try it

<table>
  <caption>
    Council budget (in £) 2018
  </caption>
  <thead>
    <tr>
      <th scope="col">Items</th>
      <th scope="col">Expenditure</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Donuts</th>
      <td>3,000</td>
    </tr>
    <tr>
      <th scope="row">Stationery</th>
      <td>18,000</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th scope="row">Totals</th>
      <td>21,000</td>
    </tr>
  </tfoot>
</table>

thead,
tfoot {
  background-color: #2c5e77;
  color: white;
}

tbody {
  background-color: #e4f0f5;
}

table {
  border-collapse: collapse;
  border: 2px solid rgb(140 140 140);
  font-family: sans-serif;
  font-size: 0.8rem;
  letter-spacing: 1px;
}

caption {
  caption-side: bottom;
  padding: 10px;
}

th,
td {
  border: 1px solid rgb(160 160 160);
  padding: 8px 10px;
}

td {
  text-align: center;
}

Thuộc tính

Phần tử này bao gồm các thuộc tính toàn cục.

Thuộc tính không còn dùng

Các thuộc tính sau đây đã không còn được dùng và không nên sử dụng. Chúng được ghi lại dưới đây để tham khảo khi cập nhật code hiện có và chỉ vì lý do lịch sử.

align Deprecated

Xác định căn chỉnh ngang của mỗi ô chân. Các giá trị enumerated có thể là left, center, right, justify và char. Khi được hỗ trợ, giá trị char căn chỉnh nội dung văn bản theo ký tự được định nghĩa trong thuộc tính char và độ lệch được định nghĩa bởi thuộc tính charoff. Thay vào đó hãy sử dụng thuộc tính CSS text-align, vì thuộc tính này đã không còn được dùng.

bgcolor Deprecated

Xác định màu nền của mỗi ô chân. Giá trị là màu HTML; có thể là mã RGB thập lục phân 6 chữ số, có tiền tố #, hoặc một từ khóa màu. Các giá trị CSS <color> khác không được hỗ trợ. Thay vào đó hãy sử dụng thuộc tính CSS background-color, vì thuộc tính này đã không còn được dùng.

char Deprecated

Không có tác dụng. Ban đầu được dùng để xác định căn chỉnh nội dung theo một ký tự của mỗi ô chân. Các giá trị điển hình bao gồm dấu chấm (.) khi muốn căn chỉnh số hoặc giá trị tiền tệ. Nếu align không được đặt thành char, thuộc tính này bị bỏ qua.

charoff Deprecated

Không có tác dụng. Ban đầu được dùng để xác định số ký tự để bù đầu nội dung ô chân từ ký tự căn chỉnh được xác định bởi thuộc tính char.

valign Deprecated

Xác định căn chỉnh dọc của mỗi ô chân. Các giá trị enumerated có thể là baseline, bottom, middle và top. Thay vào đó hãy sử dụng thuộc tính CSS vertical-align, vì thuộc tính này đã không còn được dùng.

Ghi chú sử dụng

• <tfoot> được đặt sau bất kỳ phần tử <caption>, <colgroup>, <thead>, <tbody> và <tr> nào.
• Cùng với các phần tử <thead> và <tbody> liên quan, phần tử <tfoot> cung cấp thông tin ngữ nghĩa hữu ích và có thể được sử dụng khi hiển thị cho màn hình hoặc in ấn. Việc chỉ định các nhóm nội dung bảng như vậy cũng cung cấp thông tin ngữ cảnh có giá trị cho công nghệ hỗ trợ, bao gồm trình đọc màn hình và công cụ tìm kiếm.
• Khi in tài liệu, trong trường hợp bảng nhiều trang, chân bảng thường xác định thông tin được xuất ra như tóm tắt trung gian trên mỗi trang.

Ví dụ

Xem <table> để biết ví dụ bảng đầy đủ giới thiệu các chuẩn và thực hành phổ biến.

Bảng có chân

Ví dụ này minh họa một bảng được chia thành phần đầu với tiêu đề cột, phần thân với dữ liệu chính của bảng, và phần chân tóm tắt dữ liệu của một cột.

HTML

Các phần tử <thead>, <tbody> và <tfoot> được sử dụng để cấu trúc một bảng cơ bản thành các phần ngữ nghĩa. Phần tử <tfoot> biểu diễn phần chân của bảng, chứa một hàng (<tr>) biểu diễn điểm trung bình được tính của các giá trị trong cột "Credits".

Để phân bổ các ô trong chân vào đúng cột, thuộc tính colspan được sử dụng trên phần tử <th> để trải rộng ô tiêu đề hàng qua ba cột bảng đầu tiên. Ô dữ liệu đơn lẻ (<td>) trong chân được tự động đặt ở đúng vị trí, tức là cột thứ tư, với giá trị thuộc tính colspan bị bỏ qua mặc định là 1. Ngoài ra, thuộc tính scope được đặt thành row trên ô tiêu đề (<th>) trong chân để xác định rõ ràng rằng ô tiêu đề chân này liên quan đến các ô bảng trong cùng hàng, là ô dữ liệu đơn lẻ trong hàng chân chứa điểm trung bình được tính.

<table>
  <thead>
    <tr>
      <th>Student ID</th>
      <th>Name</th>
      <th>Major</th>
      <th>Credits</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>3741255</td>
      <td>Jones, Martha</td>
      <td>Computer Science</td>
      <td>240</td>
    </tr>
    <tr>
      <td>3971244</td>
      <td>Nim, Victor</td>
      <td>Russian Literature</td>
      <td>220</td>
    </tr>
    <tr>
      <td>4100332</td>
      <td>Petrov, Alexandra</td>
      <td>Astrophysics</td>
      <td>260</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th colspan="3" scope="row">Average Credits</th>
      <td>240</td>
    </tr>
  </tfoot>
</table>

CSS

Một số CSS cơ bản được sử dụng để tạo kiểu và làm nổi bật chân bảng để các ô chân nổi bật so với dữ liệu trong phần thân bảng.

tfoot {
  border-top: 3px dotted rgb(160 160 160);
  background-color: #2c5e77;
  color: white;
}

tfoot th {
  text-align: right;
}

tfoot td {
  font-weight: bold;
}

thead {
  border-bottom: 2px solid rgb(160 160 160);
  background-color: #2c5e77;
  color: white;
}

tbody {
  background-color: #e4f0f5;
}

table {
  border-collapse: collapse;
  border: 2px solid rgb(140 140 140);
  font-family: sans-serif;
  font-size: 0.8rem;
  letter-spacing: 1px;
}

th,
td {
  border: 1px solid rgb(160 160 160);
  padding: 8px 10px;
}

tr > td:last-of-type {
  text-align: center;
}

Kết quả

Tóm tắt kỹ thuật

Đặc tả

Tương thích trình duyệt

Xem thêm

• Học: Kiến thức cơ bản về bảng HTML
• <caption>, <col>, <colgroup>, <table>, <tbody>, <td>, <th>, <thead>, <tr>: Các phần tử liên quan đến bảng khác
• background-color: Thuộc tính CSS để đặt màu nền của mỗi ô chân
• border: Thuộc tính CSS để kiểm soát đường viền của các ô chân
• text-align: Thuộc tính CSS để căn chỉnh ngang nội dung mỗi ô chân
• vertical-align: Thuộc tính CSS để căn chỉnh dọc nội dung mỗi ô chân