Sayt yaratishda jadvallar juda katta ahamiyatga ega, shu sababli CSS ham jadvallar uchun alohida stillar ishlab chiqgan, maqola aynan jadvallarni tashqi ko‘rinishini chiroyli qilib beradigan stix xususiyatlariga bag‘ishlanadi.

Agar, siz HTML gippermatn tilida jadvallarni hosil qilishni bilmasangiz,»HTML da jadvallar» nomli maqolani o‘qib chiqing, so‘ng bu maqolaga qaytib stillarni o‘rganishni davom ettiring.

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>

18css_1

Endi, SSS xususiyatini ishlatamiz, faqat «table» stilini o‘zgartiramiz:

table {
border:2px solid red;
border-collapse:collapse;
}

18css_2

Border-spacing — Jadvaldagi yacheykalar orasidagi masofani o‘rnatadi. Agar «border-collapse» o‘rnatilgan bo‘lsa, bu stil xususiyati ishlamaydi. Ikkita qiymat qabul qilishi mumkin, qiymatlar pikselda beriladi, birinchi qiymat gorizontal hol uchun, ikkinchisi vertikal. Agar, bitta qiymat bo‘lsa, ikki holat uchun bir xil bo‘ladi.

<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>

18css_3

Caption-side — HTML gippermatn tilining «Caption» attributi orqali hosil qilingan jadval nomini(caption attributi haqida), kerakli joyga o‘rnatish. Qiymatlari:

top — jadval yuqorisiga o‘rnatish;

bottom — jadvalning quyi qismiga o‘rnatish;

left — jadvalning chap tomoniga o‘rnatish(manimcha faqat Firefox brauzerida ishlaydi);

right— jadvalning o‘ng tomoniga o‘rnatish(manimcha faqat Firefox brauzerida ishlaydi);

<html>
<head>
<title>Margin Padding</title>
<style>
table {
border-collapse:collapse;
}
caption{
caption-side:bottom;
}
td{
border:2px solid red;
border-collapse:collapse;
}
</style>
</head>
<body>
<table>
<caption>Jamoa</caption>
<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>

18css_4

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

show — ma’lumot bordigidek ramkalarini ko‘rsatib beradi.

hide — umuman stillarini olib tashlaydi, hatto fon rangi ham 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>

18css_5

Endi SSS stilga «empty-cells«ni qo‘shamiz va quyidagiga ega bo‘lamiz:

td{
background:gray;
border:2px solid red;
empty-cells:show;
}

18css_6

Chegara hosil bo‘ldi, agar «empty-cells:hide;» qilsak umuman stil yo‘qoladi.

18css_7

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.