×

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

Avatar of admin
admin 0 Views

Khi xây dựng giao diện người dùng trong HTML, bạn sẽ thường xuyên phải quản lý và hiển thị dữ liệu dưới dạng bảng. Trong HTML, bảng dữ liệu được tạo ra bằng cách 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ẻ <tr> để tạo hàng trong bảng dữ liệu.

Tổng quan về bảng dữ liệu trong HTML

Trước khi đi sâu vào thẻ <tr>, hãy cùng nhìn qua cấu trúc cơ bản của một bảng dữ liệu trong HTML. Một bảng tiêu chuẩn sẽ bao gồm:

  • Thẻ <table>: Bao quanh toàn bộ bảng.
  • Thẻ <thead>: Chứa phần tiêu đề của bảng.
  • Thẻ <tbody>: Chứa nội dung dữ liệu của bảng.
  • Thẻ <tfoot>: Được sử dụng cho phần chân của bảng.

Dưới đây là ví dụ về cấu trúc bảng cơ bản:

<table>
  <thead>
    <tr>
      <th>Tiêu đề 1</th>
      <th>Tiêu đề 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Dữ liệu 1</td>
      <td>Dữ liệu 2</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Chân 1</td>
      <td>Chân 2</td>
    </tr>
  </tfoot>
</table>

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

Thẻ <tr> trong HTML được sử dụng để tạo một hàng (row) trong bảng. Thẻ này không bao gồm bất kỳ thuộc tính hay nội dung nào ngoài các thẻ con như <th> hoặc <td> để chỉ định các ô dữ liệu hoặc tiêu đề.

Tạo hàng tiêu đề với thẻ <tr> và <th>

Thẻ <th> (table header) được sử dụng bên trong thẻ <tr> để tạo các ô tiêu đề cho bảng. Ví dụ:

<table>
  <thead>
    <tr>
      <th>Tiêu đề Số 1</th>
      <th>Tiêu đề Số 2</th>
    </tr>
  </thead>
</table>

Tạo hàng dữ liệu với thẻ <tr> và <td>

Thẻ <td> (table data) được sử dụng trong thẻ <tr> để chứa dữ liệu thực tế. Ví dụ:

<table>
  <tbody>
    <tr>
      <td>Dữ liệu Số 1</td>
      <td>Dữ liệu Số 2</td>
    </tr>
    <tr>
      <td>Dữ liệu Số 3</td>
      <td>Dữ liệu Số 4</td>
    </tr>
  </tbody>
</table>

Kết hợp thẻ <thead>, <tbody>, và <tfoot>

Bạn có thể kết hợp cả ba phần tử này để tạo ra một bảng hoàn chỉnh hơn:

<table>
  <thead>
    <tr>
      <th>Tiêu đề 1</th>
      <th>Tiêu đề 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Dữ liệu 1</td>
      <td>Dữ liệu 2</td>
    </tr>
    <tr>
      <td>Dữ liệu 3</td>
      <td>Dữ liệu 4</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Chân 1</td>
      <td>Chân 2</td>
    </tr>
  </tfoot>
</table>

Thuộc tính của thẻ <tr>

Thẻ <tr> cũng hỗ trợ một số thuộc tính cơ bản như:

  • align: Để căn lề nội dung trong hàng.
  • bgcolor: Để đặt màu nền cho hàng.
  • valign: Để căn lề dọc của nội dung trong hàng.

Ví dụ:

<tr align="center" bgcolor="#f2f2f2" valign="middle">
  <td>Dữ liệu căn giữa</td>
  <td>Dữ liệu căn giữa</td>
</tr>

Kết luận

Thẻ <tr> là một phần quan trọng trong việc tạo bảng dữ liệu trong HTML. Bằng cách kết hợp thẻ <tr> với các thẻ <th> và <td>, bạn có thể dễ dàng tạo ra các bảng dữ liệu phức tạp và hiển thị thông tin một cách rõ ràng và có tổ chức. Hãy nhớ sử dụng các thuộc tính của thẻ <tr> để tinh chỉnh và tối ưu hóa bố cục của bảng dữ liệu sao cho phù hợp với yêu cầu cụ thể của bạn.

Comments

Bài viết liên quan