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



6-dars - Jadval tuzish

 Jadval tuzish

Jadval tuzish - HTML bo'yicha o'quv qo'llanmadagi o'zlashtirish qiyin bo'lgan bo'limlardan biri. Shu bois bu bo'limni jadval tuzishni eng sodda usullaridan boshlaymiz. Web sahifani mukammal darajada yaratishni hohlasangiz, unda jadval tuzishni chuqur o'rganib olishingiz kekar. Siz hozir o'qib turgan sahifa ham jadvallar yordamida aks ettirilgan. Jadval ichida kiritilgan matn qora qangda va jadval foni oq rangda ekran markaziga joylashtirilgan. Jadvalsiz ayni amallarni bajarish juda ham mushkil. 
Qisqa qilib aytganda jadvallar yordamida sahifani o'zingiz hohlagan tarzda boshqa olishingiz mumkin. Jadval ichiga nafaqat matn, balki tasvir va boshqa elementlarni tartibli joylashtirish mumkin.
"Jadval tuzish - umumiy tuzilish "
Jadval tuzishda ishlatiladigan teglarni tasniflashdan avval, oddiy jadval tuzish sxemasi bilan tanishib chiqsak. Har qanday jadval quyidagi sxema bo'yicha tuziladi:
<JADVALNI OCHUVCHI TEG>

<JADVAL QATORINI OCHUVCHI TEG>

<JADVAL BO'LAGINI OCHUVCHI TEG>
Matn, tasvir yoki jadval
</JADVAL BO'LAGINI YOPUVCHI TEG>

</JADVAL QATORINI YOPUVCHI TEG>

</JADVALNI YOPUVCHI TEG>
Har qanday jadvalda qatorlar va ustunlar mavjud bo'ladi. Jadvalning bo'lakchalarida esa axbvorot kiritilishi mumkin. Yuqorida keltirilgan misoldan ko'rinib turibdiki, bitta ustun, bitta qator va bitta bo'lakchadan iborat jadvalni tuzish uchun jadval ocxiladi va yopiladi. Agar bitta ustundan iborat va bir necha qatorni o'z ichiga olgan jadvalni tuzish uchun, jadval qatorini ochuvchi va yopuvchi teglar orasiga bir nechta jadval bo'lakchalarini ochuvchi va yopuvchi teglarini kiritish lozim.
"Jadval tuzish - oddiy jadval"
Jadval tuzish uchullarini tushunib olish uchun das avval eng oddiy jadvalni tuzishni o'rganamiz. Biz tuzmoqchi bo'lgan jadval uchta ustundan iborat bo'ladi va har bir ustunda 3 dona bolakchalar o'rin oladi. Jadvalning birinchi ustunini"Mahsulot", ikkinchisini esa - "Rangi", uchunchisini- "Narhi" deb nomlaymiz. Biz tuzgan jadval mana bunday ko'rinishda bo'ladi:

Mahsulot

Rangi

Narhi (co'm.)

Qalam

Qora

100

Qalam ochgich

Qora

500

Endi ushbu jadvalni tuzishda qanday HTML teglardan foydalanilganligini ko'rib chiqamiz. (qora rangdagi so'zlar har bir tegning tasnifi):
<TABLE>

<TR>
<TD>Mahsulot</TD>
<TD>Rangi</TD>
<TD>Narhi (co'm.)</TD>
</TR>
<TR>
<TD>Qalam</TD>
<TD>Qora</TD>
<TD>100</TD>
</TR>
<TR>
<TD>Qalam ochgich</TD>
<TD>Qora</TD>
<TD>500</TD>
</TR>
</TABLE> Jadvalni ochuvchi teg
1 - qatorni ochuvchi teg
1 - Jadval bo'lagini ochuvchi va yopuvchi teg
2 - Jadval bo'lagini ochuvchi va yopuvchi teg
3 - Jadval bo'lagini ochuvchi va yopuvchi teg
1 - qatorni yopuvchi teg

Jadvalni yopuvchi teg

Misolda korinib turibdiki, jadvalni <TABLE> va</TABLE> teglari yordamida ocxiladi va yopiladi. qatorlar uchun <TR> va</TR> teglari qo'llaniladi, <TD> va </TD> teglari esa jadval ustunlarini (bo'akchalarini) belgilash uchun ishlatiladi.
"Jadval tuzish - HTML teg o'lchamlari"
Murakkab jadvallar tuzishni boshlashdan avval <TABLE>, <TR> va <TD> teglariga qisqacha tasnif berib o'tamiz. Maskur uchta teg bilan qo'llaniladigan bir xildagi o'lchamlar mavjud bo'lib, faqatgina ularninig farqli tomoni, ularning ta'sir doiralarining chegaralanishida.
<TABLE>, <TR> va <TD>
BGCOLOR
Bu teg tasnifi "Matindagi alohida bo'laklarni tahrirlash" bo'limida kertirib o'tganmiz. Uning yordamida jadvalning orqa fonida qanday rang qollanilishi belgilanadi.
BACKGROUND
Jadvaldagi bo'lakcha foni sifatida berilayotgan tasvirni joylashgan joy va uning nomini belgilash uchun ishlatiladi. Agar siz bu o’lchamni <TABLE> tegidan so'ng qo'llasangiz, u holda siz tanlagan tasvir jadvaldagi har bir bo'laklar foni sifatida qo'llaniladi. <TR> tegidan so'ng qo'llanilganda , maskur qatorda joylashgan hamma bo'lakchlar uchun, <TD> tegidan so'ng qo'llanilganda esa то в конкретной ячейке.
WIDTH
Jadval kengligining o’lchami (umumiy jadval uchun hos). Bu o'lcham bilan jadvaldagi ma'lum bir ustuncha yoki bo'lakning kengligini piksel yohud foiz o'lchamida belgilash mumkin. Bu o'lcham <TABLE> yoki <TR> tegi bilan qo'llanilgan taqdirda ham bir xil ko'rinishdagi, ya’ni siz bergan o'lchamlarni hisobga olgan holda jadval eninig kengligini belgilaydi. Shuni doim yodda tutish lozimki, siz bu o'lchamdan foydalangan holda jadval eninig kengligini belgilaganingizda bir xildagi o'lchov turidan foydalanishingiz maqsadga muvoffiq. Agar siz jadval kengligini piksellarda belgilasangiz (misol uchun WIDTH=100), boshqa olchovlar ham pikselda belgilanishi lozim. Agar jadval kengligi foizlar hisobida berilsa (misol uchun WIDTH=50%), boshqa o'lchovlar ham foiz hisobida berilishi lozim. Ayni holarda brauser siz yaratgan jadvalni ekrannig teng yarmi, ya’ni 50% ga joylashtiradi.
HEIGHT
Jadvalning, qator yoki bo'lakchalarning balantligi o'lchovlarini piksellar yoki foiz hisobida belgilash uchun qo'llaniladi
<TABLE>
BORDER
Jadval ustuni va qatorilari kesishmalarini belgilovchi chiziqlarni qalinligini piksellar hisobida belgilash uchun qo'llaniladi. Agar jadval chiziqlarini nolga teng qilib belgilansa а BORDER (BORDER=0) chiziq (border) brauserda ko'rinmaydigan bo'lib qoladi.
ALIGN
Jadvalning ekranga nisbatan joylashish o'rnini belgilaydi. Agar jadval ichida qo'shimcha jadval tuzilgan bo'lsa, u holda ichki jadvalga bu o'lcham kiritilganda, ichki jadval joylashish o'rni tashqi jadvalga nisbatan belgilanadi. ALIGN ning quyidagi qo'shimcha o'lchamlari mavjud:ALIGN - center (Jadvalni markaz bo'ylab joylashtirish), left (chap burchak bo'ylab joylashtirish) va right (o'ng burchak bo'ylab joylashtirish).
CELLPADDING
Border eninig kengligini pikseller yordamida kengaytirish yoki toraytirish.
CELLSPACING
Jadvaldagi bo'lakchalar borderi eninig pikseller yordamida kengaytirish yoki toraytirish.
Misol:
<TABLE BORDER=0 WIDTH=100% CELLSPACING=5
CELLPADDING=5 BGCOLOR=blue>
<TR BGCOLOR=yellow>
<TD>Mahsulot</TD>
<TD>Narhi</TD>
</TR>
<TR BGCOLOR=white>
<TD>Qalam</TD>
<TD>100 so'm</TD>
</TR>
</TABLE>

Natija:

Mahsulot

Narhi

Qalam

100 so'm

<TR> va<TD>
ALIGN

Jadvaldagi har bir bo'lakchaning ichidagi elementlarni gorizontal tarzda tartiblash uchun qo'llaniladi. Uning mavjud o'lchamlari quyidagilardan iborat: - left (chab tomonga tekislash), right (o'ng tomonga tekislash) va center (markaz bo'ylab tekislash).
VALIGN
Jadvaldagi har bir bo'lakchaning ichidagi elementlarni vertikal tarzda tartiblash uchun qo'llaniladi. Uning mavjud o'lchamlari quyidagilardan iborat: - top (bo'lakning yuqori qismiga nisbatab), middle (Yuqori va quyi qismiga nisbatan markazga tekislash).
"Jadval tuzish qoidalari"
Bu sahifada jadval tuzish jarayonida siz amal qilishingiz lozim bo'lgan eng asosiy qoida va maslahatlar keltirilgan.
• <TABLE>, <TR> va<TD> teglarini tartibiga rioya qiling
Har doim jadval tuzish sxemasini buzmaslikka harakat qiling. Avval aytib o'tilganidek eng avvalo jadvalni oching va songra jadval ustunlari va qatorlarini tuzing va eng ohirida jadvalni yoping. ushbu tartib buzilgan taqdirda turli xatoliklar kelib chiqishi mumkin.
• <TABLE> tegini jadval so'ngida yoping
Agar <TABLE> tegini yopmasangiz kutilmagan xatoliklar vjudga keladi. Masalan Netscape Navigator siz tuzgan jadvalni ekranda umuman ko'rsatmaydi.
• Ustunda joylasgan bo'laklar soni
Har bir qatorda bo'laklarning soni bir xilda bo'lishiga e’tibor bering. Bu tartibga, agar siz ayrim kataklarga hech qanday axborot kiritmagan taqdiringizda ham ularni yaratish lozim. Bunday holatlarda bo'sh katakchalarni man bunday ko'rinishda yozish lozim: <TD> </TD>. ' ' simvoli brauserga maskur katakda hech qanday axborot mavjudmasligi haqida habar beradi. Agar ushbu simvol yozilmagan taqdirda brauser bu katakni aks ettirmaydi va <TD> tegida BGCOLOR komandasi ishlatilgan taqdirda fon rangi ifoda etilmaydi va xatolik yuz beradi.
• Har bir jadval tegini yangi qatorda yozing
Jadval tuzishda adashib ketmaslik uchun har bir jadval qatori, ustuni va katakchalar belgilanganda ularni bir-biridan ajrativ yozishga harakat qiling. Quyida anashu holatga misol keltirilgan.
<TABLE>

<TR>
<TD> ... </TD>
<TD> ... </TD>
<TD> ... </TD>
</TR>

<TR>
<TD> ... </TD>
<TD> ... </TD>
<TD> ... </TD>
</TR>

</TABLE>

Ushbu qoidalarga rioya qilsangiz jadval tuzishda turli qiyincxiliklarga duch kelmaysiz hamda siz tuzgan jadvallarda xatoliklar bo'lmaydi.

Share