Jadval uslublari

CSS jadval padding

Jadvaldagi ichki chegaralar va kontent orasiga biroz ko‘proq bo‘shliq qo‘shish uchun <td> va <th> elementlarida padding xossasidan foydalaning:

th, td {
padding: 10px;
text-align: left;
}

Jadval uchun gorizontal ajratgichlar yaratish uchun <th> va <td> elementlariga border-bottom xossasini qo‘shing:

th, td {
border-bottom: 1px solid #ddd;
}

Jadval qatorlarini sichqoncha olib borilganda ajratib ko‘rsatish uchun <tr> da CSS :hover selektoridan foydalaning:

tr:hover {background-color: coral;}

Zebra chiziqli jadvallar uchun nth-child() selektoridan foydalanib, barcha juft (yoki toq) jadval qatorlariga background-color qo‘shing:

tr:nth-child(even) {background-color: #f2f2f2;}

Quyidagi misol <th> elementlari uchun fon rangi va matn rangini belgilaydi:

th {
background-color: #04AA6D;
color: white;
}

Yutuqlaringizni kuzating – bu bepul!