CSS jadvallar

HTML jadvallarini CSS bilan sezilarli darajada yaxshilash mumkin:

Company	Contact	Mamlakat
Alfreds Futterkiste	Maria Anders	GERMANIYA
Berglunds snabbköp	Christina Berglund	SHVETSIYA
Centro comercial Moctezuma	Francisco Chang	MEKSIKA
Ernst Handel	Roland Mendel	AVSTRIYA
Island Trading	Helen Bennett	UK
Königlich Essen	Philip Cramer	GERMANIYA
Laughing Bacchus Winecellars	Yoshi Tannamuri	KANADA
Magazzini Alimentari Riuniti	Giovanni Rovelli	ITALIYA

O‘zingiz sinab ko‘ring »

CSS jadval chegaralari

CSS border xossasi jadval chegaralarining kengligi, uslubini va rangini belgilash uchun ishlatiladi.

border xossasi quyidagilar uchun qisqartma xossadir:

border-width — chegara kengligini belgilaydi
border-style — chegara uslubini belgilaydi (majburiy)
border-color — chegara rangini belgilaydi

Quyidagi misol <table>, <th> va <td> elementlari uchun 1px uzluksiz chegara belgilaydi:

Firstname	Lastname
Peter	Griffin
Lois	Griffin

Misol

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

O‘zingiz sinab ko‘ring »

CSS jadval chegara rangi

Quyidagi misol <table>, <th> va <td> elementlari uchun 1px uzluksiz yashil chegara belgilaydi:

Firstname	Lastname
Peter	Griffin
Lois	Griffin

Misol

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

O‘zingiz sinab ko‘ring »

Nega ikkitalik chegara?

Yuqoridagi misollardagi jadvallar qo‘sha chegaralarga ega ekanligiga e’tibor bering. Buning sababi <table>, <th> va <td> elementlarining har birida alohida chegaralar borligidir.

Qo‘sha chegaralarni olib tashlash uchun quyidagi misolga qarang.

CSS jadval chegaralarini birlashtirish (collapse)

CSS border-collapse xossasi jadval chegaralarining bitta chegara sig‘imishi kerakligini yoki standart HTML’dagidek alohida bo‘lishi kerakligini belgilaydi.

Bu xossa quyidagi qiymatlardan biriga ega bo‘lishi mumkin:

separate - Standart qiymat. Chegaralar ajratilgan; har bir hujayra o‘z chegaralarini ko‘rsatadi
collapse - imkon qadar chegaralar bitta chegaraga birlashtiriladi

Quyidagi jadvalda sig‘imlab qolgan (collapse) chegaralar bor:

Firstname	Lastname
Peter	Griffin
Lois	Griffin

Misol

border-collapse xossasidan foydalanish:

table {
border-collapse: collapse;
}

O‘zingiz sinab ko‘ring »

CSS jadval padding

Jadvalda chegara va kontent orasidagi bo‘shliqni boshqarish uchun <td> va <th> elementlarida padding xossasidan foydalaning:

First Name	Last Name	Savings
Peter	Griffin	$100
Lois	Griffin	$150
Joe	Swanson	$300

Misol

th, td {
padding: 10px;
}

O‘zingiz sinab ko‘ring »

CSS chegara oralig‘i (border-spacing)

CSS border-spacing xossasi qo‘shni katakchilar chegaralari orasidagi masofani belgilaydi.

Eslatma: Bu xossa faqat border-collapse "separate" qilib belgilanganda ishlaydi.

Quyidagi jadvalda border-spacing qiymati 15px:

Firstname	Lastname
Peter	Griffin
Lois	Griffin

Misol

border-spacing xossasidan foydalanish:

table {
border-collapse: separate;
border-spacing: 15px;
}

O‘zingiz sinab ko‘ring »

CSS tashqi jadval chegaralari

Agar faqat jadval atrofida (ichida emas) chegara kerak bo‘lsa, border xossasini faqat <table> elementi uchun belgilaysiz:

Firstname	Lastname
Peter	Griffin
Lois	Griffin

Misol

table {
border: 1px solid;
}

O‘zingiz sinab ko‘ring »

W3Schools Pathfinder

Yutuqlaringizni kuzating – bu bepul!

Ro'yxatdan o'tish Kirish