Jadvallar - Информатика и ИТ - Рефераты

Jadvallar

Загружено в:

20.09.2019

Скачано:

0

Размер:

161 KB

www.arxiv.uz Reja: 1. Jadvallar haqida umumiy ma`lumot. 2. Jadvallarninng qo`llanilishi va uni qurish. 3. Bir yacheykaga bir necha satrlarni birlashtirish. 4. Bir necha ustunlarni bir yacheykaga birlashtirish. 5. Jadvaldagi ranglar.

www.arxiv.uz Jadvallar haqida umumiy ma`lumot. Jadvallar-bu Web sahifalarda ma`lumotlarni (vizual) tashkil qilishning muhim vositalaridan biridir. Bizga ma`lumki HTMLda, bezatish elementlarini aniq koordinatalar bo`yicha joylashtirish vositalari mavjud emas. Shuning uchun jadvallardan shu maqsadda foydalanish maqsadga muvofiq. Jadvallarni Web sahifaga joylashtirib, ularning kataklariga bezatish elementlarini joylashtirish mumkin. Bundan tashqari yana freymlar deb ataluvchi vositalar yordamida ham bu ishlarni amalga oshirish mumkin. Lekin bu vosita oxirgi vaqtlarda Web masterlar orasida o`z ommaviyligini yo`qota boshladi. Biz freymlarga keyingi ma`ruzamizda batafsil to`xtalamiz. Jadvallardan to`laligicha foydalanish qoidalarini bilish uchun ularning tuzilishini yaxshi bilish talab qilinadi. HTML da jadvallar satrlardan tashkil topadi, satrlar esa o`z navbatida yacheyka (katak)lardan tashkil topadi. Shunday ekan bu obyektlarning har birining o`z parametrlari mavjud. Bu parametrlar yordamida ularning o`lchamlarini o`rnatish mumkin. Agar biz jadvalning kengligini oldindan aniqlab qo`ygan bo`lsak, masalan 100 piksel deb aniqlagan bo`laylik va har bir satrda 4 ta yacheyka joylashgan bo`lib bu yacheykalarning har birining uzunligi 30 pikseldan iborat bo`lsin, u holda jadval kengligi 100 piksel bo`lmasdan balki 120 piksel bo`ladi. Agar birorta yacheyka kengligi 30 pikseldan ko`p bo`lgan grafik tasvir joylashgan bo`lsa, u holda yacheykaning kengligi tasvir kengligiga mos ravishda kengayadi, buning natijasida esa butun jadvalning kengligi oshadi. Bu imkoniyat shuning uchun yaratilgan, buning natijasida qar bir yacheykadagi ma`lumot aniq va hech qanday yo`qotishlarsiz to`laligicha tasvirlanadi. Shuni e`tiborga olish kerakki jadvalning ustunlarini oldindan aniqlash imkoniyati yo`q. Ustunlarni brauzerning o`zi jadval satrlarini tahlil qilib aniqlaydi va jadvalni to`laligicha tasvirlaydi. Endi biz jadval teglari bilan tanishishni boshlaymiz. Jadval va uning tashkil etuvchi hamma elementlari <table> va </table> teglari orasida sarlavhasi esa <caption> va </caption> teglari orasida joylashtiriladi. Jadvallarda bundan tashqari

www.arxiv.uz ustunlar guruhini <col> va <colgroup> teglari yordamida aniqlash mumkin, hamda <thead> va <tfoot> teglar bilan mos ravishda jadvalning yuqorigi va pastgi sarlavhalarini (shapkalarini) tashkil qilish mumkin. Satrlar guruhini esa <tbody> tegi yordamida hosil qilamiz. Shunday qilib jadval asosan yuqorida ko`rilgan teglardan tashkil topadi, qolgan boshqa jadval elementlari esa shu obyektlar ichida joylashadi. <table> tegida jadvalning barcha xususiyatlarini o`rnatish uchun yetarli bo`lgan parametrlar mavjud. Jadvallarda balandlikni o`rnatish parametri yo`q, kenglikni esa width shart bo`lmagan parametr bilan o`rnatish mumkin. Jadvaldagi yacheykaning balandligi yacheykadagi obyektning o`lchamiga mos ravishda hisoblanadi. Jadval chegaralarining kengligini o`rnatish uchun border parametridan foydalanamiz. Bu parametrga manfiy bo`lmagan butun qiymat beriladi. Chunki u chegaradagi chiziqlarning kengligini (piksellarda) o`rnatadi. Agar biz bu parametrga “nol” qiymat o`rnatsak jadval chegaralari ko`rinmas holatga o`tadi. Bu esa bizga yacheykalarida Web sahifaning elementlari joylashgan ko`rinmas jadval tuzish imkoniyatini yaratadi. Yacheykalar o`rtasidagi masofani cellspaciing parametri yordamida piksellarda o`rnatish mumkin. Xuddi shunga o`xshash cellpadding parametri yacheyka ichidagi obyekt bilan uning chegaralari orasidagi masofani piksellarda o`rnatadi. Shunday qilib cellspacing yacheykalar o`rtasidagi ochiq (bo`sh) masofa, cellpadding esa yacheyka ichidagi bo`sh qoldirilgan joy.

www.arxiv.uz Jadvallarninng qo`llanilishi va uni qurish Ro`yxatlardagi bitta kamchilik – bu ularning bir o`lchovliligidir. Bu degani siz ro`yxatda ma`lumotlarni ketma-ketlik bilan satrma-satr joylashtirishingiz mumkin deganidir. Jadvallar ma`lumotlarni faqat satr bo`ylab emas balki ustun bo`yicha ham joylashtirish imkonini beradi. Jadvallarni shunday ishlatish kerakki ular Web sahifada shunchaki joy egallamasligi kerak. Jadvalning satr va ustunlari ma`lumotlarni taqqoslash, qarama - qarshi qo`yish imkonini beradi. Har bir satr va ustundagi ma`lumotlarni elektron jadval singari tasvirlash mumkin. Yaxshi tuzilgan jadval bilan Web sahifa ma`lumotga boy va tartibli bo`ladi, ammo ko`rimsiz jadval sizning ma`lumotlaringizni chalkashtirib yuboradi. Jadval masalasi murakkab ko`rinishi mumkin, chunki buning uchun butun bir teglar ketma-ketligi tuziladi. <table> va </table> teglar jadvalini butunligicha o`z ichiga oladi. Ma`lumot chiqarilishini boshqa bir teglar ketma-ketligi aniqlaydi. Quyida jadvalning hamma teglari ifoda qilingan: <table>, </table> bu teglar jadvalni egallaydi. <table> tegi brauzerga o`zidan keyin jadvalning berilishi kelishini xabar qiladi. Agar siz satr va ustunlarni ajratib turuvchi (chiziqlari) ko`rinishini o`zgartirishni xoxlasangiz border kalit so`zini kiriting (<table border> hosil bo`ladi); <caption> va </caption> bu teglar bilan belgilangan matn sarlavha ko`rinishini oladi. Sarlavhani berish masalasi <tc> va </tc> yordamida ham bajarilishi mumkin; <th> va </th> bu teglar matnni satr yoki ustun sarlavhasi qilib, biroz qalin shriftda tasvirlaydi; <tr> va </tr> jadvalning har bir satrini aniqlaydi. </tr> tegi zarur emas, biroq u sizning HTML kodingizni yanada to`la tushunarli qiladi; <td> va </td> bu teglar juftligi jadvalning har bir yacheykasi uchun matn ajratadi; Sizning birinchi qadamingiz – ona teg <table> ni kiritish.

www.arxiv.uz <table> </table> jadvalning har bir yacheykasi nozik chiziqlar bilan bo`linishi uchun <table> tegiga border=1 kalit so`zini kiriting. Agar bu bo`lmasa yacheykaning so`zlari avtomatik tarzda tekislanadi, ammo jadvalda to`r (ajratuvchi chiziqlar) bo`lmaydi. Endi yacheykalarni birin-ketin yaratib boring. Dastlab satrni bering: <table> <tr> </tr> </table> bundan so`ng ustunning sarlavhasi bo`ladigan yacheykani bering. Brauzerlar sarlavhani qolgan matnlarga nisbatan qalinroq shriftda tasvirlaydi. <table> <tr> <th> god </th> <th> model </th> <th> marka </th> </tr> </table> Hozir sizning jadvalingiz ustunlarning sarlavhasi hisoblangan bita satrdan iborat. Qolgan satrlarni ham kiritib boshlaymiz. Har bir satrda ustunlar soniga razm solib boring, hozirgi holatda 3 ta ustun mavjud. Misol 8_1. <html> <head> <title>Jadval</title> </head> <table border=1> <tr>

www.arxiv.uz <th> yil </th> <th> model </th> <th> marka </th> </tr> <tr> <td> 1986 </td> <td> toyota </td> <td> cozolla </td> </tr> <tr> <td> 1986 </td> <td> chazolet </td> <td> nova </td> </tr> <tr> <td> 1996 </td> <td> plymouth </td> <td> neon </td> </tr> </table> </html>

www.arxiv.uz Web sahifalarda juda ko`p satr va ustundan iborat jadvallarni yaratish mumkin. a. Bir yacheykaga bir necha satrlarni birlashtirish. Agar siz tez-tez jadvallardan foydalanib tursangiz, qaysidir bir yacheyka jadvalning bir necha satrlarini birlashtirish lozim bo`lib qolgan vaziyat bilan albatta tanishsiz. Bu yerda sizga <td> tegi ichiga qo`shiladigan rowspan kalit so`zi asqotadi. Misol qilib bundan keyingi bo`limlarda beysbol jadvlining versiyalarini ko`rib o`tamiz. Misol 8_2. <html> <head> <title>Birlashtirish</title> </head> <body> <table border=1> <tr> <td> Dilshod </td>

www.arxiv.uz <td rowspan=2> Xorazm </td> <td> 16 - 2 </td> <td> 2.73</td> <td> 194 </td> </tr> <tr> <td> Mahmudjon</td> <td> 28 - 2 </td> <td> 1.92</td> <td> 199 </td> </tr> <tr> <td> Javlon</td> <td> Nukus</td> <td> 28 - 1 </td> <td> 1.95</td> <td> 200 </td> </tr> </table> </body> </html>

www.arxiv.uz b. Bir necha ustunlarni bir yacheykaga birlashtirish va ro`yxat kirgizish. rowspan bir necha satrlarni birlashtirgani kabi, colspan bir necha ustunlarni birlashtiradi. colspan kalit so`zi yordamida siz istagan miqdordagi ustunlarni bir yacheykaga birlashtirishingiz mumkin. Quyidagi misolga e`tiboringizni qarating: Misol 8_3. <html> < head >< title > Jadval va ro`yxat </ title > </head> <body> <table border=1> <tr> <th colspan=2> shaxsiy ma`lumot </th> <th colspan=3> statistika </th> </tr> <tr> <th> ism </th> <th> komanda </th>

www.arxiv.uz <th> g`alaba/mag`lubiyat </th> <th> jarima </th> <th> ochko </th> </tr> <tr> <th> Dilshod </th> <th> Jayxun </th> <th> 2/1 </th> <th> 0 </th> <th> 7 </th> </tr> <tr> <th> Mahmudjon </th> <th> Spartak </th> <th> 3/1 </th> <th> 0 </th> <th> 10 </th> </tr> </table> </body> </html>

www.arxiv.uz  Ehtiyotkorlik! rowspan (yoki colspan ) lardan foydalanganda mos holda satr yoki ustunlarning miqdorini kamaytirishni esdan chiqarmang. Jadvalga HTML ning boshqa elementlarini ham qo`shish mumkin. Shunday ekan unga ixtiyoriy turdagi ro`yxat kiritilishi mumkin. Qat`iy ravishda yoyilgan teglardan foydalanganlikni kuzatib borish kerak, aks holda ro`yxat kodlarini ajratib ko`rish qiyin bo`ladi.  Jadval yacheykalarining vertikal yoki gorizontal ravishda matnni tekislash masalasini berish mumkin. Tekislash usullari maxsus align va valign kalit suzlari yordamida beriladi. Yana siz umumiy ravishda jadval uchun tekislashda (<table> tegida), joriy satr uchun (<tr> tegda) yoki bir yacheyka uchun (<td> tegda) berish mumkin.  align va valign kalit so`zlarining har biri uchun 3 ta mumkin bo`lgan ifodalari bor:  align=left matnni yacheykaning chap tarafi bo`yicha tekislaydi (jimlik)  align=center matnni yacheykaning markazi bo`ylab tekislaydi  align=right matnni yacheykaning o`ng tarafi bo`yicha tekislaydi  valign=top matnni yuqori qismi bo`yicha tekislaydi (agarda ma`lumot bir necha satrdan iborat bo`lganda foydalaniladi)

www.arxiv.uz  valign=middle matnni yacheykaning markazidan vertikal bo`ylab tekislaydi (jimlik holatida)  valign=bottom matnni yacheykaning past qirrasi bo`ylab tekislaydi. c. Jadvaldagi ranglar So`ngi vaqtlargacha Web sahifaning jadvaldagi ranglarni boshqarish imkoni mavjud emas edi. Jadval turi qora rangda, fon esa sahifa foni rangi bilan mos tushar edi. Biror bir yacheykaning rangini boshqasidan ajratish va har xil ranglardan foydalanish juda qiyin bo`lgan. Xozirda fon va tur rangini berish mumkin bo`lgan yangi teglar qatori mavjud. Birinchi holda bgcolor kalit so`zi <table> tegida quyidagi ravishda qo`yiladi. <table border bgcolor=yellow> </table> Endi esa jadval fonining rangi sariq bo`ladi. Quyidagi 16 rangdan ixtiyoriy birini uning nomini ko`rsatgan holda berishingiz mumkin: Black - qora Treen - to`q yashil Navy - to`q ko`k Tial - ko`k Silver - ochiq kul rang Lime - yashil Blue - ko`k Aqua - beryozoviy Maroon - malinoviy Olive - olivkoviy Purple - sirenoviy Troy - temno-seriy Red - qizil Yellow - sariq Fuchsia - rozoviy White - oq bgcolor kalit so`zidan boshqa yana ranglarni boshqarish uchun quydagi kalit so`zlari ham ishlatiladi: bordercolor – jadval qoshiyasining (turining) rangini o`zgartirish. bordercolordark/bordercolorlight - jadval qoshiyasining (turining) rangini qo`shimcha 3 o`lchamli ko`rinishda o`osil qilish uchun ishlatiladi.

www.arxiv.uz Quyida yangi kalit so`zlarning barchasini ishlatib tuzilgan oddiy namuna berilgan: <table border=2 bgcolor=yellow bordercolor=red bordecolordark=blue border color light=grey> </table> Ko`rib turganingizdek siz bu kalit so`zlar yordamida jadvalning tashqi ko`rinishini o`zgartirishning ko`p imkoniyatlariga ega bo`lasiz. Bu hali hammasi emas. Bu kalit so`zlarni har bir satr va yacheyka uchun berishimiz mumkin. Pastda berilgan HTML kodda har bir yacheykaninng rangi alohida beriladi. Misol 8_4. <html> <head> <title>Jadval katakchalari</title> </head> <body> <table border=2 width=300> <tr> <td bgcolor=yellow> </td> <td bgcolor=black> <font color=yellow> 11111</font> </td> </tr> <tr> <td bgcolor=black> <font color=yellow> 22222 </font> </td> <td bgcolor=yellow> 33333</td> </tr> </table> </body> </html>

www.arxiv.uz Bu kalit suzlarni tr tegida ham berish mumkin. Bunda satrning rangi beriladi. Jadval matnining rangi uning foni rangi bilan mos tushmaganligiga e`tiboringizni qarating. Matn rangi font tegi yordamida o`zgartirilishi kerak.

Похожие

Elektron jadvallar

Elektron jadvallar

Wordda Jadvallar yaratish

Elektron jadvallar va ularni o’qitish usullari

Jadvallar redaktorida iqtisodiy ma`lumotlarni qayta ishlash