Câu hỏi tự luận mức độ vận dụng cao Khoa học máy tính 12 ctst bài F3: Tạo bảng và khung trong trang web HTML

Câu 1: 

- Sử dụng tiêu đề rõ ràng: Sử dụng thẻ <th> cho các ô tiêu đề để người dùng dễ dàng hiểu nội dung của các cột và hàng.

- Đảm bảo khoảng cách hợp lý: Sử dụng thuộc tính cellpadding và cellspacing để tạo không gian giữa các ô và nội dung, giúp bảng dễ đọc hơn.

- Sử dụng các thuộc tính khả năng truy cập: Thêm thuộc tính scope vào thẻ <th> để xác định phạm vi của tiêu đề (hàng hay cột) nhằm hỗ trợ trình đọc màn hình.

- Thiết kế responsive: Sử dụng CSS để đảm bảo bảng hiển thị tốt trên các thiết bị khác nhau.

Câu 2: 

- Responsive Web Design (RWD) là phương pháp thiết kế web cho phép trang web tự động điều chỉnh bố cục và nội dung dựa trên kích thước màn hình của thiết bị. Để thiết kế bảng HTML phù hợp với RWD, có thể sử dụng:

- CSS Media Queries: Để điều chỉnh kiểu dáng của bảng dựa trên kích thước màn hình.

- Thẻ <div> và CSS Flexbox/Grid: Thay vì sử dụng bảng truyền thống, có thể sử dụng CSS Flexbox hoặc Grid để tạo bố cục linh hoạt hơn.

- Cuộn ngang: Sử dụng thuộc tính overflow-x: auto; cho bảng để cho phép cuộn ngang trên các thiết bị màn hình nhỏ.

Câu 3: 

*Thách thức:

+ Tốc độ tải trang: Bảng lớn có thể làm chậm tốc độ tải trang do kích thước dữ liệu lớn.

+ Khả năng đọc: Bảng lớn có thể khó đọc và điều hướng, đặc biệt trên thiết bị di động.

+ Hiệu suất trình duyệt: Trình duyệt có thể gặp khó khăn khi xử lý bảng lớn, dẫn đến trải nghiệm người dùng kém.

*Cách tối ưu hóa:

+ Phân trang: Chia bảng thành nhiều trang nhỏ hơn để giảm tải dữ liệu mỗi lần.

+ Lazy Loading: Tải dữ liệu khi người dùng cuộn xuống thay vì tải toàn bộ ngay từ đầu.

+ Sử dụng AJAX: Tải dữ liệu bảng từ máy chủ một cách động khi cần thiết.

Câu 4: 

+ border-collapse: Kết hợp viền của các ô lại với nhau.

+ padding: Tạo khoảng cách giữa nội dung và viền ô.

+ background-color: Thay đổi màu nền của ô.

+ text-align: Căn chỉnh văn bản trong ô.

+ hover effects: Thay đổi màu sắc khi di chuột qua ô.