Bài F11. Định kiểu CSS cho bảng và phần tử

1. Định kiểu cho bảng

Đường viền và màu nền của bảng là những yếu tố cần quan tâm khi định kiểu CSS cho bảng.

• Khi bảng có nhiều hàng hoặc nhiều cột, cần phân biệt nội dung dễ hơn.

• Dùng thuộc tính border-collapse: collapse; để gộp đường viền của các ô.

• Dùng border: 1px solid #3eaeff; để tạo viền màu xanh cho các ô.

Ví dụ 1: Đoạn mã CSS định kiểu đường viền cho bảng.

Định màu nền cho hàng chẵn và hàng tiêu đề:

• Dùng tr:nth-child(even) để định kiểu màu nền cho các hàng chẵn.

• Dùng th để định kiểu cho các tiêu đề bảng.

Ví dụ 2: Đoạn mã CSS định kiểu màu nền.

tr:nth-child(even) {
  background-color: #e5e5e5;
}
th {
  background-color: #3eaeff;
  color: #fff;

}

• nth-child(even) áp dụng cho các hàng chẵn (tr) → màu xám (#e5e5e5).

• th áp dụng cho hàng tiêu đề → nền xanh (#3eaeff), chữ trắng (#fff).

• CSS hỗ trợ chọn lọc các hàng bằng bộ chọn vị trí, giúp bảng dễ đọc hơn.

Ví dụ 3: Đoạn mã CSS dùng để định kiểu cho trạng thái hover của các hàng trong bảng.

tr:hover {

background-color: #ceeaff;

}

2. Định kiểu cho phần tử <div>

Phần tử <div> có thể xếp chồng nhau nếu không khai báo rõ kiểu sắp xếp. Cần sử dụng float để căn chỉnh vị trí.

Ví dụ 4:

• .left { float: left; } → căn trái.

• .right { float: right; } → căn phải.

Giải quyết lỗi hiển thị chồng lớp:

• Dùng clear: both; để "dọn dẹp" các phần tử trước đó đã dùng float.

• Áp dụng cho các lớp mới dưới phần tử float.

Ví dụ 5: Khai báo clear: both như sau:

.clear-both {
  clear: both;
}