×

Cách sử dụng thẻ <th> để tạo tiêu đề cột trong bảng HTML

Avatar of admin
admin 2 Views

Việc sử dụng các thẻ HTML để tạo bảng dữ liệu là một phần quan trọng trong việc tổ chức và hiển thị thông tin trên trang web. Đặc biệt, thẻ <th> rất hữu ích khi bạn muốn tạo tiêu đề cho các cột trong một bảng, giúp người dùng dễ dàng hiểu thông tin mà bảng đang hiển thị.

Định Nghĩa Thẻ <th>

Thẻ <th> là viết tắt của "table header" và được sử dụng để xác định tiêu đề của một cột hoặc hàng trong bảng. Các giá trị trong thẻ này thường được hiển thị dưới dạng chữ in đậm và canh giữa nhằm phân biệt với các dữ liệu thông thường.

Cú Pháp Cơ Bản

<table>
  <tr>
    <th>Tiêu đề 1</th>
    <th>Tiêu đề 2</th>
    <th>Tiêu đề 3</th>
  </tr>
  <tr>
    <td>Thông tin 1</td>
    <td>Thông tin 2</td>
    <td>Thông tin 3</td>
  </tr>
</table>

Trong đoạn mã này, <tr> được sử dụng để xác định một hàng (table row) và <td> để xác định một ô chứa dữ liệu (table data). Thẻ <th> nằm bên trong thẻ <tr>, thường là hàng đầu tiên của bảng, để xác định tiêu đề các cột.

Các Thuộc Tính Của Thẻ <th>

  1. scope: Thuộc tính này được sử dụng để chỉ rõ phạm vi của ô tiêu đề. Các giá trị hợp pháp bao gồm:
    • col: Tiêu đề cho cột (mặc định).
    • row: Tiêu đề cho hàng.
    • colgroup: Tiêu đề cho nhóm cột.
    • rowgroup: Tiêu đề cho nhóm hàng.
<table>
  <tr>
    <th scope="col">Tiêu đề 1</th>
    <th scope="col">Tiêu đề 2</th>
    <th scope="col">Tiêu đề 3</th>
  </tr>
  ...
</table>
  1. colspan và rowspan: Những thuộc tính này được sử dụng để mở rộng ô tiêu đề qua nhiều cột hoặc hàng.
    • colspan: Số cột mà ô sẽ chiếm.
    • rowspan: Số hàng mà ô sẽ chiếm.
<table>
  <tr>
    <th colspan="2">Tiêu đề ghép 2 cột</th>
    <th rowspan="2">Tiêu đề ghép 2 hàng</th>
  </tr>
  ...
</table>

Ứng Dụng Trong Thiết Kế Bảng

Khi thiết kế bảng, thẻ tiêu đề có thể được sử dụng ở nhiều vị trí khác nhau tuỳ theo mục đích của người thiết kế. Ví dụ, tiêu đề có thể đặt ở đầu mỗi hàng để mô tả dữ liệu trong từng hàng.

<table>
  <tr>
    <th>Tiêu đề cột 1</th>
    <th>Tiêu đề cột 2</th>
  </tr>
  <tr>
    <th scope="row">Tiêu đề hàng 1</th>
    <td>Dữ liệu A1</td>
    <td>Dữ liệu A2</td>
  </tr>
  <tr>
    <th scope="row">Tiêu đề hàng 2</th>
    <td>Dữ liệu B1</td>
    <td>Dữ liệu B2</td>
  </tr>
</table>

Việc sử dụng thẻ tiêu đề một cách hợp lý giúp cải thiện khả năng truy cập và cung cấp thông tin rõ ràng cho người dùng. Khi các thiết bị hỗ trợ truy cập (như trình đọc màn hình) đọc bảng, chúng có thể sử dụng thông tin từ thẻ tiêu đề để cung cấp ngữ cảnh cho dữ liệu trong bảng, giúp người dùng dễ dàng hiểu nội dung hiển thị hơn.

Tùy Chỉnh Giao Diện Với CSS

Ngoài việc sử dụng tùy chỉnh cơ bản của HTML, bạn cũng có thể sử dụng CSS để thay đổi giao diện của thẻ tiêu đề nhằm phù hợp với thẩm mỹ của trang web.

<style>
  th {
    background-color: #f2f2f2;
    color: #333333;
    padding: 10px;
    text-align: center;
    border: 1px solid #ddd;
  }
</style>

Đoạn CSS trên thay đổi màu nền, màu chữ, khoảng cách bên trong và đường viền của các thẻ tiêu đề, giúp chúng nổi bật hơn trong bảng dữ liệu.

Kết Luận

Việc sử dụng thẻ <th> một cách đúng đắn không chỉ giúp tổ chức dữ liệu một cách rõ ràng mà còn cải thiện trải nghiệm người dùng và khả năng truy cập của trang web. Từ việc định nghĩa các tiêu đề cột/hàng đến tùy chỉnh giao diện với CSS, khả năng của thẻ tiêu đề là khá đa dạng, mang lại nhiều lợi ích cho việc trình bày thông tin.

Comments

Bài viết liên quan