Thực hành định dạng khung bảng màu

Tạo thư mục riêng, lưu bang_mau.html ở dạng UTF-8 và styles.css cùng thư mục. Trong head của HTML đặt <link rel="stylesheet" href="styles.css">. Bộ mẫu tải về có đủ tài liệu HTML hoàn chỉnh và tệp CSS để đối chiếu. 1. Trong body dựng bảng bốn cột: tên màu, mã hex, RGB và mẫu màu. caption đặt tên bảng; tr tạo hàng; th tạo ô tiêu đề; td tạo ô dữ liệu. 2. Dựng 16 hàng màu theo bảng đối chiếu ở bài màu sắc, chọn nhóm black đến orange trong mẫu, không dùng hàng gray. Hai hàng đầu dưới đây cho thấy cách nhập; các hàng còn lại làm tương tự. Đây là nhóm 16 màu của hoạt động, không phải toàn bộ tên màu CSS. 3. Đặt background-color của ô cuối mỗi hàng theo đúng tên/mã màu của hàng. Ô vẫn có thể không chứa chữ. 4. Lưu CSS dưới đây vào styles.css, mở HTML rồi tải lại. Kiểm bảng có 4 ô tiêu đề, 16 hàng dữ liệu, viền ngoài magenta, viền các ô xanh dương, đầu bảng nền vàng và caption đỏ có viền green. Nếu một màu mẫu sai, so lại riêng tên/hex/RGB ở hàng đó. Nếu toàn bộ viền và kiểu caption đều mất, kiểm link và vị trí styles.css trước. Khi đọc bảng trên màn hình hẹp, có thể cuộn ngang để xem đủ các cột. ```html <table> <caption>Mười sáu mẫu màu để đối chiếu</caption> <tr> <th>Tên màu</th><th>Hex</th><th>RGB</th><th>Mẫu</th> </tr> <tr> <td>black</td><td>#000000</td><td>rgb(0,0,0)</td> <td style="background-color: black;"></td> </tr> <tr> <td>silver</td><td>#C0C0C0</td><td>rgb(192,192,192)</td> <td style="background-color: silver;"></td> </tr> </table> ``` ```css table { border: 4px solid magenta; padding: 5px; } th, td { border: 1px solid blue; padding: 4px; } th { background-color: yellow; } td { width: 25%; } caption { color: red; font-size: 200%; font-weight: bold; border: 4px solid green; padding: 2px; margin: 10px; } ```