Style

HTML Jadvalni Stil Berish

CSS yordamida jadvallaringizni chiroyliroq qilishingiz mumkin.

HTML Jadval - Zebra Chiziqlar

Agar har bir ikkinchi qatorga fon rangini qo'shsangiz, jadvallingizda chiroyli zebra chiziqlar effektini olasiz.

Misol:

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

HTML Jadval - Vertikal Zebra Chiziqlar

Vertikal zebra chiziqlar hosil qilish uchun har bir ikkinchi ustunga stil bering, qator o'rniga.

Misol:

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

Vertikal va Gorizontal Zebra Chiziqlarni Birlash

Yuqoridagi ikkita misoldan olingan stilni birlashtirishingiz mumkin va har bir ikkinchi qator va har bir ikkinchi ustunda chiziqlar hosil bo'ladi.

Agar siz shaffof rangdan foydalansangiz, u holda ustma-ust effektini olasiz.

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

Gorizontal Bo'linmalar

Agar har bir qatorning faqat pastki qismiga chegara belgilasangiz, jadvallingizda gorizontal bo'linmalar hosil bo'ladi.

Misol:

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

Hoverlanuvchi Jadval

tr elementiga :hover selektorini qo'llab, jadvallardagi qatorlarni sichqoncha ustida ushlab turganingizda ajratib ko'rsata olasiz.

Misol:

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