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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
<html> <head> <style> table, td, th { border: 1px solid #ddd; text-align: left; } table { border-collapse: collapse; width: 100%; } th, td { padding: 15px; text-align: left; } </style> </head> <body> <table> <tr> <th>STT</th> <th>Họ tên</th> </tr> <tr> <td>1</td> <td>Hiển Minh</td> </tr> <tr> <td>2</td> <td>Ngọc Minh</td> </tr> </table> </body> </html> |
Kết quả:
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
<html> <head> <style> table, td, th { /*border: 1px solid #ddd;*/ text-align: left; } table { border-collapse: collapse; width: 100%; } th, td { padding: 15px; text-align: left; border-bottom: 1px solid #ddd; } tr:hover { background-color: pink; } </style> </head> <body> <table> <tr> <th>STT</th> <th>Họ tên</th> </tr> <tr> <td>1</td> <td>Hiển Minh</td> </tr> <tr> <td>2</td> <td>Ngọc Minh</td> </tr> </table> </body> </html> |
Kết quả:
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
<html> <head> <style> table, td, th { border: 1px solid #ddd; text-align: left; } table { border-collapse: collapse; width: 100%; } th, td { padding: 15px; text-align: left; border-bottom: 1px solid #ddd; } tr:nth-child(odd) { background-color: yellow; } </style> </head> <body> <table> <tr> <th>STT</th> <th>Họ tên</th> </tr> <tr> <td>1</td> <td>Hiển Minh</td> </tr> <tr> <td>2</td> <td>Ngọc Minh</td> </tr> </table> </body> </html> |
Kết quả:
