Паролингизни унутдингизми?
Login
Left, Right, Center Left, Center, Right Center, Left, Right



7-dars - Jadval tuzish sirlari

 Jadval tuzish sirlari

Man bu jadval ana shu siz bilan tahlil qilmoqchi bo'lgan misonling ko'rinishi:

Jadval

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 <TABLE> 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::
<TABLE BGCOLOR=black BORDER=0 CELLSPACING=0
CELLPADDING=1 WIDTH=50% ALIGN=center>
<TR>
<TD>
<TABLE BORDER=0 CELLSPACING=0 BGCOLOR=yellow WIDTH=100%>
<TR>
<TD ALIGN=center>Jadval</TD>
</TR>
</TABLE>

</TD>
</TR>
</TABLE>

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. <TD> 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 <TD> 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:
<TR>
<TD COLSPAN=3 BGCOLOR=red>
<FONT COLOR=white>Jami: 650 so'm</FONT>
</TD>
</TR>
"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 <TD> 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.
<TABLE BORDER=1>

<TR BGCOLOR=navy>
<TD><FONT COLOR=white>№</FONT></TD>
<TD><FONT COLOR=white>Nomi</FONT></TD>
<TD><FONT COLOR=white>Narhi (so'm)</FONT></TD>
<TD ROWSPAN=4 BGCOLOR=white>
т<BR>о<BR>в<BR>а<BR>р<BR>ы
</TD>
</TR>

<TR BGCOLOR=yellow>
<TD><FONT COLOR=blue>1</FONT></TD>
<TD><FONT COLOR=blue>Qalam</FONT></TD>
<TD><FONT COLOR=blue>1</FONT></TD>
</TR>

<TR BGCOLOR=yellow>
<TD><FONT COLOR=blue>2</FONT></TD>
<TD><FONT COLOR=blue>Ruchka</FONT></TD>
<TD><FONT COLOR=blue>5</FONT></TD>

</TR>
<TR BGCOLOR=yellow>
<TD><FONT COLOR=blue>3</FONT></TD>
<TD><FONT COLOR=blue>Daftar</FONT></TD>
<TD><FONT COLOR=blue>4</FONT></TD>
</TR>

</TABLE>
Keltirilgan HTML kodlardan ko'rinib turibdiki, <TD> 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:
<TR BGCOLOR=yellow>
<TD><FONT COLOR=white>№</FONT></TD>
<TD><FONT COLOR=white>Nomi</FONT></TD>
<TD><FONT COLOR=white>Narhi (so'm)</FONT></TD>
<TD ROWSPAN=4 BGCOLOR=white> ... </TD>
</TR>
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:

Sayt menyusi:


 Sayt menyusi:
  1- havola
  2- havola
    3- havola
    4- havola
  5-havola
  6-havola 

 

Web sahifaning asosiy matni. Bu erda siz muhim deb bilgan matn, tasvir va boshqa ma'lumotlarni kritasiz.
Web sahifaning asosiy matni. Bu erda siz muhim deb bilgan matn, tasvir va boshqa ma'lumotlarni kritasiz.

 


 Reklama:

Bu kalonkaga reklama matni va oddiy tasvir yoki harakatlanuvchi tasvirni kiritsangiz bo'ladi

 

Web sahifaning asosiy matni. Bu erda siz muhim deb bilgan matn, tasvir va boshqa ma'lumotlarni kritasiz.
Web sahifaning asosiy matni. Bu erda siz muhim deb bilgan matn, tasvir va boshqa ma'lumotlarni kritasiz.
Reklama:
Bu kalonkaga reklama matni va oddiy tasvir yoki harakatlanuvchi tasvirni kiritsangiz bo'ladi

Murakkab jadvalni tuzishdan avval uni qanday ko'rinishda bo'lishini oldindan rejalashtirib olish lozim. Buning uchun siz tuzilishi lozim bo'lgan jadvalni andozasini ozingiz uchun chizib olishingiz maqsadga muvofiq. Har gal siz andozadan foydalangan holda jadval korinishini HTML kodlar yordamida aks ettirishingizga oson bo'ladi. Bu usulda ishlash sizga jadvalni tuzishni osonlashtiradi.
Birinchi qadam - tashqi jadval tuzish
Dastavval biz yaratayotgan sahifaning asosini tashkil etuvchi tashqi jadvalni tuzish lozim. Biz tuzgan misolda u beshta kataklardan iborat. birinchi katak - chap ustun, ikkinchi va to'rtinchi kataklar sahifadagi ustunlar o'rtasida masofa qoldirish maqsadida bo'sh qoldiriladi. Uchinchi katak - markaziy ustun vazifasini bajaradi. Beshinchi katak - reklama joylashtiriladigan ustun. Homaki jadval uchun jadval borderini 1 piksel miqdorida belgilaymiz. Bu usul bizga jadvalni ko'rib turish va unga turli o'zgartirishlar kiritishga imkon beradi. Kutilgan natijaga erishganimizdan song borderni olib tashlashimiz mumkin: BORDER =0. Misolda ko'rsatilgan jadval HTML kodi:
<TABLE BORDER=1 CELLPADDING=0 CELLSPACING=0 WIDTH=100%>

<TR>
<TD BGCOLOR=#336699 WIDTH=1% VALIGN=top>
<IMG SRC=img/p.gif WIDTH=150 HEIGHT=1 ALT=""><BR>
<FONT COLOR=white>Sayt menyusi:</FONT>
</TD>

<TD WIDTH=2% BGCOLOR=#cccccc> </TD>

<TD WIDTH=94% VALIGN=top BGCOLOR=#cccccc>
Web sahifaning asosiy matni.
<BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>
</TD>

<TD WIDTH=2% BGCOLOR=#cccccc> </TD>

<TD WIDTH=1% VALIGN=top BGCOLOR=#cccccc>
<IMG SRC=img/p.gif WIDTH=100 HEIGHT=1 ALT=""><BR>
<FONT COLOR=white>Reklama:</FONT>
</TD>

</TR>

</TABLE>
E’tibor bergan bo'lsangiz VALIGN (kataklar ichini vertikal tekislash) o'lchami top qilib belgilangan. Bunning sababi, ushbu o'lcham kiritilgan uchta ustundagi matn katakning tepa qismidan boshlanishi kerak.

Biz yaratmoqchi bo'lgan sahifaning asosiy jadvali tayyor. Endi ohirgi o'ng ustundagi reklama bo'limini bezaymiz. Buning uchun tashqi jadvalning ohirgi beshinchi katagida yozilgan "REKLAMA" sozi o'rnida ichki jadvalni kiritamiz. Quyida aynan o'sha reklama uchun munjallangan ichki jadval HTML kodi keltirilgan. Siz bu HTML kodlarni tushunish va ularni tahrirlashga malaka hosil qilishingiz lozim. Aks holda HTML kodlarni almashtirib yuborishingiz mumkin.
Barcha amallarni bajargach tashqi jadval borderini (BORDER=0) teng qilib belgilaymiz.

Ohirgi bajaradigan amalimiz jadvalda turli fon ranglar hosil bo'lmasligini ta'minlashdan iborat. Buning uchun <BODY> tegining BACKGROUND o’lchamidan foydalanishimiz. Bu misolda biz rangli tasvirni kiritamiz. Biz kiratidigan tasvirning o'lchamlari quyidagilardan iborat: tasvirning chap tomonida 150 pekselga teng miqdordagi maydon to'q ko'k ranga bo'yalgan va qolgan 1500 piksel maydon esa kulranda. Nima uchun 1500 piksel? Bunga asosiy sabab aksariyat monitorlarning ruhsat etilgan o'lchami 1624 pikseldan yuqori emas. Shu bois ham tasvirning umumiy o'lchami 1624 pekseldan yuqori bo'lishi lozim.
Siz orqa fon uchun ishlatiladigan tasvirni o'z kompyuteringiz hotirasiga saqlashingiz va siz tuzayotgan misolda ham ishlatishingiz mumkin.

Share