Giải Luyện tập trang 57 SGK Tin học 12

Lời giải

Phân tích Hình 9.6a

Chương trình gốc tạo viền bảng bằng thuộc tính `border` của thẻ `<table>` (dạng `<table border="1">`), nhờ đó MỌI ô của bảng đều có viền. Bảng gồm dòng tiêu đề (Môn học – Điểm) và các dòng dữ liệu Toán, Vật lí, Hoá học.

Yêu cầu của bài:
1. Bỏ thuộc tính `border`, dùng thuộc tính `style` (CSS) để tạo viền.
2. Viền các ô ở hai dòng đầu tô màu xanh (`blue`).
3. Ba chữ Toán, Vật lí, Hoá học tô lần lượt đỏ, vàng, xanh (`red`, `yellow`, `green`).

a) Thay `border` bằng `style` để tạo viền

- Xoá `border="1"` ở thẻ `<table>`.
- Mỗi ô (`<th>`/`<td>`) tạo viền bằng khai báo `border: 1px solid <màu>;`, trong đó `1px` là độ dày, `solid` là nét liền, và `<màu>` là màu viền.
- Thêm `border-collapse: collapse;` vào `style` của `<table>` để viền của các ô liền kề gộp thành một đường, cho bảng giống Hình 9.6a (nếu không, mỗi ô có viền riêng, nhìn thành viền đôi).
- Lưu ý quan trọng: vì bảng gốc có viền ở *tất cả* các ô, nên khi thay bằng `style` ta vẫn phải giữ viền cho những dòng còn lại (Vật lí, Hoá học), chỉ khác là hai dòng đầu dùng viền xanh, các dòng sau dùng viền mặc định (ví dụ `black`). Nếu bỏ hẳn viền ở các dòng cuối thì bảng sẽ khuyết viền, không còn giống Hình 9.6a.

b) Viền màu xanh cho các ô ở hai dòng đầu

Các ô trong hai thẻ `<tr>` đầu tiên (dòng tiêu đề và dòng Toán) dùng `border: 1px solid blue;`; các ô ở những dòng còn lại dùng `border: 1px solid black;`.

c) Tô màu ba chữ môn học

Thêm `color` vào `style` của ô chứa chữ tương ứng: Toán → `color: red;`, Vật lí → `color: yellow;`, Hoá học → `color: green;`. Khi một ô vừa cần viền vừa cần màu chữ (ô Toán), hai khai báo viết chung trong một chuỗi `style`, ngăn cách bằng dấu `;`. Phân biệt hai từ "xanh": viền hai dòng đầu là `blue` (xanh dương), còn chữ Hoá học là `green` (xanh lá).

Chương trình sau khi sửa

```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Bảng điểm</title>
</head>
<body>
<table style="border-collapse: collapse;">
<tr>
<th style="border: 1px solid blue;">Môn học</th>
<th style="border: 1px solid blue;">Điểm</th>
</tr>
<tr>
<td style="border: 1px solid blue; color: red;">Toán</td>
<td style="border: 1px solid blue;">9</td>
</tr>
<tr>
<td style="border: 1px solid black; color: yellow;">Vật lí</td>
<td style="border: 1px solid black;">8</td>
</tr>
<tr>
<td style="border: 1px solid black; color: green;">Hoá học</td>
<td style="border: 1px solid black;">10</td>
</tr>
</table>
</body>
</html>
```

Kiểm tra lại

- Thẻ `<table>` không còn `border`; viền hoàn toàn do `style` tạo ra → đúng yêu cầu dùng `style` thay cho `border`.
- Hai dòng `<tr>` đầu (dòng tiêu đề và dòng Toán) có `border: 1px solid blue;` → viền các ô này màu xanh dương.
- Các dòng còn lại vẫn có viền (`black`) nên bảng giữ đủ viền như Hình 9.6a.
- Ba chữ Toán, Vật lí, Hoá học lần lượt có `color: red; / yellow; / green;` → hiển thị đỏ, vàng, xanh lá.

*(Số điểm chỉ mang tính minh hoạ, có thể thay bằng giá trị trong SGK của em.)*

Đáp số