Bài 9: Tạo danh sách và bảng

Môn: Tin học 12 | Thời lượng: 90 phút | SGK: Kết nối tri thức với cuộc sống

---

🎯 Mục tiêu bài học

• Hiểu được khái niệm danh sách (list) và bảng (table) trong HTML.
• Biết tạo danh sách có thứ tự, không thứ tự, mô tả.
• Biết tạo bảng và định dạng bảng bằng CSS hoặc thuộc tính style.
• Biết ứng dụng Python để sinh bảng HTML tự động.

📌 1. Khởi động

Quan sát hai đoạn văn bản sau:

1. Đoạn 1: Toàn bộ thông tin viết liền nhau, không có cấu trúc.
2. Đoạn 2: Thông tin được trình bày bằng danh sách và bảng.

💡 Câu hỏi tương tác: Theo em, khi trang web toàn văn bản thì nên trình bày thế nào để dễ nhìn?

📚 2. Kiến thức mới

2.1. Tạo danh sách (List)

Trong HTML, danh sách giúp sắp xếp nội dung thành các mục dễ đọc. Có 3 loại danh sách:

• Danh sách có thứ tự: Sử dụng thẻ <ol> (Ordered List).
• Danh sách không thứ tự: Sử dụng thẻ <ul> (Unordered List).
• Danh sách mô tả: Sử dụng thẻ <dl>, <dt>, <dd>.

<h3>Danh sách có thứ tự</h3>
<ol>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ol>

<h3>Danh sách không thứ tự</h3>
<ul>
  <li>Chuối</li>
  <li>Táo</li>
  <li>Cam</li>
</ul>
  

🧠 Kiểm tra nhanh: Thẻ nào dùng để tạo danh sách có thứ tự?

<ul>
<ol>
<li>

2.2. Tạo bảng (Table)

Bảng HTML được tạo bằng các thẻ sau:

• <table>: Tạo bảng.
• <tr>: Tạo hàng.
• <th>: Ô tiêu đề.
• <td>: Ô dữ liệu.

<table border="1">
  <tr><th>Họ tên</th><th>Toán</th><th>Lý</th></tr>
  <tr><td>Lan</td><td>9</td><td>8</td></tr>
</table>
  

Ví dụ hiển thị:

Họ tên	Toán	Lý
Lan	9	8

💬 Câu hỏi đúng/sai: Thẻ <th> dùng để tạo ô dữ liệu.

2.3. Gộp ô trong bảng

<table border="1">
  <tr>
    <th rowspan="2">Họ tên</th>
    <th colspan="2">Điểm</th>
  </tr>
  <tr><th>Toán</th><th>Lý</th></tr>
</table>
  

💡 Ghi nhớ: - Dùng rowspan để gộp hàng. - Dùng colspan để gộp cột.

🧠 3. Luyện tập

Bài 1: Tạo bảng điểm gồm 3 học sinh, mỗi cột là Toán – Lý – Hóa.

Bài 2: Dùng thuộc tính style để đổi màu viền bảng thành màu xanh.

💻 4. Vận dụng – Mở rộng

Ứng dụng Python để sinh tệp HTML tự động:

data = [
  ("Lan", 9, 8, 7),
  ("Mai", 8, 7, 8)
]
html = "<table border='1'><tr><th>Họ tên</th><th>Toán</th><th>Lý</th><th>Hóa</th></tr>"
for row in data:
  html += "<tr>" + "".join(f"<td>{c}</td>" for c in row) + "</tr>"
html += "</table>"
open("bang_diem.html","w",encoding="utf-8").write(html)
  

🧩 Câu hỏi ngắn: Trong bảng HTML, thuộc tính nào giúp gộp ô theo hàng?

---

🧩 TRẮC NGHIỆM TỔNG HỢP – BÀI 9 (6–2–2)