[CSS] – CSS Tables (Phần 2)

6. Thuộc tính padding 

Thuộc tính padding để thiết lập khoảng trắng giữa đường viền và nội dung trong bảng.

Thuộc tính padding được sử dụng với thẻ <td> hoặc <th>

Cú pháp:

td, th {

     padding: 15px;

}

Ví dụ 1: Sử dụng thuộc tính padding với giá trị 15px cho cột td, th của bảng.

Kết quả:

Padding property in css
Hình 1. Thuộc tính padding

7. Sử dụng hover trên thẻ tr của bảng

Lựa chọn hover được sử dụng với thẻ <tr> của bàng để làm nổi bật dòng đó khi di chuột vào.

Cú pháp:

tr: hover {

background-color: Mã màu;

}

Ví dụ 2: Sử dụng hover để khi di chuột dòng đó đổi màu hồng.

Kết quả:

using selector hover with tr element
Hình 2. Sử dụng hover trên tr

8. Sử dụng nth-child() trên thẻ tr của bảng

Lựa chọn nth-child() được áp dụng trên thẻ <tr> của bảng nhằm tạo các dòng có màu đan xen nhau.

Cú pháp:

tr: nth-child(even hoặc odd){

background-color: Mã màu;

}

Ví dụ 3: Sử dụng nth-child() để bôi màu vàng các dòng có thư tự lẻ của bảng.

Kết quả:

Using nth-child with tr element
Hình 3. Thẻ tr với nth-child()

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.