btvn.vn
Tìm kiếm Đăng nhập

Thực hành danh sách lồng và bảng lịch

Lưu trên thiết bị này
Danh sách và bảng HTML · Chọn bài khác

Chuẩn bị sản phẩm cần tạo

Nhiệm vụ: tạo trang “Sinh hoạt nhóm” với danh sách Đọc sách/Vẽ tranh như bài trước và bảng lịch minh họa bốn cột. Lịch có bốn hàng: hai hàng tiêu đề và hai hàng dữ liệu. Dấu X chỉ buổi có hoạt động trong lịch giả định. Mở tệp mẫu bằng trình soạn thảo văn bản thuần để đọc mã, hoặc nhập lại các phần vào tệp mới. Lưu UTF-8 với phần mở rộng .html rồi mở bằng trình duyệt. Tệp không cần kết nối Internet để hiển thị.

Mã bảng để đối chiếu

```html <table style="width:100%;border:1px solid blue"> <caption>Lịch hoạt động minh họa</caption> <tr> <th style="border:1px solid blue" rowspan="2">Nhóm</th> <th style="border:1px solid blue" colspan="3">Buổi</th> </tr> <tr> <th style="border:1px solid blue">Thứ 2</th> <th style="border:1px solid blue">Thứ 4</th> <th style="border:1px solid blue">Thứ 6</th> </tr> <tr> <td style="border:1px solid blue">Đọc sách</td> <td style="border:1px solid blue">X</td> <td style="border:1px solid blue"></td> <td style="border:1px solid blue">X</td> </tr> <tr> <td style="border:1px solid blue">Vẽ tranh</td> <td style="border:1px solid blue"></td> <td style="border:1px solid blue">X</td> <td style="border:1px solid blue"></td> </tr> </table> ``` Ở hai hàng tiêu đề, viền xanh được đặt riêng cho các th; ở hai hàng dữ liệu, đặt cho các td. Dữ liệu Đọc sách ứng với Thứ2/Thứ6; Vẽ tranh ứng với Thứ4. Các ô trống vẫn là các td, không bỏ đi rồi làm lệch cột.

Kiểm cấu trúc trước khi chỉnh cách trình bày

1. Kiểm ul ngoài có hai mục trực tiếp; Đọc sách chứa ol, còn mục Chuẩn bị trao đổi chứa ol kiểu a. Đổi một việc nhỏ rồi kiểm việc đó vẫn nằm đúng mục cha. 2. Kiểm caption đứng trước các hàng, bảng có bốn cột logic. Hai hàng tiêu đề lần lượt có hai và ba th; mỗi hàng dữ liệu có bốn td. 3. Đọc từng dấu X theo tên nhóm và ngày ở đầu cột. Giữ các ô trống để các giá trị còn lại không bị dịch. 4. Đổi màu viền một ô bằng style của chính ô ấy, lưu và tải lại. Kiểm nội dung và gộp ô vẫn giữ. Nếu bảng lệch cột, kiểm vị trí bị rowspan/colspan chiếm và các ô trống trước. Nếu không có viền ô, kiểm style trên ô thay vì chỉ nhìn style của table. Xem thêm ở màn hình hẹp vì nội dung dài có thể làm thay đổi độ rộng.

Bài luyện

Theo lịch mẫu, nhóm Đọc sách hoạt động vào hai buổi nào?
Chọn một đáp án

Bài luyện

Vì sao ô trống giữa hai dấu X của hàng Đọc sách vẫn cần một td?
Chọn một đáp án

Bài luyện

Để đổi viền riêng ô Vẽ tranh mà giữ các ô khác, cần sửa ở đâu?
Chọn một đáp án

Đang học