|
7-dars - Jadval tuzish sirlari
Jadval tuzish sirlari
Man bu jadval ana shu siz bilan tahlil qilmoqchi bo'lgan misonling ko'rinishi:
E’tibor bergan bo'lsangiz jadval cheti 1 piksellik kenglikda bo'lib, u qora rangga bo'yalgan. Bunday natijaga qanday erishish mumkin? Bu juda ham oson. Faqatgina uning qanday bajarilishini tushunib olsangiz, uning uddasidan hech bir qiyincxiliklarsiz chiqa olasiz.
Birinchi navbatda birinchi jadvalni tuzib olamiz. Bu jadval enining kengligini tegining WIDTH komandasi yordamida belgilab olamiz. Birinchi jadval bir qatirdan va bir katakdan iborat bo'ladi.
Birinchi jadvaldagi katak ichiga ikkinchi jadvalni joylashtiramiz. Ikkinchi jadvlning WIDTH o’lchamini 100% teg qilib belgilaymiz. Natijada ikkinchi jadval eni kengligi birinchi jadval katagining devorlariga simmetrik tarzda joylashadi.
Navbatdagi bajariladigan amal CELLPADDING o'lchamlarini kiritish. Birinchi jadval borderini 1 pikselga teng qilib belgilaymiz. Bizning misolda birinchi jadval borderi CELLPADDING=1 ga teng. Yoqorida yatganimizdek, ikkinchi jadval birinchi jadval katagi ichki devorlariga siqilgan tarzda bo'lishga harakat qiladi. Ammo CELLPADDING yordamida kiritilgan o’lcham ikkinchi jadval va birinchi jadval kataklari ichki devorlari orasida 1 piksel miqdorida oralik ochiq joy qolishini ta'minlaydi.
Endi birinchi jadval BGCOLOR o'lchamlarini kiritamiz (bu border rangi hisoblanadi.) va ikkinchi jadval uchun ham BGCOLOR o’lchamlari kiritiladi (bu ikkinchi jadvalning matn kiritilgan orqa foni bo'ladi).
Ikkala jadvalda ham BORDER o'lchami 0 ga teng bo'lishi lozim. Bu juda ham muhim. Agar border 0 ga teng bo'lmagan taqdirda biz kutgan natija chiqmaydi.
Quyida ayni jadvalning HTML kodlardagi ko'rinishi aks ettirilgan::
CELLPADDING=1 WIDTH=50% ALIGN=center>
Ikkinchi jadval foni rangi sariq va birinchi jadval foni rangi qora. natijada qorq rang jadvalni devorlari qorada chizilgandek aks etadi :
BGCOLOR birinchi jadval - border rangini belgilash uchun
CELLSPACING birinchi jadval - border enini belgilash uchun
WIDTH birinchi jadval - jadval eni kengligini belgilash uchun
BGCOLOR ikkinchi jadval - ichki jadval fon rangini belgilash uchun
Siz ayni jadvalning HTML kodlarini ko'chirib olishingiz va undagi o'lchamlar va ranglarni o'zgartirib uning k'rinishini o'zgartirib amaliy bilmlaringizni oshirishingiz mumkin.
"Jadval tuzish - murakkab jadvallar"
Oddiy jadval tuzish usullarini organib oldingiz. tegining hali siz bilmagan bazi qiziq o'lchamlari mavjud bo'lib ularni qo'shish orqali ajoyib natijalarga erishish mumkin. Aytalik siz quyida keltirilgan jadvalga o'hshash jadval tuzmoqchisiz:
|
№
|
Mahsulot nomi
|
Narhi (so'm)
| |
1
|
Qalam
|
100
| |
2
|
Ruchka
|
150
| |
3
|
Daftar
|
400
| |
Jami: 650 so'm
|
E’tibor bergan bo'lsangiz jadvalning so'ngidagi qatir boshqalaridan farqli o'laroq bitta katakchadan iborat. Biz avval aytib otganimizdek jadvaldagi barcha kataklar soni bir xil emas. Aslida ham kataklar soni bir xilda emas, amma hecha qanday xatolik mavjud emas. Bu misolda ohirgi qatordagi uchta kataklar bir-biri bilan birlashtirilgan halos. Buni tegining COLSPAN komandasi yordamida amalga oshirish mumkin.
COLSPAN
Jadvaldagi bir qator yokin ustundagi bir necha kataklarni birlashtiradi. Bu komanda o’lchamiga siz nechta katakchani birlashtirmoqchi bo'lsangiz, ularning sonini kiritishingiz lozim. Quyida, yuqoridagi jadvalda bu usul qanday amalga oshirilganini ko'rsatib beruvchi misol keltirilmoqda. Bu misolda jadvalning aynan COLSPAN komandasi qo'llanilgan qismigina yozilgan:
Jami: 650 so'm
"Jadval tuzish - murakkab jadvallar"
Endi biz sizga jadvalning bir necha vertikaliga joylashgan kataklarini birlashtirish usullarini o'rganamiz. Bu misilda anashunday amal bajarilgan:
|
№
|
Nomi
|
Narhi (so'm)
|
M
A
H
S
U
L
O
T
| |
1
|
Qalam
|
100
| |
2
|
Ruchka
|
150
| |
3
|
Daftar
|
400
|
Jadvajning so'ngi ustunidagi kataklar bir-biri bilan birlashtirilgan. Jadval ustunidagi vertikal katakchalarni teginig ROWSPAN komandasi yordamida amalga oshiriladi. Ayni amal huddi COLSPAN komandasi bajaradigan vasifadan deyarli farq qilmaydi. COLSPAN vertikal joylashgan atakchalarni birlashtirsa, ROWSPAN esa vertikal katakchalarni birlashtiradi.
ROWSPAN
Jadvalda vertikar (ustunda) joylashgan birnecha kataklarni birlashtirish uchun qo'llaniladi.
№
|
Nomi
|
Narhi (so'm)
|
т
о
в
а
р
ы
|
1
|
Qalam
|
1
|
2
|
Ruchka
|
5
|
3
|
Daftar
|
4
|
Keltirilgan HTML kodlardan ko'rinib turibdiki, tegi bilan ifodalangan jadvaldabi birinchi qator 4 ta katakchalardan iborat, qolganlari esa 3 tadan. Aslida esa hamma 4 qatorning hammasi 4 ta katakdan iborat. Faqatdina ohirgi ustunda joylashgan katakchaklar vertikaliga birlashtirilgan va mahsulot so'zi kiritilgan. Vertikalliga joylashgan katakchalar birlashtirilganda bu amal yuqoridan pastga qarab amalga oshiriladi:
№
Nomi
Narhi (so'm)
...
To'rtinchi katakda ustunda joylashgan 4ta katakni birlashtiriladi (ROWSPAN=4).
Jadval tuzish sirlari
Siz jadvallar tuzish va ularni sahifaga joylashtirish bo'yicha etarlicha bilimlarga ega bo'ldingiz. Bu bo'lim songida professional web sahifa yaratishdagi ayrim usullar haqida ham so'z yuritamiz.
Navbatdagi yan bir misolni ko'rib chiqsak. Aytaylik siz uchta ustundan iborat sahifa yaratmoqchisiz. Chap tomonda joylashgan ustunda navigasion menyu joylashadi, Uning kengligi 150 pikselni tashkil qiladi. Chap tomonda joylashgan ustun 100 pikselni tashkil qiladi. O'rtada joylashgan ustun ekranning qolgan barcha qismini egallashi lozim. Chap ustunning fon rangi to'q qora rangda. Pastda joylashgan jadval monitorni to'ldirib turibdi deb tassovur qiling. Unda bu sahifa mana bunday ko'rinishda bo'ladi:
Do'stlaringiz bilan baham: | 
