Giải chi tiết Tin học ứng dụng 12 KNTT bài 9 Tạo danh sách, bảng

KHỞI ĐỘNG

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?

Bài làm chi tiết:

Theo em, khi trang web chỉ toàn các đoạn văn bản thì chúng ta có thể tạo các danh sách, bảng.

1. TẠO DANH SÁCH

Hoạt động 1: Nhận biết phần tử từ danh sách

Em hãy quan sát hình 8.3 và nhận xét em có điểm nào có thể cải tiến về mặt trình bày không.

Bài làm chi tiết:

Theo em, điểm cần thay đổi về mặt trình bày là thứ tự sai, phông chữ không đều, bôi đen những chỗ không hợp lý.

Câu hỏ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 dạng a, b, c.

Bài làm chi tiết:

Cách để 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 dạng a, b, c, ta có thể sử dụng các thẻ HTML như sau:

Khi đó kết quả trả về là:

2. THIẾT LẬP BẢNG

Hoạt động 2: Lựa chọn định dạng phù hợp nhất

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?

Bài làm chi tiết:

Theo em, nên sử dụng bảng bởi vì: dễ quan sát, cập nhật và các thao tác tính toán.

Câu hỏi: Bảng trong ví dụ trên Hình 9.6 có nhược điểm gì? Cần làm thế nào để giải quyết nhược điểm đó?

Bài làm chi tiết:

Quan sát hình, em thấy có nhược điểm là cột "Họ và tên" bị mất trong các ô dưới. Điều này xảy ra vì bạn đã sử dụng thuộc tính rowspan="2" trong thẻ <th> của cột này. Khi sử dụng rowspan="2", cột sẽ trải dài qua hai hàng, và do đó, phần tử con bên trong cột không được hiển thị.

Có thể sửa lại bằng các thẻ HTML như sau:

Kết quả trả về:

LUYỆN TẬP

Sửa lại chương trình trong Hình 9.5a, sử dụng thuộc tính style thay vì thuộc tính border để tạo viền cho bảng. Sử dụng màu xanh cho viền của ô hai dòng đầu bảng và sử dụng ba màu đỏ, vàng, xanh cho ba chữ Toán, Vật lí và Hoá học.

Bài làm chi tiết:

Ta có mã HTML như sau:

Kết quả ta có được sau khi ấn mã là:

VẬN DỤNG

Cho trước một bảng dữ liệu cỡ n x 4, mỗi hàng tương ứng với một bộ (họ tên, điểm Toán, điểm Vật lí, điểm Hoá học). Viết chương trình Python để tạo ra tệp HTML thực hiện việc vẽ bảng tương tự như Hình 9.5 và bổ sung dữ liệu vào các hàng phía dưới.

Bài làm chi tiết:

HTML để tạo bảng, ta có kết quả sau:

Kết quả trả về: