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?

Giải rút gọn:

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.

Giải rút gọn:

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.

Giải rút gọn:

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?

Giải rút gọn:

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 đó?

Giải rút gọn:

Nhược điểm: 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.

Giải rút gọn:

Mã HTML:

Kết quả trả về:

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.

Giải rút gọn:

HTML để tạo bảng:

Kết quả trả về: