Cấu trúc bảng cơ bản trong HTML

Trong HTML, bảng (<table>) là một thành phần quan trọng giúp trình bày dữ liệu một cách trực quan. Bài học này sẽ giúp bạn hiểu cách tạo bảng, thêm hàng (<tr>), cột (<td>), và tiêu đề (<th>). Bạn cũng sẽ thực hành tạo bảng đơn giản để áp dụng kiến thức đã học.

1. Cấu trúc bảng cơ bản

Giới thiệu thẻ <table> và cách sử dụng

• Thẻ <table> được dùng để tạo bảng trong HTML.
• Bảng gồm nhiều hàng (<tr>) và mỗi hàng chứa các ô dữ liệu (<td>) hoặc tiêu đề (<th>).

Ví dụ về bảng đơn giản

<table border="1">
    <tr>
        <th>Họ và Tên</th>
        <th>Tuổi</th>
        <th>Thành phố</th>
    </tr>
    <tr>
        <td>Nguyễn Văn A</td>
        <td>25</td>
        <td>Hà Nội</td>
    </tr>
    <tr>
        <td>Trần Thị B</td>
        <td>22</td>
        <td>TP. Hồ Chí Minh</td>
    </tr>
</table>

Giải thích:

• <table>: Bắt đầu bảng.
• <tr>: Tạo một hàng trong bảng.
• <th>: Ô tiêu đề (hiển thị in đậm mặc định).
• <td>: Ô dữ liệu thông thường.
• border="1": Thêm viền cho bảng (dùng để quan sát rõ hơn).

Cách tạo hàng với <tr> và ô dữ liệu với <td>

• Mỗi hàng mới được tạo bằng thẻ <tr>.
• Bên trong <tr>, mỗi ô dữ liệu được đặt trong <td>.

Ví dụ: Bảng với nhiều hàng

<table border="1">
    <tr>
        <td>Hàng 1, Ô 1</td>
        <td>Hàng 1, Ô 2</td>
    </tr>
    <tr>
        <td>Hàng 2, Ô 1</td>
        <td>Hàng 2, Ô 2</td>
    </tr>
</table>

Lưu ý:

• Số lượng <td> trong mỗi <tr> nên đồng đều để bảng không bị lệch.

Sử dụng <th> để tạo tiêu đề bảng

• <th> giúp hiển thị tiêu đề của cột.
• Văn bản trong <th> mặc định sẽ in đậm và căn giữa.

Ví dụ: So sánh <th> và <td>

<table border="1">
    <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>

Lưu ý:

• Dùng <th> trong hàng đầu tiên (<tr>) để làm tiêu đề bảng.
• <th> giúp bảng dễ đọc hơn so với dùng toàn <td>.

2. Thực hành

Bài tập 1: Tạo một bảng danh sách sản phẩm có cột Tên sản phẩm, Giá, Số lượng, với ít nhất 3 dòng dữ liệu.
Bài tập 2: Thêm một hàng tiêu đề cho bảng bằng <th>.
Bài tập 3: Chỉnh sửa bảng sao cho cột Giá hiển thị in đậm bằng cách sử dụng <th>.

4. Kết luận

Sau bài học này, bạn đã:

• Hiểu cách tạo bảng bằng <table>.
• Biết cách sử dụng <tr> để tạo hàng và <td> để thêm dữ liệu.
• Biết cách sử dụng <th> để làm tiêu đề bảng giúp dễ đọc hơn.