Giải Câu hỏi trang 56 SGK Tin học 12

Lời giải

Nhận xét bảng ở Hình 9.6

Bảng ở Hình 9.6 được tạo chỉ bằng các thẻ HTML cơ bản (`<table>`, `<tr>`, `<th>`, `<td>`) mà chưa được định dạng, nên có những nhược điểm sau:

- Các ô của bảng không có đường viền (border). Vì mặc định bảng HTML hiển thị không kẻ khung, các hàng và các cột nằm sát nhau, khó phân biệt ô này với ô kia nên bảng khó đọc, khó theo dõi dữ liệu.
- Nội dung trong ô nằm sát vào nhau, không có khoảng đệm (padding) giữa chữ và mép ô, làm bảng trông chật chội, thiếu thẩm mỹ.
- Nhìn chung bảng chưa được trình bày đẹp, chưa làm nổi bật hàng tiêu đề.

Cách khắc phục

Dùng CSS để định dạng lại bảng thay vì để bảng ở dạng mặc định:

- Thêm đường viền cho bảng và cho các ô bằng thuộc tính `border` áp dụng cho `table`, `th`, `td`.
- Dùng `border-collapse: collapse;` cho `table` để gộp hai đường viền của các ô liền nhau thành một, bảng gọn và rõ ràng hơn.
- Thêm `padding` cho `th`, `td` để tạo khoảng đệm giữa nội dung và mép ô, giúp bảng dễ đọc.
- Có thể định dạng thêm cho hàng tiêu đề (`th`) như tô màu nền, căn giữa chữ để làm nổi bật.

Ví dụ đoạn CSS khắc phục:

```css
table, th, td {
border: 1px solid black;
}
table {
border-collapse: collapse;
}
th, td {
padding: 8px;
}
```

Khi đó bảng sẽ có khung viền rõ ràng, nội dung thoáng và dễ đọc hơn.

Đáp số