Tạo kiểu bảng HTML
Sử dụng CSS để làm cho bảng của bạn trông đẹp hơn.
Bảng HTML - Sọc ngựa vằn
Nếu bạn thêm màu nền trên mỗi hàng khác của bảng, bạn sẽ có được hiệu ứng sọc ngựa vằn đẹp mắt.
1 | 2 | 3 | 4 |
5 | 6 | 7 | số 8 |
9 | 10 | 11 | 12 |
13 | 14 | 15 | 16 |
17 | 18 | 19 | 20 |
Để tạo kiểu cho mọi thành phần hàng khác của bảng, hãy sử dụng bộ chọn :nth-child(even)
như thế này:
Lưu ý: Nếu bạn sử dụng (odd)
thay vì (even)
, kiểu dáng sẽ xuất hiện ở hàng 1,3,5, v.v. thay vì 2,4,6, v.v.
Bảng HTML - Sọc vằn dọc
Để tạo sọc ngựa vằn dọc, hãy tạo kiểu cho mỗi cột khác thay vì mỗi hàng khác.
1 | 2 | 3 | 4 |
5 | 6 | 7 | số 8 |
9 | 10 | 11 | 12 |
13 | 14 | 15 | 16 |
17 | 18 | 19 | 20 |
Đặt :nth-child(even)
cho các thành phần dữ liệu bảng như thế này:
Lưu ý: Đặt bộ chọn :nth-child()
trên cả hai phần tử th
và td
nếu bạn muốn tạo kiểu trên cả tiêu đề và ô bảng thông thường.
Kết hợp sọc ngựa vằn dọc và ngang
Bạn có thể kết hợp kiểu dáng từ hai ví dụ trên và bạn sẽ có sọc trên mỗi hàng và mỗi cột khác.
Nếu bạn sử dụng màu trong suốt, bạn sẽ có được hiệu ứng chồng chéo.
Sử dụng màu rgba()
để chỉ định độ trong suốt của màu:
Ví dụ
tr:nth-child(even) {
background-color: rgba(150, 212, 212, 0.4);
}
th:nth-child(even),td:nth-child(even) {
background-color: rgba(150,
212, 212, 0.4);
}
Hãy tự mình thử »Bộ chia ngang
Tên đầu tiên | Họ | Tiết kiệm |
---|---|---|
Peter | Griffin | 100 USD |
Lois | Griffin | $150 |
Joe | Swanson | $300 |
Nếu bạn chỉ định các đường viền ở cuối mỗi hàng của bảng, bạn sẽ có một bảng có các ngăn ngang.
Thêm thuộc tính border-bottom
vào tất cả phần tử tr
để có được các đường chia ngang:
Bảng di chuột
Sử dụng bộ chọn :hover
trên tr
để đánh dấu các hàng trong bảng khi di chuột qua:
Tên đầu tiên | Họ | Tiết kiệm |
---|---|---|
Peter | Griffin | 100 USD |
Lois | Griffin | $150 |
Joe | Swanson | $300 |