×

Cách sử dụng thẻ <thead> <tbody> <tfoot> để tạo cấu trúc bảng trong HTML

Avatar of admin
admin 0 Views

Trong lĩnh vực lập trình web, đặc biệt khi làm việc với HTML, việc tạo cấu trúc bảng hiển thị dữ liệu một cách rõ ràng và dễ quản lý là tối quan trọng. Để hỗ trợ cho việc này, HTML cung cấp các thẻ <thead>, <tbody>, và <tfoot>. Cùng khám phá cách sử dụng các thẻ này để tạo ra một bảng rõ ràng và dễ hiểu.

1. Thẻ <thead>

Thẻ <thead> được sử dụng để định nghĩa phần đầu của bảng, thường chứa hàng tiêu đề cho bảng. Các thông tin trong thẻ này thường bao gồm các tiêu đề cột giúp người xem dễ dàng xác định nội dung của mỗi cột.

Ví dụ:

<table>
    <thead>
        <tr>
            <th>Số thứ tự</th>
            <th>Tên sản phẩm</th>
            <th>Giá</th>
            <th>Số lượng</th>
        </tr>
    </thead>
</table>

Trong đoạn mã trên, <thead> chứa một hàng <tr> và các tiêu đề cột <th>.

2. Thẻ <tbody>

Thẻ <tbody> được sử dụng để chứa nội dung chính của bảng, tức là các dữ liệu hiển thị trong các hàng của bảng. Mỗi hàng dữ liệu sẽ nằm giữa các thẻ <tr>.

Ví dụ tiếp tục từ trên:

<table>
    <thead>
        <tr>
            <th>Số thứ tự</th>
            <th>Tên sản phẩm</th>
            <th>Giá</th>
            <th>Số lượng</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>Sản phẩm A</td>
            <td>100.000 VND</td>
            <td>20</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Sản phẩm B</td>
            <td>150.000 VND</td>
            <td>15</td>
        </tr>
    </tbody>
</table>

Trong đoạn mã này, <tbody> chứa hai hàng dữ liệu, mỗi hàng đại diện cho một sản phẩm với các thông tin tương ứng.

3. Thẻ <tfoot>

Thẻ <tfoot> được dùng để định nghĩa phần chân của bảng, thường chứa các thông tin tổng kết hoặc ghi chú liên quan đến bảng dữ liệu.

Tiếp tục ví dụ:

<table>
    <thead>
        <tr>
            <th>Số thứ tự</th>
            <th>Tên sản phẩm</th>
            <th>Giá</th>
            <th>Số lượng</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>Sản phẩm A</td>
            <td>100.000 VND</td>
            <td>20</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Sản phẩm B</td>
            <td>150.000 VND</td>
            <td>15</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td colspan="3">Tổng cộng</td>
            <td>35</td>
        </tr>
    </tfoot>
</table>

Ở ví dụ này, <tfoot> chứa một hàng tổng kết, nơi colspan="3" được sử dụng để làm cho ô kết quả chiếm ba cột.

4. Lợi ích của việc sử dụng <thead>, <tbody>, <tfoot>

  • Tương thích với các công cụ tìm kiếm: Các thẻ này giúp công cụ tìm kiếm hiểu rõ hơn cấu trúc dữ liệu của bạn.
  • Tính dễ bảo trì: Phân chia rõ ràng các phần của bảng giúp lập trình viên dễ dàng cập nhật và bảo trì mã nguồn.
  • Khả năng tùy biến: Sử dụng CSS để tùy biến các phần khác nhau của bảng một cách dễ dàng.
  • Khả năng truy cập: Giúp cho các thiết bị hỗ trợ người khuyết tật dễ dàng điều hướng và hiểu bảng dữ liệu.

Kết luận

Việc sử dụng các thẻ <thead>, <tbody>, và <tfoot> không chỉ giúp bảng của bạn trở nên rõ ràng và dễ đọc hơn mà còn mang lại nhiều lợi ích về tính tương thích, dễ bảo trì, và khả năng tùy biến cao. Hy vọng thông tin trên đã giúp bạn hiểu rõ cách sử dụng những thẻ này để xây dựng và quản lý bảng trong HTML.

Comments

Bài viết liên quan