×

Cách sử dụng thẻ <td> để tạo ô dữ liệu trong bảng HTML

Avatar of admin
admin 7 Views

Trong thiết kế trang web, bảng (table) đóng vai trò quan trọng trong việc trình bày thông tin một cách có cấu trúc. Để tạo bảng trong HTML, người ta thường sử dụng các thẻ <table>, <tr>, <th>, và <td>. Trong bài viết này, chúng ta sẽ tập trung vào cách sử dụng thẻ <td> để tạo ô dữ liệu trong bảng.

Cấu trúc cơ bản của bảng

Trước khi đi sâu vào chi tiết về thẻ <td>, hãy cùng tìm hiểu về cấu trúc cơ bản của một bảng HTML. Một bảng cơ bản gồm các thành phần như sau:

  1. Thẻ <table>: Bao bọc toàn bộ nội dung của bảng.
  2. Thẻ <tr>: Đại diện cho một hàng trong bảng. Mỗi một hàng sẽ nằm bên trong thẻ <table>.
  3. Thẻ <th>: Được sử dụng để tạo cell tiêu đề cho bảng.
  4. Thẻ <td>: Thẻ này được sử dụng để tạo các ô dữ liệu trong bảng.

Dưới đây là một ví dụ đơn giản:

<table>
  <tr>
    <th>Cột 1</th>
    <th>Cột 2</th>
  </tr>
  <tr>
    <td>Ô 1.1</td>
    <td>Ô 1.2</td>
  </tr>
  <tr>
    <td>Ô 2.1</td>
    <td>Ô 2.2</td>
  </tr>
</table>

Thẻ <td> là gì?

Thẻ <td> là viết tắt của "table data". Nó được dùng để chứa dữ liệu của từng ô trong một hàng của bảng. Mỗi một thẻ <td> đại diện cho một cell hoàn chỉnh trong bảng.

Cách sử dụng thẻ <td>

Một ô dữ liệu được tạo ra bằng cặp thẻ mở <td> và thẻ đóng </td>. Nội dung của ô sẽ nằm giữa cặp thẻ này. Cùng xem qua ví dụ sau để hiểu rõ hơn:

<table>
  <tr>
    <td>Ô 1.1</td>
    <td>Ô 1.2</td>
    <td>Ô 1.3</td>
  </tr>
  <tr>
    <td>Ô 2.1</td>
    <td>Ô 2.2</td>
    <td>Ô 2.3</td>
  </tr>
</table>

Trong ví dụ này, chúng ta có hai hàng (<tr>) và mỗi hàng chứa ba ô dữ liệu (<td>).

Các thuộc tính phổ biến của thẻ <td>

Mặc dù thẻ <td> không yêu cầu phải có thuộc tính nào, nhưng có một số thuộc tính tùy chọn giúp kiểm soát cách hiển thị của các ô dữ liệu:

  • colspan: Xác định số lượng cột mà một ô dữ liệu sẽ chiếm. Ví dụ:

    <td colspan="2">Ô 1.1 và 1.2</td>

    Ô trên sẽ chiếm hai cột thay vì một.

  • rowspan: Xác định số lượng hàng mà một ô dữ liệu sẽ chiếm. Ví dụ:

    <td rowspan="2">Ô 1.1 và 2.1</td>

    Ô trên sẽ chiếm hai hàng thay vì một.

  • align và valign: Xác định cách canh lề ngang (trái, phải, giữa) và lề dọc (trên, dưới, giữa).

    <td align="right" valign="middle">Ô căn phải giữa</td>

  • style: Áp dụng các kiểu dáng CSS trực tiếp vào ô dữ liệu. Ví dụ:

    <td style="color: red; background-color: yellow;">Ô có nền vàng và chữ đỏ</td>

Kết luận

Thẻ <td> là một phần quan trọng trong việc tạo bảng HTML. Nó cho phép chúng ta hiển thị dữ liệu dưới dạng các ô trong một cấu trúc bảng linh hoạt và dễ hiểu. Sử dụng thẻ <td> cùng với các thuộc tính bổ trợ giúp bạn kiểm soát tốt hơn về cách hiển thị dữ liệu trong bảng, từ đó nâng cao trải nghiệm người dùng khi truy cập trang web.

Hy vọng bài viết này đã cung cấp cho bạn cái nhìn rõ ràng và chi tiết về cách sử dụng thẻ <td> trong HTML. Chúc bạn thành công trong việc xây dựng các bảng dữ liệu!

Comments

Bài viết liên quan