Jadval uslublari

Jadvallaringizni yaxshiroq ko‘rsatish uchun CSS dan foydalaning.

HTML jadval — zebra chiziqlari

Agar har bir boshqa jadval qatoriga fon rangini qo‘shsangiz, chiroyli zebra chiziqlari effektini olasiz.

1	2	3	4
5	6	7	8
9	10	11	12
13	14	15	16
17	18	19	20

Har bir boshqa jadval qatori elementini uslublash uchun :nth-child(even) selektoridan quyidagicha foydalaning:

Misol

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

O‘zingiz sinab ko‘ring »

Eslatma: Agar (even) o‘rniga (odd) dan foydalansangiz, uslublash 2,4,6 va h.k. o‘rniga 1,3,5 va h.k. qatorlarda bo‘ladi.

HTML jadval — vertikal zebra chiziqlari

Vertikal zebra chiziqlalarini yaratish uchun har bir boshqa qator o‘rniga har bir boshqa ustunni uslublang.

1	2	3	4
5	6	7	8
9	10	11	12
13	14	15	16
17	18	19	20

Jadval ma’lumot elementlari uchun :nth-child(even) ni quyidagicha belgilang:

Misol

td:nth-child(even), th:nth-child(even) {
background-color: #D6EEEE;
}

O‘zingiz sinab ko‘ring »

Eslatma: Agar uslublash har ikkala sarlavha va oddiy jadval katakchalarida bo‘lishini istasangiz, :nth-child() selektorini th va td elementlarining ikkalasiga ham qo‘ying.

Vertikal va gorizontal zebra yo‘llarini birlashtirish

Yuqoridagi ikki misoldagi uslublarni birlashtirsangiz, har bir boshqa qator va har bir boshqa ustunda chiziqlar bo‘ladi.

Shaffof rangdan foydalansangiz, ustma-ust tushish effektini olasiz.

Rangning shaffofligini belgilash uchun rgba() rangidan foydalaning:

Misol

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);
}

O‘zingiz sinab ko‘ring »

Gorizontal ajratgichlar

First Name	Last Name	Savings
Peter	Griffin	$100
Lois	Griffin	$150
Joe	Swanson	$300

Agar frameworklarni faqat har bir jadval qatorining pastida belgilasangiz, gorizontal ajratgichlari bor jadvalni olasiz.

Gorizontal ajratgichlarni olish uchun barcha tr elementlariga border-bottom xususiyatini qo‘shing:

Misol

tr {
border-bottom: 1px solid #ddd;
}

O‘zingiz sinab ko‘ring »

Hover qilingan jadval

Sichqoncha ustida turganda jadval qatorlarini ajratib ko‘rsatish uchun tr ustida :hover selektoridan foydalaning:

First Name	Last Name	Savings
Peter	Griffin	$100
Lois	Griffin	$150
Joe	Swanson	$300

Misol

tr:hover {background-color: #D6EEEE;}

O‘zingiz sinab ko‘ring »

W3Schools Pathfinder

Yutuqlaringizni kuzating – bu bepul!

Ro'yxatdan o'tish Kirish