| Tạo bảng | | Tạo một hàng (table row) | | Tạo ô dữ liệu (table data) | | | | Tạo ô tiêu đề (table header) | |
💡 Mẹo nhớ: - ol = ordered list (có thứ tự) → o tròn như số. - ul = unordered list (không thứ tự). - dl/dt/dd = description list / term / data (mô tả/thuật ngữ/định nghĩa). - tr = row (hàng), td = data (ô), th = header (tiêu đề).
⚙️ Bài tập
Câu khởi động (trang 52)
Đề bài: Theo em, khi trang web chỉ toàn các đoạn văn bản thì cần trình bày thế nào cho dễ nhìn?
Trả lời:
Khi trang web chỉ toàn đoạn văn bản dài, người đọc khó theo dõi và dễ bị rối mắt. Để dễ nhìn hơn, ta nên:
- Chia nhỏ nội dung, liệt kê các ý thành danh sách (có thứ tự hoặc không có thứ tự) thay vì viết liền thành đoạn dài.
- Với dữ liệu có nhiều thuộc tính (tên – giá – số lượng...), trình bày dưới dạng bảng để so sánh dễ dàng.
- Dùng tiêu đề (
- In đậm/nghiêng những từ khóa quan trọng, kết hợp khoảng trắng và hình ảnh minh họa hợp lý.
Tóm lại, dùng danh sách và bảng giúp nội dung được nhóm gọn, có cấu trúc rõ ràng và trực quan hơn.
Hoạt động 1 — Nhận biết phần tử danh sách (trang 52)
Đề bài: Em hãy quan sát Hình 8.3 và nhận xét xem có điểm nào có thể cải tiến về mặt trình bày không.
Trả lời:
(Hình 8.3 là nội dung trình bày dạng đoạn văn bản ở bài trước.) Có thể cải tiến như sau:
- Những nội dung đang được viết thành các câu/đoạn liệt kê liền nhau (ví dụ: "Nếu delta < 0...", "Nếu delta = 0...", "Nếu delta > 0...") nên chuyển thành danh sách để mỗi trường hợp nằm trên một dòng riêng, có kí tự/số đầu dòng.
- Như vậy người đọc nhìn vào sẽ thấy ngay số lượng mục và phân biệt rõ từng trường hợp, thay vì phải đọc hết cả đoạn.
💡 Mẹo nhớ: Khi thấy nội dung có dạng "liệt kê nhiều mục cùng loại" → nghĩ ngay đến việc dùng
Câu hỏi giữa bài (trang 53)
Đề bài: Làm thế nào để tạo một danh sách lồng nhau, danh sách mức 1 đánh số dạng 1, 2, 3,... và danh sách mức 2 đánh số dạng a, b, c?
Trả lời:
Ta dùng danh sách lồng nhau: danh sách mức 1 dùng
Cách 1 — Viết đoạn mã HTML đầy đủ
- Mục thứ nhất
- Mục con a
- Mục con b
- Mục con c
- Mục thứ hai
- Mục con a
- Mục con b
Kết quả hiển thị:
1. Mục thứ nhất
a. Mục con a
b. Mục con b
c. Mục con c
2. Mục thứ hai
a. Mục con a
b. Mục con b
Cách 2 — Ghi nhớ nguyên tắc chung (cách nhanh)
- Lồng nhau = đặt danh sách con vào bên trong cặp
- ...
- Chọn kiểu đánh số = đặt thuộc tính
type cho từng thẻ
- Mức 1:
type="1" → 1, 2, 3, ... - Mức 2:
type="a" → a, b, c, ...
⚠️ Lưu ý thi: Lỗi hay gặp là đặt thẻ
Hoạt động 2 — Lựa chọn định dạng phù hợp nhất (trang 53)
Đề bài: Trong Hội chợ ẩm thực ở trường, lớp 12E dự định bán một số món, các bạn muốn đăng trên trang web của lớp các thông tin: món ăn, đơn giá, số lượng và tổng số tiền. Theo em, các bạn nên dùng dạng biểu diễn nào: danh sách, danh sách mô tả hay bảng? Tại sao?
Trả lời:
Nên dùng bảng.
Lí do:
- Dữ liệu ở đây gồm nhiều thuộc tính cho mỗi món: tên món ăn, đơn giá, số lượng, tổng số tiền — tức là có cấu trúc theo hàng (mỗi món) và cột (mỗi loại thông tin). Đây chính là trường hợp bảng được thiết kế để xử lý.
- Danh sách (
- Danh sách mô tả (
- Với bảng, người xem dễ so sánh giá, số lượng giữa các món và tính/đối chiếu tổng tiền theo từng hàng.
Minh họa cấu trúc bảng:
| Món ăn |
Đơn giá |
Số lượng |
Tổng số tiền |
| Kem |
15 000 |
20 |
300 000 |
| Trà sữa |
20 000 |
30 |
600 000 |
💡 Mẹo nhớ: Dữ liệu có dạng "bảng số liệu / nhiều cột so sánh" → chọn . Dữ liệu "liệt kê các ý" → chọn
🎯 Ghi nhớ: - Trong HTML định nghĩa danh sách có thứ tự, không thứ tự và mô tả bằng các thẻ
type ("1","A","a","I","i") và điểm bắt đầu bằng start. - list-style-type (disc, circle, square, none). - Danh sách lồng nhau = đặt danh sách con bên trong |
