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 - Vằn vằn
Nếu bạn thêm màu nền trên mỗi hàng của bảng khác, bạn sẽ nhận đượ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 phần tử hàng khác của bảng, hãy sử dụng :nth-child(even)
bộ chọn như sau:
Thí dụ
tr:nth-child(even) {
background-color: #D6EEEE;
}
Lưu ý: Nếu bạn sử dụng (odd)thay thế
(even), kiểu dáng sẽ xảy ra trên hàng 1,3,5, v.v. thay vì 2,4,6, v.v.
Bảng HTML - Sọc ngựa 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 phần tử dữ liệu bảng như sau:
Thí dụ
td:nth-child(even),
th:nth-child(even) {
background-color: #D6EEEE;
}
Lưu ý: Đặt :nth-child()bộ chọn trên cả hai thvà td
các phần tử nếu bạn muốn có kiểu trên cả tiêu đề và ô bảng thông thường.
Kết hợp các sọc ngựa vằn dọc và ngang
Bạn có thể kết hợp kiểu từ hai ví dụ trên và bạn sẽ có các sọc trên mọi hàng khác và mọi cột khác.
Nếu bạn sử dụng màu trong suốt, bạn sẽ nhận được hiệu ứng chồng chéo.
Sử dụng một rgba()màu để chỉ định độ trong suốt của màu:
Thí 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);
}
Bộ chia ngang
| Họ | Họ | Tiết kiệm |
|---|---|---|
| Peter | Griffin | $ 100 |
| Lois | Griffin | $ 150 |
| Joe | Swanson | $ 300 |
Nếu bạn chỉ định đường viền ở cuối mỗi hàng trong bảng, bạn sẽ có một bảng với các đường chia ngang.
Thêm thuộc border-bottomtính vào tất cả các
trphần tử để có được các dải phân cách ngang:
Thí dụ
tr {
border-bottom: 1px solid #ddd;
}
Bảng có thể lưu được
Sử dụng :hoverbộ chọn trên
trđể đánh dấu các hàng trong bảng khi di chuột qua:
| Họ | Họ | Tiết kiệm |
|---|---|---|
| Peter | Griffin | $ 100 |
| Lois | Griffin | $ 150 |
| Joe | Swanson | $ 300 |
Thí dụ
tr:hover {background-color: #D6EEEE;}