Thẻ tfoot trong HTML

Thẻ tfoot trong HTML

Thẻ tfoot trong HTML dùng để chứa các cột tính tổng nằm ở cuối bảng, trong thẻ này thường chứa thẻ th là tên cột và td chứa giá trị tổng, chi tiết như nào hãy cùng chúng tôi phân tích:

Chức năng của Thẻ tfoot trong HTML

Thẻ tfoot trong HTML dùng để chứa các cột tính tổng nằm ở cuối bảng, trong thẻ này thường chứa thẻ th là tên cột và td chứa giá trị tổng, thẻ tr chứa 1 hàng.

Cú pháp của Thẻ tfoot trong HTML

<tfoot>cacthekhac</tfoot>

cacthekhac: Trong thẻ tfoot sẽ có thẻ tr chứa 1 hàng, th là thẻ tiêu đề, td là cột chứa giá trị.

Bao gồm thẻ mở <tfoot> và thẻ đóng </tfoot> chứa thẻ tr, th, td.

Code Thẻ tfoot trong HTML

<tfoot>
    <tr>
      <th colspan= "2">Tổng Lương</th>
      <td>85.000.000VNĐ</td>
    </tr>
</tfoot>

Code hoàn chỉnh:

<!DOCTYPE html>
<html>
<head>
<title>Thẻ tfoot trong HTML</title>
<style>
table{width:100%;border-collapse: collapse; font-family: sans-serif; font-size: 15px; letter-spacing: 1px;}
table, th, td { border:1px solid black; }
td, th {text-align: left; padding: 8px; }
caption{padding: 8px;text-transform: uppercase;font-size:18px;font-weight:bold}
tr:nth-child(even) { background-color: #dddddd; }
</style>
</head>
<body>
<table>
 <caption> Bảng Lương</caption>
  <thead>
    <tr>
      <th>STT</th>
      <th>Họ Tên</th>
      <th>Lương</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Bùi Tấn Lực</td>
      <td>20.000.000VNĐ</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Trần Thị Vân</td>
      <td>25.000.000VNĐ</td>
    </tr>
   <tr>
      <td>3</td>
      <td>Nguyễn Thùy Dung</td>
      <td>20.000.000VNĐ</td>
    </tr>
   <tr>
      <td>4</td>
      <td>Trần Ngọc Thanh</td>
      <td>20.000.000VNĐ</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th colspan= "2">Tổng Lương</th>
      <td>85.000.000VNĐ</td>
    </tr>
  </tfoot>
</table>
</body>
</html>

Kết quả:

Bảng Lương
STT Họ Tên Lương
1 Bùi Tấn Lực 20.000.000VNĐ
2 Trần Thị Vân 25.000.000VNĐ
3 Nguyễn Thùy Dung 20.000.000VNĐ
4 Trần Ngọc Thanh 20.000.000VNĐ
Tổng Lương 85.000.000VNĐ

Chạy Thử

Lời kết

Cảm ơn các bạn đã tham khảo bài viết Thẻ tfoot trong HTML.

  • ★★★★★ ★★★★★
  • 0 Bình luận
CEO Bùi Tấn Lực
Bùi Tấn Lực
CEO Bùi Tấn Lực người sáng lập ra Web Mới, là một lập trình viên website, người viết content, chuyên tư vấn các vấn đề về website và SEO website
Chia sẻ nội dung đánh giá của bạn về Thẻ tfoot trong HTML
Email, Điện thoại của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *
Đánh giá của bạn
Tên *
Email
Số điện thoại *
Bình luận, Hỏi đáp
Đăng ký tư vấn thiết kế website
Tìm hiểu 1 năm không bằng lắng nghe 1 câu tư vấn