CSS Jadvallari

CSS Jadvallari

HTML jadvalining ko'rinishi CSS bilan juda yaxshi yaxshilanishi mumkin:

Jadval Chegaralari

CSSda jadval chegaralarini belgilash uchun border xususiyatidan foydalaning.

Quyidagi misolda <table>, <th> va <td> elementlari uchun mustahkam chegara belgilangan:

Misol

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

To'liq Kenglikdagi Jadval

Yuqoridagi jadval ba'zi holatlarda kichik ko'rinishi mumkin. Agar sizga butun ekran bo'ylab (to'liq kenglikda) bo'lishi kerak bo'lgan jadval kerak bo'lsa, <table> elementiga width: 100% ni qo'shing:

Misol

table {
  width: 100%;
}

Ikkiqatlamali Chegaralar

Yuqtirilgan misol jadvalidagi chegara ikkiqatlamali ko'rinishga ega. Bu shundan, chunki jadval va <th> va <td> elementlarining alohida chegaralari mavjud.

Ikkiqatlamali chegaralarni olib tashlash uchun quyidagi misolga qarang.

Jadval Chegaralarini Qayta Yig'ish

border-collapse xususiyati jadval chegaralari birlashtirilishi kerakmi yoki yo'qmi belgilarini o'rnatadi:

Misol

table {
  border-collapse: collapse;
}

Agar siz faqat jadval atrofida chegara bo'lishini xohlasangiz, faqat <table> uchun border xususiyatini belgilang:

Misol

table {
  border: 1px solid;
}