MohirDox

Ko'rinishi

HTML Jadval Chegaralari ​

HTML jadvallarida turli uslub va shakldagi chegaralar bo'lishi mumkin.

Chegarani Qo'shish ​

Chegarani qo'shish uchun CSS border xususiyatidan table, th, va td elementlarida foydalaning:

html
<table style="width:30%;">
  <tr>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
</table>
css
jadval, ustun, katak {
  border: 1px solid qora;
}

Chegaralarni Birlash ​

Agar yuqoridagi misolda bo'lgani kabi ikki qatlamli chegara bo'lishini xohlamasangiz, CSS border-collapse xususiyatini collapse qilib belgilang. Bu chegara chiziqlarini bitta chiziqqa birlashtiradi:

html
<table style="width:30%; border-collapse: collapse;">
  <tr>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
</table>
css
jadval, ustun, katak {
  border: 1px solid qora;
  border-collapse: collapse;
}

Jadval Chegaralarini Uslublash ​

Agar har bir katakka fon rangi bersangiz va chegara rangini oq (hujjat foniga mos) qilsangiz, ko'rinmas chegara hosil bo'ladi:

html
<table style="width:30%; border-collapse: collapse;">
  <tr>
    <td style="background-color: #96D4D4;"> </td>
    <td style="background-color: #96D4D4;"> </td>
    <td style="background-color: #96D4D4;"> </td>
  </tr>
  <tr>
    <td style="background-color: #96D4D4;"> </td>
    <td style="background-color: #96D4D4;"> </td>
    <td style="background-color: #96D4D4;"> </td>
  </tr>
  <tr>
    <td style="background-color: #96D4D4;"> </td>
    <td style="background-color: #96D4D4;"> </td>
    <td style="background-color: #96D4D4;"> </td>
  </tr>
</table>
css
jadval, ustun, katak {
  border: 1px solid oq;
  border-collapse: collapse;
}
ustun, katak {
  background-color: #96D4D4;
}

Dumaloq Jadval Chegaralari ​

border-radius xususiyati yordamida chegara burchaklari yumaloqlashadi:

html
<table style="width:30%;">
  <tr>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
</table>
css
jadval, ustun, katak {
  border: 1px solid qora;
  border-radius: 10px;
}

Jadval atrofidagi chekarani olib tashlash uchun CSS selektordan jadval ni olib tashlang:

html
<table style="width:30%;">
  <tr>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
</table>
css
ustun, katak {
  border: 1px solid qora;
  border-radius: 10px;
}

Nuqtali Jadval Chegaralari ​

border-style xususiyati yordamida chegara ko'rinishini o'zgartirish mumkin.

Quyidagi qiymatlar ishlatiladi:

  • dotted
  • dashed
  • solid
  • double
  • groove
  • ridge
  • inset
  • outset
  • none
  • hidden
css
ustun, katak {
  border-style: dotted;
}

Chegara Rangini O'zgartirish ​

border-color xususiyati yordamida chegara rangini belgilash mumkin.

css
ustun, katak {
  border-color: #96D4D4;
}