MohirDox

Ko'rinishi

HTML jadvalidagi <colgroup> elementi ​

<colgroup> elementi jadvalning muayyan ustunlarini uslublash uchun ishlatiladi.

HTML jadvalda Colgroup ​

Agar jadvalning birinchi ikki ustunini uslublamoqchi bo'lsangiz, <colgroup> va <col> elementlaridan foydalaning.

html
<table style="width:60%;">
  <colgroup>
    <col span="2" style="background-color:rgba(150, 212, 212,0.4)">
  </colgroup>
  <tr>
    <th>DUSH</th>
    <th>SESH</th>
    <th>CHOR</th>
    <th>PAY</th>
    <th>JUMA</th>
    <th>SHAN</th>
    <th>YAKSH</th>
  </tr>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
    <td>5</td>
    <td>6</td>
    <td>7</td>
  </tr>
  <tr>
    <td>8</td>
    <td>9</td>
    <td>10</td>
    <td>11</td>
    <td>12</td>
    <td>13</td>
    <td>14</td>
  </tr>
  <tr>
    <td>15</td>
    <td>16</td>
    <td>17</td>
    <td>18</td>
    <td>19</td>
    <td>20</td>
    <td>21</td>
  </tr>
  <tr>
    <td>22</td>
    <td>23</td>
    <td>24</td>
    <td>25</td>
    <td>26</td>
    <td>27</td>
    <td>28</td>
  </tr>
</table>
  • <colgroup> elementi ustunlar uchun parametrlarni belgilash konteyneri hisoblanadi.
  • Har bir guruh <col> elementi bilan belgilanadi.
  • span atributi nechta ustunga uslub berilishini ko'rsatadi.
  • style atributi ustunlarga beriladigan uslubni belgilaydi.

Eslatma

Colgroup uchun ruxsat etilgan CSS xossalari juda cheklangan.

Misol ​

html
<table>
  <colgroup>
    <col span="2" style="background-color: #D6EEEE">
  </colgroup>
  <tr>
    <th>DUSH</th>
    <th>SESH</th>
    <th>CHOR</th>
    <th>PAY</th>
    ...
  </tr>
</table>

Eslatma

<colgroup> tegi <table> elementining farzandi bo'lishi kerak va boshqa jadval elementlaridan, masalan <thead>, <tr>, <td> va hokazolardan oldin, lekin <caption> elementidan keyin joylashishi lozim.

Ruxsat etilgan CSS xossalari ​

Colgroupda faqat quyidagi CSS xossalaridan foydalanish mumkin:

Boshqa CSS xossalari jadvalda ishlamaydi.

Bir nechta <col> elementlari ​

Agar bir nechta ustunlarni turli uslublar bilan bezamoqchi bo'lsangiz, <colgroup> ichida bir nechta <col> elementlaridan foydalaning:

html
<table>
  <colgroup>
    <col span="2" style="background-color: #D6EEEE">
    <col span="3" style="background-color: pink">
  </colgroup>
  <tr>
    <th>DUSH</th>
    <th>SESH</th>
    <th>CHOR</th>
    <th>PAY</th>
    ...
  </tr>
</table>

Bo'sh Colgrouplar ​

Jadvalning o'rtasidagi ustunlarni uslublash uchun, oldingi ustunlar uchun uslubsiz "bo'sh" <col> elementini qo'shing:

html
<table>
  <colgroup>
    <col span="3">
    <col span="2" style="background-color: pink">
  </colgroup>
  <tr>
    <th>DUSH</th>
    <th>SESH</th>
    <th>CHOR</th>
    <th>PAY</th>
    ...
  </tr>
</table>

Ustunlarni yashirish ​

visibility: collapse xossasi yordamida ustunlarni yashirish mumkin:

html
<table>
  <colgroup>
    <col span="2">
    <col span="3" style="visibility: collapse">
  </colgroup>
  <tr>
    <th>DUSH</th>
    <th>SESH</th>
    <th>CHOR</th>
    <th>PAY</th>
    ...
  </tr>
</table>

Ko'proq misollar ​

html
<table>
  <colgroup>
    <col span="2" style="background-color: #D6EEEE">
  </colgroup>
  <tr>
    <th>DUSH</th>
    <th>SESH</th>
    <th>CHOR</th>
    <th>PAY</th>
    ...
  </tr>
</table>
html
<table>
  <colgroup>
    <col span="2" style="background-color: #D6EEEE">
    <col span="3" style="background-color: pink">
  </colgroup>
  <tr>
    <th>DUSH</th>
    <th>SESH</th>
    <th>CHOR</th>
    <th>PAY</th>
    ...
  </tr>
</table>
html
<table>
  <colgroup>
    <col span="3">
    <col span="2" style="background-color: pink">
  </colgroup>
  <tr>
    <th>DUSH</th>
    <th>SESH</th>
    <th>CHOR</th>
    <th>PAY</th>
    ...
  </tr>
</table>
html
<table>
  <colgroup>
    <col span="2">
    <col span="3" style="visibility: collapse">
  </colgroup>
  <tr>
    <th>DUSH</th>
    <th>SESH</th>
    <th>CHOR</th>
    <th>PAY</th>
    ...
  </tr>
</table>

Eslatma

Colgroup uchun ruxsat etilgan CSS xossalari juda cheklangan.

Eslatma

<colgroup> tegi <table> elementining farzandi bo'lishi kerak va boshqa jadval elementlaridan, masalan <thead>, <tr>, <td> va hokazolardan oldin, lekin <caption> elementidan keyin joylashishi lozim.