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?
Ô Thứ4 của nhóm Đọc sách để trống.
Ô Thứ4 của nhóm Đọc sách để trống.
Đúng. Hai dấu X nằm dưới Thứ2 và Thứ6.
Thứ4 là lịch của nhóm Vẽ tranh trong mẫu.
Lời giải
Đọc hàng Đọc sách theo ba cột ngày: X, trống, X. Đối chiếu các tiêu đề Thứ2, Thứ4, Thứ6, hai buổi của nhóm là Thứ2 và Thứ6.
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?
Đúng. Ô trống vẫn chiếm vị trí trong hàng dữ liệu.
Ô trống không tự thêm dấu X.
Không cần ol trong ô trống này.
Thêm td không tạo hàng tr mới.
Lời giải
Hàng dữ liệu có bốn cột: Nhóm rồi ba ngày. td trống giữ chỗ cho Thứ4. Nếu bỏ nó mà không có gộp ô bù đúng cấu trúc, dấu X sau có thể bị đặt vào sai cột.
Bài luyện
Để đổi viền riêng ô Vẽ tranh mà giữ các ô khác, cần sửa ở đâu?
Chữ caption không điều khiển viền ô dữ liệu.
Xóa gộp ô làm thay cấu trúc, không đáp ứng phạm vi.
Danh sách ngoài không phải ô cần sửa.
Đúng. Chọn đúng phần tử cần đổi viền.
Lời giải
Ô Vẽ tranh là một td có style riêng. Sửa border ở td đó thay đổi viền đúng ô, còn caption, danh sách và các thuộc tính gộp ô ở phần tiêu đề được giữ.
Đang học