Jadval ustunlari guruhi
<colgroup> elementi jadvalning muayyan
ustunlarini uslublashda ishlatiladi.
HTML jadvalida colgroup
Agar jadvalning birinchi ikki ustunini uslublamoqchi bo‘lsangiz, <colgroup>
va <col> elementlaridan foydalaning.
| MON | TUE | WED | THU | FRI | SAT | SUN |
|---|---|---|---|---|---|---|
| 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 |
<colgroup> elementi ustun spetsifikatsiyalari uchun idish sifatida ishlatilishi kerak.
Har bir guruh <col> elementi bilan belgilanadi.
span atributi nechta ustun uslub olishini belgilaydi.
style atributi ustunlarga beriladigan uslubni belgilaydi.
Eslatma: Colgroup uchun haqiqiy CSS xususiyatlarining tanlovi juda cheklangan.
Misol
<table>
<colgroup>
<col span="2"
style="background-color: #D6EEEE">
</colgroup>
<tr>
<th>MON</th>
<th>TUE</th>
<th>WED</th>
<th>THU</th>
...
O‘zingiz sinab ko‘ring »
Eslatma: <colgroup> tegi <table> elementining
bola elementi bo‘lishi kerak va <thead>,
<tr>, <td>
va h.k. kabi boshqa jadval elementlaridan oldin joylashtirilishi kerak, lekin mavjud bo‘lsa
<caption> elementidan keyin.
Ruxsat etilgan CSS xususiyatlari
Colgroup’da ishlatilishiga ruxsat etilgan CSS xususiyatlarining tanlovi juda cheklangan:
width xususiyati
visibility xususiyati
background xususiyatlari
border xususiyatlari
Boshqa barcha CSS xususiyatlari jadvallaringizga ta’sir qilmaydi.
Bir nechta col elementi
Agar bir nechta ustunni har xil uslublar bilan uslublamoqchi bo‘lsangiz,
<colgroup> ichida bittadan ko‘p
<col> elementidan foydalaning:
Misol
<table>
<colgroup>
<col span="2"
style="background-color: #D6EEEE">
<col span="3"
style="background-color: pink">
</colgroup>
<tr>
<th>MON</th>
<th>TUE</th>
<th>WED</th>
<th>THU</th>
...
O‘zingiz sinab ko‘ring »
Bo‘sh colgroup’lar
Agar jadvalning o‘rtasidagi ustunlarni uslublamoqchi bo‘lsangiz, oldingi
ustunlar uchun (uslublarsiz) "bo‘sh" <col>
elementini kiritish:
Misol
<table>
<colgroup>
<col span="3">
<col
span="2"
style="background-color: pink">
</colgroup>
<tr>
<th>MON</th>
<th>TUE</th>
<th>WED</th>
<th>THU</th>
...
O‘zingiz sinab ko‘ring »
Ustunlarni yashirish
visibility: collapse xususiyati bilan ustunlarni yashirishingiz mumkin:
Misol
<table>
<colgroup>
<col span="2">
<col span="3"
style="visibility: collapse">
</colgroup>
<tr>
<th>MON</th>
<th>TUE</th>
<th>WED</th>
<th>THU</th>
...
O‘zingiz sinab ko‘ring »
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!