Thẻ th trong HTML

Thẻ th trong HTML

Thẻ th trong HTML dùng để chứa tên của từng cột trong bảng, các thẻ th nằm trong cùng một thẻ thead, 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ẻ th trong HTML

Thẻ th trong HTML dùng để chứa tên của từng cột trong bảng, các thẻ th nằm trong cùng một thẻ thead, nó chứa tên của cột dọc và cả tên của cột ngang.

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

<th>vanban</th>

vanban: Văn bản.

Bao gồm thẻ mở <th> và thẻ đóng </th> bao quanh văn bản.

<th colspan="socot">vanban</th>

colspan: Thuộc tính dùng để nhóm số cột

socot: Số cột cần nhóm, bạn nhóm thêm mấy cột thì phải bỏ bớt bấy nhiêu thẻ td trong thẻ tr.

Code Thẻ th trong HTML

Thẻ th nằm trong thẻ thead

Dùng làm tiêu đề cho các cột của table:

<thead>
    <tr>
      <th>STT</th>
      <th>Họ Tên</th>
      <th>Lương</th>
    </tr>
</thead>

Thẻ th nằm trong thẻ tfoot

Dùng làm tiêu đề cho phần chân trang của table, thường là tiêu đề của tính tổng:

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

Thuộc colspan trong thẻ th dùng để nhóm nhiều cột vô 1 ô

colspan= "2", nhóm 2 cột, bỏ bớt 1 td:

<table>
  <tbody>
    <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>

Kết quả:

4 Trần Ngọc Thanh 20.000.000VNĐ
Tổng Lương 85.000.000VNĐ

Code hoàn chỉnh

<!DOCTYPE html>
<html>
<head>
<title>Thẻ th 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ẻ th 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ẻ th 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