💡 Tôi đã chuẩn bị sẵn trình soạn thảo bên dưới bài viết. Bạn có thể thử nghiệm thoải mái!

Cập nhật: 2025年3月1日

Bảng dữ liệu (Table)

📌

Kết luận

Tạo bảng bằng bộ ba <table>, <tr>, <td>

Để hiển thị dữ liệu dưới dạng bảng biểu trong HTML, chúng ta sử dụng các thẻ table.

📝 Mã thực tế tại đây

<table>
  <tr><td>A</td><td>B</td></tr>
  <tr><td>C</td><td>D</td></tr>
</table>

Cấu trúc của một bảng

Bảng được tạo thành từ sự kết hợp của 3 loại thẻ:

Thẻ	Ý nghĩa	Vai trò
`<table>`	Table	Khung bên ngoài của toàn bộ bảng
`<tr>`	Table Row	Hàng (dòng nằm ngang)
`<td>`	Table Data	Ô dữ liệu (từng ô trong hàng)

Hãy tưởng tượng cấu trúc lồng nhau: bên trong table có các tr, và bên trong mỗi tr có các td.

Ô tiêu đề `<th>`

Nếu bạn muốn hàng đầu tiên là các tiêu đề in đậm, hãy dùng thẻ <th> (table header) thay cho <td>.

📝 Mã thực tế tại đây

<table>
  <tr><th>Tên</th><th>Tuổi</th></tr>
  <tr><td>An</td><td>20</td></tr>
</table>

⚠️ Đừng dùng bảng để dàn trang

Ngày xưa người ta thường dùng table để tạo bố cục cho toàn bộ trang web, nhưng hiện nay điều đó là hoàn toàn không nên. Hãy dùng Flexbox hoặc Grid để dàn trang, và chỉ dùng table cho mục đích hiển thị dữ liệu bảng biểu.

Tổng kết

- Bảng có cấu trúc 3 tầng: <table> > <tr> > <td> - Dùng thẻ <th> cho các ô tiêu đề - Chỉ dùng cho dữ liệu, không dùng để dàn trang bố cục

Hãy thử trong phần bài tập

Hãy thử tạo một bảng gồm 2 hàng và 2 cột nhé.

🧪 Thử nghiệm tại đây

Bạn có thể viết mã thực tế vào trình soạn thảo bên dưới và xem ngay kết quả. Đừng sợ làm hỏng, bạn có thể thử lại bao nhiêu lần tùy thích.

Thử ngay

■ Bài tập thực hành

Hãy tạo một bảng gồm 2 hàng và 2 cột. Nội dung trong các ô có thể viết tùy ý.

Gợi ý khi gặp khó khăn