Thẻ th trong HTML

Bùi Tấn Lực
1163
30/09/2025

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.

<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ử

Các lưu ý khi sử dụng thẻ th trong thực tế

Khi nào nên dùng thẻ th thay cho td?

Thẻ th nên được sử dụng khi ô dữ liệu đóng vai trò là tiêu đề cho hàng, cột hoặc một nhóm dữ liệu trong bảng. Ngược lại, td chỉ phù hợp để hiển thị nội dung thông thường. Việc phân biệt đúng hai loại ô này giúp bảng có cấu trúc rõ ràng và hỗ trợ các công cụ đọc màn hình xác định mối liên hệ giữa tiêu đề với dữ liệu.

Bạn nên sử dụng thẻ th trong các trường hợp sau:

Hàng đầu tiên của bảng chứa tên các cột.
Cột đầu tiên dùng để mô tả từng hàng dữ liệu.
Các ô tiêu đề đại diện cho một nhóm thông tin.
Bảng cần đảm bảo khả năng truy cập và tuân thủ chuẩn HTML.

Ví dụ:

<table>
    <tr>
        <th>Sản phẩm</th>
        <th>Giá</th>
    </tr>
    <tr>
        <td>Bàn phím</td>
        <td>450.000đ</td>
    </tr>
</table>

Có nên sử dụng thuộc tính scope cho mọi ô tiêu đề?

Trong các bảng dữ liệu thông thường, việc khai báo thuộc tính scope giúp trình duyệt và các công cụ hỗ trợ xác định chính xác phạm vi của từng ô tiêu đề. Điều này đặc biệt hữu ích với những bảng có nhiều hàng hoặc nhiều cột.

Một số giá trị thường được sử dụng:

scope="col": Tiêu đề của một cột.
scope="row": Tiêu đề của một hàng.
scope="colgroup": Tiêu đề cho nhóm cột.
scope="rowgroup": Tiêu đề cho nhóm hàng.

Ví dụ:

<table>
    <tr>
        <th scope="col">Tên</th>
        <th scope="col">Tuổi</th>
    </tr>
    <tr>
        <th scope="row">Lan</th>
        <td>24</td>
    </tr>
</table>

Đối với bảng đơn giản, trình duyệt vẫn có thể hiển thị đúng khi không khai báo scope. Tuy nhiên, việc bổ sung thuộc tính này là một thói quen tốt giúp mã nguồn rõ ràng và tăng khả năng truy cập.

Những lỗi thường gặp khi dùng thẻ th và cách khắc phục

Trong quá trình xây dựng bảng, nhiều người sử dụng thẻ th chưa đúng mục đích, dẫn đến cấu trúc bảng thiếu nhất quán hoặc gây khó khăn cho các công cụ hỗ trợ.

Sử dụng th để làm nổi bật nội dung thay vì làm ô tiêu đề. Nên dùng CSS nếu chỉ muốn thay đổi kiểu hiển thị.
Không khai báo scope khi bảng có cấu trúc phức tạp, khiến mối liên hệ giữa tiêu đề và dữ liệu không rõ ràng.
Đặt toàn bộ ô trong bảng là th, làm mất ý nghĩa ngữ nghĩa của dữ liệu.
Kết hợp sai giữa rowspan, colspan và các ô tiêu đề, khiến bố cục bảng khó theo dõi.
Không kiểm tra bảng trên nhiều thiết bị, dẫn đến việc dữ liệu bị lệch hoặc khó đọc trên màn hình nhỏ.

Để bảng HTML dễ bảo trì và đáp ứng tiêu chuẩn hiện đại, hãy chỉ sử dụng th cho các ô tiêu đề, kết hợp hợp lý với td và khai báo thuộc tính cần thiết khi bảng có cấu trúc nhiều cấp.

Lời kết

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

★★★★★ ★★★★★
5/5 - (1 Đánh giá)
0 Bình luận

Bùi Tấn Lực

Tìm hiểu về CEO Bùi Tấn Lực, Founder Web Mới với nhiều năm kinh nghiệm trong lĩnh vực phát triển website, SEO và chia sẻ kiến thức công nghệ

Đánh giá

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 *

Bình luận, Hỏi đáp

Yêu Cầu Báo Giá

Gửi trang web mẫu cần làm theo, chúng tôi sẽ báo giá đến bạn từ Email (tanlucit09@gmail.com - Bùi Tấn Lực) hoặc Zalo (Lực IT - 0398259259) !