MohirDox

Ko'rinishi

HTML Jadvalni Stilizatsiya Qilish ​

CSS yordamida jadvallarni chiroyliroq ko'rinishga keltiring.

HTML Jadval - Zebra Chiziqlar ​

Har bir juft jadval qatoriga fon rangi qo'shsangiz, jadvalda zebra chiziqlar hosil bo'ladi.

html
<table>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
  </tr>
  <tr>
    <td>5</td>
    <td>6</td>
    <td>7</td>
    <td>8</td>
  </tr>
  <tr>
    <td>9</td>
    <td>10</td>
    <td>11</td>
    <td>12</td>
  </tr>
  <tr>
    <td>13</td>
    <td>14</td>
    <td>15</td>
    <td>16</td>
  </tr>
  <tr>
    <td>17</td>
    <td>18</td>
    <td>19</td>
    <td>20</td>
  </tr>
</table>

Har bir juft jadval qatorini stilizatsiya qilish uchun :nth-child(even) selektoridan foydalaning:

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

Eslatma

Agar (odd) ishlatsangiz, stil 1,3,5 va hokazo qatorlarga qo'llaniladi, (even) esa 2,4,6 va hokazo qatorlarga.

HTML Jadval - Vertikal Zebra Chiziqlar ​

Vertikal zebra chiziqlar hosil qilish uchun har bir juft ustunni stilizatsiya qiling.

html
<table>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
  </tr>
  <tr>
    <td>5</td>
    <td>6</td>
    <td>7</td>
    <td>8</td>
  </tr>
  <tr>
    <td>9</td>
    <td>10</td>
    <td>11</td>
    <td>12</td>
  </tr>
  <tr>
    <td>13</td>
    <td>14</td>
    <td>15</td>
    <td>16</td>
  </tr>
  <tr>
    <td>17</td>
    <td>18</td>
    <td>19</td>
    <td>20</td>
  </tr>
</table>

Jadvaldagi har bir juft ustunni stilizatsiya qilish uchun quyidagidan foydalaning:

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

Eslatma

Agar siz stilni ham sarlavha (th), ham oddiy katak (td) elementlariga qo'llamoqchi bo'lsangiz, ikkalasiga ham :nth-child() selektorini yozing.

Vertikal va Gorizontal Zebra Chiziqlarni Birlashtirish ​

Ikkala misoldagi stilizatsiyani birlashtirsangiz, har bir juft qator va har bir juft ustunda chiziqlar hosil bo'ladi.

Agar siz shaffof rang ishlatsangiz, chiziqlar bir-biriga ustma-ust tushadi.

html
<table>
  <tr>
    <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
  </tr>
  <tr>
    <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
  </tr>
  <tr>
    <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
  </tr>
  <tr>
    <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
  </tr>
  <tr>
    <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
  </tr>
</table>

Shaffoflikni belgilash uchun rgba() rangidan foydalaning:

css
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 Ajratgichlar ​

Agar har bir jadval qatorining pastki qismiga border belgilasangiz, jadvalda gorizontal ajratgichlar hosil bo'ladi.

Barcha tr elementlariga border-bottom xususiyatini qo'shing:

html
<table>
  <thead>
    <tr>
      <th>Ism</th>
      <th>Familiya</th>
      <th>Jamgarma</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Otabek</td>
      <td>Karimov</td>
      <td>$100</td>
    </tr>
    <tr>
      <td>Malika</td>
      <td>Rahimova</td>
      <td>$150</td>
    </tr>
    <tr>
      <td>Jasur</td>
      <td>Ganiev</td>
      <td>$300</td>
    </tr>
  </tbody>
</table>
css
tr {
  border-bottom: 1px solid #ddd;
}

Hover Effektli Jadval ​

tr elementiga :hover selektorini qo'llang va kursor ustiga olib borilganda qatorni ajrating:

html
<table>
  <tr>
    <th>Ism</th>
    <th>Familiya</th>
    <th>Jamgarma</th>
  </tr>
  <tr>
    <td>Otabek</td>
    <td>Karimov</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>Malika</td>
    <td>Rahimova</td>
    <td>$150</td>
  </tr>
  <tr>
    <td>Jasur</td>
    <td>Ganiev</td>
    <td>$300</td>
  </tr>
</table>
css
tr:hover {
  background-color: #D6EEEE;
}

Ushbu hujjatda HTML jadvalini turli usullarda stilizatsiya qilish ko'rsatilgan. CSS selektorlaridan foydalanib, jadvalni ko'rinishini yaxshilang va foydalanuvchilar uchun qulay interfeys yarating.