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 nhanh: Theo em, khi trang web toàn văn bản thì nên trình bày thế nào?

📚 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ự: Thẻ <ol>
• Danh sách không thứ tự: Thẻ <ul>
• Danh sách mô tả: Thẻ <dl>, <dt>, <dd>

<ol>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ol>
  

🧠 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ẻ <table>, <tr>, <th>, <td>.

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

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

2.3. Gộp ô

<th rowspan="2">Họ tên</th>
<th colspan="2">Điểm</th>
  

🧩 Câu hỏi ngắn: 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)

Thời gian: 7 phút. Nhập tên học sinh để bắt đầu.

⏱ 07:00

---

Câu 1: Thẻ tạo danh sách có thứ tự là?

<ul>
<ol>
<li>

Câu 2: Thẻ dùng tạo danh sách không thứ tự là?

<ul>
<ol>

Câu 3: Thẻ dùng để tạo bảng trong HTML?

<th>
<td>
<tr>
<table>

Câu 4: Thẻ <th> dùng để tạo tiêu đề cột?

✅ Đúng
❌ Sai

Câu 5: Thuộc tính giúp gộp ô theo hàng là?

Câu 6: Thẻ dùng để gộp cột là?

rowspan
width
colspan

Câu 7: Thẻ <ul> tạo danh sách không có thứ tự.

✅ Đúng ❌ Sai

Câu 8: Thẻ <tr> dùng để tạo ô dữ liệu.

✅ Đúng ❌ Sai

Câu 9: Trong HTML, thẻ nào tạo bảng?

Câu 10: Trong bảng HTML, ô tiêu đề dùng thẻ gì?