7. Web sahifaga jadval joylashtirish

Web sahifaga jadval joylashtirish

Reja:

1. Jadval tuzish - umumiy tuzilish

2. Jadval tuzish - oddiy jadval

3. Jadval tuzish - HTML teg o'lchamlari

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. Veb 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 ochiladi 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 man bunday ko'rinishda bo'ladi:

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>

Misolda korinib turibdiki, jadvalni < TABLE> va< /TABLE> teglari yordamida ochiladi 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 hildagi 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 olchamni < 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 olchami (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 hil ko'rinishdagi, yani siz bergan o'lchamlarni hisobga olgan holda jadval eninig kengligini belgilaydi. Shuni doim yodda tutish losimki, siz bu o'lchamdan foydalangan holda jadval eninig kengligini belgilaganingizda bir hildagi o'lchov turidan foydalanishingiz maqsadga muvoffiq. Agar siz jadval kengligini piksellarda belgilasangiz (misol uchun WIDTH=100), boshqa olchovlar ham pikselda belgilanishi losim. Agar jadval kengligi foizlar hisobida berilsa (misol uchun WIDTH=50%), boshqa o'lchovlar ham foiz hisobida berilishi losim. Ayni holarda brauser siz yaratgan jadvalni ekrannig teng yarmi, yani 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:

Natija:

< 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