💡 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: 31 tháng 5 năm 2026
Bảng dữ liệu (Table) | Cách viết
📌
Kết luận
Tạo bảng bằng bộ ba <table>, <tr>, <td>
📝 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) |
Ô 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.
■ 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
Sử dụng các thẻ table, tr, td.