Kiểu bảng CSS
Đệm bàn
Để kiểm soát khoảng cách giữa đường viền và nội dung trong bảng, hãy sử dụng thuộc tính padding
trên các phần tử <td> và <th>:
Tên đầu tiên | Họ | Tiết kiệm |
---|---|---|
Peter | Griffin | 100 USD |
Lois | Griffin | $150 |
Joe | Swanson | $300 |
Bộ chia ngang
Tên đầu tiên | Họ | Tiết kiệm |
---|---|---|
Peter | Griffin | 100 USD |
Lois | Griffin | $150 |
Joe | Swanson | $300 |
Thêm thuộc tính border-bottom
vào <th> và <td> cho dải phân cách 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 |
Bàn sọc
Tên đầu tiên | Họ | Tiết kiệm |
---|---|---|
Peter | Griffin | 100 USD |
Lois | Griffin | $150 |
Joe | Swanson | $300 |
Đối với các bảng sọc ngựa vằn, hãy sử dụng bộ chọn nth-child()
và thêm background-color
cho tất cả các hàng trong bảng chẵn (hoặc lẻ):
Màu bảng
Ví dụ bên dưới chỉ định màu nền và màu văn bản của phần tử <th>:
Tên đầu tiên | Họ | Tiết kiệm |
---|---|---|
Peter | Griffin | 100 USD |
Lois | Griffin | $150 |
Joe | Swanson | $300 |