19. Jadval yacheykalariga stil berish

Sayt yaratishda jadvallar juda katta ahamiyatga ega, shu sababli CSS kam jadvallar uchun alohida stillar ishlab chiqgan, maqola aynan jadvallarni tashki ko’rinishini chiroyli qilib beradigan stix xususiyatlariga bagishlanadi.

Jadvalga stil berish uchun CSSda quyidagi stil xususiyatlari mavjud:

- border-collapse;

- border-spacing;

- border-side;

- empty-cells;

- table-layout.

Bular asosan yacheykalar bilan ishlaydi, keling bu stil xususiyatlarini birma- bir ko’rib chiqamiz.

Border-collapse - jadval yacheykalari chegaralarini chizish. Siz yacheykalarga ramka o’rnatsangiz, yacheyka birlashgan joyida ikkita chegara bo’lib qoladi. Bu kalit so’z orqali siz, shu ikkita ramkani bitta qilish imkoniga egasiz. Qiymatlari:

- collapse- yacheykalar orasida bitta umumiy ramka bo’ladi.

- separate - har bir yacheykada o’z ramkasi bo’ladi, chegarada esa ikkita ramka bo’ladi. Bu xususiyatsiz misol ko'ramiz:

< html>

< head>

< title>border-spacing< /title>

< style>

table {

border:2px solid red;

}

th{

border:2px solid green;

}

td{

border:2px solid green;

}

< /style>

< /head>

< body>

< table>

< tr>

< th>MU< /th>< th>MU2012< /th>

< th>MU2013< /th>< th>MU2014< /th>

< /tr>

< tr>

< td>Trener< /td>< td>Fergusion< /td> < td>Moyes< /td>< td>Van Gal

< /td> < /tr>

< tr>

< td>Kapitan< /td>< td>Vidic< /td>

< td>Vidic< /td>< td>Rooney< /td>

< /tr>

< tr>

< td>Star< /td>< td>Van Persi< /td> < td>Rooney< /td>< td>Di Maria

< /td> < /tr>

< /table>

< /body>

< /html>

Endi, CSS xususiyatini ishlatamiz, faqat "table" stilini o’zgartiramiz:

table {

border:2px solid red;

border-collapse:collapse;

^}

Border-spacing - Jadvaldagi yacheykalar orasidagi masofani o’rnatadi. Agar "border-collapse" o’rnatilgan bulsa, bu stil xususiyati ishlamaydi. Ikkita qiymat qabul qilishi mumkin, qiymatlar pikselda beriladi, birinchi qiymat gorizontal hol uchun, ikkinchisi vertikal. Agar, bitta qiymat bulsa, ikki holat uchun bir xil buladi.

< html>

< head>

< title>border-spacing< /title>

< style>

table {

border:2px solid red; border-spacing: 8px 15px;

}

td{

border:2px solid black;

}

< /style>

< /head>

< body>

< table>

< tr>

< td>MU< /td>< td>MU2012< /td>

< td>MU2013< /td>< td>MU2014< /td>

< /tr>

< tr>

< td>MU< /td>< td>MU2012< /td>

< td>MU2013< /td>< td>MU2014< /td>

< /tr>

< /table>

< /body>

< /html>

Caption-side - HTML gippermatn tilining "Caption" attributi orkali hosil qilingan jadval nomini, kerakli joyga o’rnatish. qiymatlari:

• top - jadval yuqorisiga o’rnatish;
• bottom - jadvalning quyi qismiga o’rnatish;
• left - jadvalning chap tomoniga o’rnatish;
• right- jadvalning ung tomoniga o’rnatish

 

 

 

 

 

 

 

Jamoa

 

MUMU2012

MU2013MU2014

 

 

MUMU2012

MU2013MU2014

 

 

 

 

Empty-cells - agar jadval yacheykasi bo’sh bo’lsa(xech qanday ma’lumot bo’lmasa, probel bo’lsa, keyingi qatorga o’tish belgisi bulsa, visibility=hide bulsa, ya’ni ko’rinmas bo’lsa) bu stil xususiyati, shu yacheykani xudda ma’lumot bordagidek ko’rinish xosil qilib beradi(ramkalarini ko’rsatadi). Qiymatlari:

• show - ma’lumot bordigidek ramkalarini ko’rsatib beradi.
• hide - umuman stillarini olib tashlaydi, xatto fon rangi xam bo’lmaydi. Bu stil xususiyatisiz misol ko’ramiz.

< html>

< head>

< title>Empty< /title>

< style>

table {

border:4px double blue;

}

td{

background:gray; border:2px solid red;

}

< /style>

< /head>

< body>

< table>

< tr>

< td>MU< /td>< td>MU2012< /td>

< /tr>

< tr>

< td>< /td>< td>MU2014< /td>

< /tr>

< /table>

< /body>

< /html>

Endi CSS stilga " empty-cells "ni qo’shamiz va quyidagiga ega bulamiz:

td{

background:gray;

border:2px solid red;

empty-cells:show;

}

Chegara kosil buldi, agar "empty-cells:hide;" qilsak umuman stil yuqoladi.

Table-layout - jadval yacheykasini uzunligini o’rnatish, qiymatlari:

• auto - brauzer jadvalni ekranga chiqaradi, analiz qilib, keyin o’lchamini o’zgartirib qo’yadi;
• fixed - aniq o’rnatilgan o’lcham, bu qiymatni berish uchun jadval uzunligi o’rnatilgan bo’lishi lozim.

---