×

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

Avatar of admin
admin 0 Views

Khi xây dựng trang web, việc tạo ra các bảng dữ liệu là một yêu cầu khá phổ biến, nhất là với những website cung cấp thông tin có cấu trúc như bảng giá, lịch biểu, hay thống kê. Để tạo bảng dữ liệu trong HTML, thẻ <table> là công cụ quan trọng bởi tính năng cụ thể và dễ sử dụng của nó.

Dưới đây là hướng dẫn chi tiết cách sử dụng thẻ này để tạo các bảng dữ liệu cơ bản đến nâng cao.

1. Cấu trúc cơ bản của thẻ <table>

Một bảng dữ liệu trong HTML gồm nhiều thành phần khác nhau, mỗi thành phần này được thể hiện bằng các thẻ con bên trong thẻ <table>. Dưới đây là cấu trúc cơ bản:

<table>
    <tr>
        <th>Tiêu đề 1</th>
        <th>Tiêu đề 2</th>
    </tr>
    <tr>
        <td>Dữ liệu 1</td>
        <td>Dữ liệu 2</td>
    </tr>
</table>

2. Thẻ <tr>, <th> và <td>

  • Thẻ <tr> (Table Row): đại diện cho một hàng trong bảng.
  • Thẻ <th> (Table Header): đại diện cho tiêu đề của cột, thường dùng để biểu thị thông tin đầu cột, và mặc định là in đậm và canh giữa.
  • Thẻ <td> (Table Data): đại diện cho mỗi ô dữ liệu trong bảng.

3. Thêm thuộc tính cho bảng

Để tăng tính thẩm mỹ và rõ ràng, có thể thêm các thuộc tính như border, cellpadding, cellspacing, và width.

<table border="1" cellpadding="10" cellspacing="0" width="100%">
    <tr>
        <th>Tiêu đề 1</th>
        <th>Tiêu đề 2</th>
    </tr>
    <tr>
        <td>Dữ liệu 1</td>
        <td>Dữ liệu 2</td>
    </tr>
</table>
  • border: thêm đường viền cho bảng.
  • cellpadding: khoảng cách giữa nội dung của ô và viền ô.
  • cellspacing: khoảng cách giữa các ô.
  • width: chiều rộng của bảng.

4. Hợp nhất các ô: colspan và rowspan

Đôi lúc, bạn cần hợp nhất các ô để thể hiện dữ liệu phức tạp hơn. Thuộc tính colspan và rowspan giúp thực hiện điều này.

<table border="1">
    <tr>
        <th rowspan="2">Tiêu đề 1</th>
        <th colspan="2">Tiêu đề 2</th>
    </tr>
    <tr>
        <td>Dữ liệu 1.1</td>
        <td>Dữ liệu 1.2</td>
    </tr>
    <tr>
        <td>Dữ liệu 2</td>
        <td>Dữ liệu 2.1</td>
        <td>Dữ liệu 2.2</td>
    </tr>
</table>
  • rowspan: hợp nhất các ô theo hàng dọc.
  • colspan: hợp nhất các ô theo hàng ngang.

5. Kết hợp với CSS

Để tạo bảng dữ liệu đẹp mắt và chuyên nghiệp hơn, có thể kết hợp với CSS:

<style>
    table {
        width: 100%;
        border-collapse: collapse;
    }
    th, td {
        border: 1px solid black;
        padding: 10px;
        text-align: center;
    }
    th {
        background-color: #f2f2f2;
    }
</style>

<table>
    <tr>
        <th>Tiêu đề 1</th>
        <th>Tiêu đề 2</th>
    </tr>
    <tr>
        <td>Dữ liệu 1</td>
        <td>Dữ liệu 2</td>
    </tr>
</table>
  • border-collapse: kết hợp các đường viền của bảng và ô thành một đường viền duy nhất.
  • padding: khoảng cách giữa nội dung và viền ô.
  • text-align: căn chỉnh văn bản trong ô.
  • background-color: màu nền của tiêu đề cột.

6. Kết luận

Thẻ <table> là công cụ mạnh mẽ và linh hoạt trong HTML để tạo các bảng dữ liệu. Dù đơn giản hay phức tạp, nó đều cung cấp đầy đủ các công cụ cần thiết để xây dựng các bảng dữ liệu hiệu quả. Hơn nữa, việc kết hợp với CSS giúp bảng dữ liệu trở nên sinh động và thẩm mỹ hơn. Hi vọng bài viết này sẽ giúp bạn nắm vững cách sử dụng thẻ <table> trong HTML.

Comments

Bài viết liên quan