CSS Jadvallari

CSS Jadvallari


HTML jadvalning ko'rinishi CSS yordamida o'zgartirilishi mumkin.

Kompaniya Rahbar Davlat
Apple Tim Kuk AQSH
Samsung Kin En Chul Koreya
LG Bon-Djun Ku Koreya
Nokia Radjiv Suri Finlandiya
Huawei Ren Jenfer Xitoy
Sony Kadzuo Xirai Yaponiya

Jadval chegaralari

CSS da jadval xususiyatlarini belgilash uchun border xususiyati ishlatiladi

Quyidagai misol <table>, <th>, <td> elementlari uchun chegara rangini qora qilib belgilaydi

Namuna:

O'zingni Sinab Ko'r
table, th, td {
border: 1px solid black;
}

Yuqoridagi misolda <th> va <td> elementlari aloxida chegaraga ega bo'lgani uchun jadval ikta chegaraga ega.


Jadval chegaralarini birlashtirish

border-collapse xusu chegaralar birlashtirilishi kerak yoki kerakmasligini belgilaydi

Namuna:

O'zingni Sinab Ko'r
table {
    border-collapse: collapse;
}

table, th, td {
    border: 1px solid black;
}

Faqat jadval atrofidagi chegara kerak bo'lsa border propertisi faqat <table> elementi uchun ishlatiladi

Namuna:

O'zingni Sinab Ko'r
table {
    border: 1px solid black;
}

Jadvalning eni va balandligi

Jadvalning eni va balandligi width va height xusuxiyatlari bilan belgilanadi.

Quyidagi misolda jadvalning eni 100% ga th elementining balandligi esa 50 pikselga teng.

Namuna:

O'zingni Sinab Ko'r
table {
    width: 100%;
}

th {
    height: 50px;
}

Gorizontal joylashuv

text-align xususiyati <th> va <td> ichidagi kontentning gorizontal joylashuvini belgilaydi (chap, o'ng, o'rta).

By default, the content of <th> elements are center-aligned and the content of <td> elements are left-aligned.

Quyidagi misolda <th> elementi kontenti chap tarafga surilgan

Namuna:

O'zingni Sinab Ko'r
th {
    text-align: left;
}

Vertikal joylashuv

vertical-align xususiyati vertikal joylashuvni belgilaydi (tepada, pasda, o'rtada).

By default, the vertical alignment of the content in a table is middle (for both <th> and <td> elements).

Quyidagi misolda contentning vertikal joylashuvi pastda qilib belgilangan.

Namuna:

O'zingni Sinab Ko'r
td {
    height: 50px;
    vertical-align: bottom;
}

Padding xususiyati

<th&tg; va <td> elementlari ichidagi kontent va jadval chegarasi orasidagi masofani belgilash uchun padding xususiyati ishlatiladi

Namuna:

O'zingni Sinab Ko'r
th, td {
    padding: 15px;
    text-align: left;
}

Gorizontal ajratuvchilar

Ismi Familiyasi balansi
Nodir Gafurov $100
Uug'bek Rashidov $150
Bobur Samatov $300

Gorizontal ajratish uchun <th> va <td> elementlariga border-bottom xususiyatini qo'shing

Namuna:

O'zingni Sinab Ko'r
th, td {
    border-bottom: 1px solid #ddd;
}

Hoverable Jadval

Sichqoncha qatorning ustiga kelganda uning rangini o'zgartirish uchun <tr> elementiga :hover selektorini ishlating

Ismi Familiyasi balansi
Nodir Gafurov $100
Uug'bek Rashidov $150
Bobur Samatov $300

Namuna:

O'zingni Sinab Ko'r
tr:hover {background-color: #f5f5f5}

Yo'l-yo'l jadval

Ismi Familiyasi balansi
Nodir Gafurov $100
Uug'bek Rashidov $150
Bobur Samatov $300

Zebra yo'l - yo'l ko'rinishidagi jadval qilish uchun nth-child() selektori ishlatiladi va background-color xususiyati bilan barcha toq yoki juft qatorlarga fon rangi beriladi.

Namuna:

O'zingni Sinab Ko'r
tr:nth-child(even) {background-color: #f2f2f2}

Jadval ranglari

Quyidagi misol <th> elementlari uchun fon va kontent ranglarini o'zgartiradi

--jadval--

Namuna:

O'zingni Sinab Ko'r
th {
    background-color: #4CAF50;
    color: white;
}

Moslashuvchan jadval

Moslashuvchan jadval kontent ekranga sig'may qolganda ekranda gorizontal tez o'tkazish chizigini chiqaradi

--Jadval--

Jadvalni moslashuvchan qilish uchun uning atrofini <div> elementi bilan o'rang va overflow-x:auto qilib teglang.

Namuna:

O'zingni Sinab Ko'r
<div style="overflow-x:auto;">

<table>
... jadval kontenti ...
</table>

</div>

Innovative Lab web sahifasiga xush kelibsiz biz bilan birga IT sohasidagi o'z bilimlaringizni bosqichma-bosqich oshirib boring!


Telegram kanalimizdan kunlik darslarni o'rganing  

TOSHKENT SHAHRIDAGI INHA UNIVERSITETI - 2017