Thực hành: Viết đoạn mã HTML để tạo trang 28 SBT Tin học 12
Câu 9.10 trang 28 SBT Tin học 12: Thực hành: Viết đoạn mã HTML để tạo:
A. Một bảng kích thước 6 x 4 (ô) có độ rộng bằng 100% chiều rộng của màn hình.
B. 4 cột trong đó cột 1 có độ rộng 40%, các cột 2, 3, 4 có độ rộng 20% chiều rộng bảng.
C. Gộp hai ô 2, 3 và ba ô 4, 5, 6 của cột 1.
D. gộp các ô 3, 4 của cột 3 và cột 5
E. Thiết lập đường viền cho bảng
F. đặt tiêu đề cho bảng lả Bảng 1
Lời giải:
Hướng dẫn:
A. Các bước thực hiện lần lượt là: viết cặp thẻ
tạo bảng có độ rộng bằng 100% màn hình. Ở giữa hai thẻ ta viết sáu cặp tương ứng với sáu dòng; giữ mỗi cặp tr, ta viết bốn cặp
Lưu ý:
- Nếu không thêm dữ liệu vào bảng, để nhìn thấy kết quả cần đặt thuộc tính border = "1".
- Để dễ quan sát cấu trúc bảng có thể thêm thuộc tính height cho bảng hoặc bổ sung dữ liệu cho các ô trong bảng.
- Ta có thể sử dụng cặp thẻ
Nên xuống dòng khi sang định nghĩa mới (ô mới, dòng mới) để đoạn mã dễ nhin, dễ kiểm tra.
B. Để cột 1 có độ rộng 40%: thêm style=“width:40%” vào thẻ td đầu tiên của hàng. Thêm style=“width:20%” vào các thẻ td còn lại của hàng.
Lưu ý: Chỉ cần thêm vào 1 hàng, không cần phải thêm vào tất cả các hàng.
C. Để gộp các ô trên cùng cột, tức là một ô sẽ gồm nhiều hàng khác nhau. Ta sử dụng thuộc tính rowspan.
Cụ thể:
– Thêm vào thuộc tính rowspan="2” vào thẻ
– Thêm vào thuộc tính rowspan="3" vào thẻ
đã được gộp vào các ô ở bước trên).
Lưu ý: Nếu không xoá, cấu trúc bảng sẽ bị sai.
D. Để gộp các ô trên cùng hàng, tức là một ô sẽ gồm nhiều cột khác nhau. Ta sử dụng thuộc tính colspan. Trong các hàng thứ ba và thứ năm hiện tại, các ô định nghĩa với thẻ td nằm ở cột 2, 3 và 4. Do vậy ô 3 và 4 trong hai hàng này định nghĩa bởi thẻ td thứ hai và thứ ba.
Cụ thể:
Thêm vào thuộc tính colspan="2" vào thẻ
– Xoá cặp thẻ td cuối cùng trong các thẻ tr thứ ba và thứ năm.
E. Đường viền của bảng có thể thiết lập bằng cách:
– Thêm thuộc tính border = “1” vào trong thẻ