Bài 3: Bảng (Table) trong HTML
🎯 Mục tiêu
- Biết tạo bảng bằng các thẻ
table,tr,th,td - Hiểu cấu trúc hàng – cột trong bảng
- Biết gộp ô bằng
colspan,rowspan - Trang trí bảng cơ bản bằng CSS
📘 Lý thuyết ngắn
1) Cấu trúc cơ bản của bảng
<table>
<tr>
<th>Tiêu đề cột</th>
<th>Tiêu đề cột</th>
</tr>
<tr>
<td>Dữ liệu</td>
<td>Dữ liệu</td>
</tr>
</table>
2) Ý nghĩa các thẻ
table: tạo bảngtr(table row): một hàngth(table header): ô tiêu đề (in đậm)td(table data): ô dữ liệu
3) Gộp ô
colspan: gộp nhiều cộtrowspan: gộp nhiều hàng
💻 Code mẫu (bảng danh sách học sinh)
<!doctype html>
<html lang="vi">
<head>
<meta charset="utf-8">
<title>Bài 3 - Bảng HTML</title>
<style>
body {
font-family: Arial;
padding: 24px;
background: #f7f8fa;
}
h1 {
text-align: center;
}
table {
width: 100%;
max-width: 800px;
margin: 20px auto;
border-collapse: collapse;
background: #ffffff;
}
th, td {
border: 1px solid #ddd;
padding: 12px;
text-align: left;
}
th {
background: #111;
color: #fff;
}
tr:nth-child(even) td {
background: #f3f4f6;
}
caption {
caption-side: bottom;
padding: 10px;
color: #555;
font-style: italic;
}
</style>
</head>
<body>
<h1>Danh sách học sinh</h1>
<table>
<tr>
<th>STT</th>
<th>Họ tên</th>
<th>Lớp</th>
<th>Ghi chú</th>
</tr>
<tr>
<td>1</td>
<td>Nguyễn Văn A</td>
<td>10A1</td>
<td>Đi học đầy đủ</td>
</tr>
<tr>
<td>2</td>
<td>Trần Thị B</td>
<td>10A2</td>
<td>Học tốt</td>
</tr>
<tr>
<td colspan="3"><b>Tổng số học sinh</b></td>
<td>2</td>
</tr>
</table>
</body>
</html>
👉 Copy code → lưu thành bai3.html → mở bằng Chrome để xem kết quả.
✍️ Bài tập
- Thêm ít nhất 2 học sinh mới vào bảng.
- Thêm một cột mới tên là Điểm TB.
- Sửa hàng “Tổng số học sinh” cho đúng số lượng.
- (Nâng cao) Gộp 2 hàng đầu bằng
rowspan.
✅ Đáp án gợi ý
<tr>
<td rowspan="2">1</td>
<td>Nguyễn Văn A</td>
<td>10A1</td>
<td>8.5</td>
</tr>
<tr>
<td colspan="3">Học sinh giỏi</td>
</tr>
📌 Danh sách bình luận