
Jadval tuzish

----------

<tr>..</tr> 

(table row-jadval qatori) Har qanday jadvalda qatorlar mavjud bo'ladi, qancha <tr>...</tr> bolsa o'shancha qator demakdir, quyidagi jadvalda 4 ta <tr> ochilib 4 marta </tr> yopilyapti. Bitta <tr> ichida yoziladigan har qanday attribute bitta o'sha qator da joylashgan hamma kataklar uchun o'rinlidir, hamma qatorlar uchun o'rinli bo'lishi uchun har bir qator ichiga kerakli attributelarni birma bir yozib chiqishga to'g'ri keladi. Quyidagi har bir attribute qoidasi va tushuntirilishlari faqat bitta <tr>...</tr> uchun o'rinlidir.

<body> tegidan so`ng yoziladigan jadval kodi:

qator-1:  <table align="center" width="340" border="1" cellspacing="0" cellpadding="0">
qator-2:  <caption align="top">
qator-3:  <strong>Dars Jadvali</strong>
qator-4:  </caption>
qator-5:  <tr>
qator-6:  <th width="100" scope="col">&nbsp;</th>
qator-7:  <th width="120" scope="col">Dushanba</th>
qator-8:  <th width="120" scope="col">Seshanba</th>
qator-9:  </tr>
qator-10: <tr>
qator-11: <th scope="row">8:00-9:30</th>
qator-12: <td>Tarih</td>
qator-13: <td>Ingiliz tili </td>
qator-14: </tr>
qator-15: <tr>
qator-16: <th scope="row">10:00-11:30</th>
qator-17: <td>Fizika</td>
qator-18: <td>Matematika</td>
qator-19: </tr>
qator-20: <tr>
qator-21: <th scope="row">12:00-13:30</th>
qator-22: <td>Ona-Tili</td>
qator-23: <td>Geometriya</td>
qator-24: </tr>
qator-25: </table>
Endi bu jadvalga izoh beramiz:
qator-5: da birinchi jadval qatori ochilyapti, va qator-9: da birinchi jadval qaori yopilyapti.

qator-10: da ikkinchi jadval qatori ochilyapti, va qator-14: da ikkinchi jadval qaori yopilyapti.

qator-15: da uchinchi jadval qatori ochilyapti, va qator-19: da uchinchi jadval qaori yopilyapti.

qator-20: da to'rtinchi jadval qatori ochilyapti, va qator-24: da to'rtinchi jadval qatori yopilyapti.

Eng asosiy attributelari:
align="center" - align matnning gorizontal joylashuvini anglatadi, valign esa vertical joylashuvidir. Jadvalimizning qaysi qatori ichiga <tr align="center"> tagi yozilsa o'sha qator ma'lumotlari jadvalimiz kataklari ichidagi markazlashadi. Quyidagi jadvalda hafta kunlari va soatlar, mos ravishda ustun va qatorlarga sarlavha vazifasini o'tashmoqdadir (<th> mavzusida to'liqroq) shuning uchun ular default (po umolchaniyu) tarzda o'z o'zidan qator markazlarida keladi, biroq <th> tagimiz <tr>...</tr> taglarimiz orasida kelgani uchun <tr> tagining har qanday attributi <th> gaham ta'sir qiladi. Lekin ikkinchi qatorimizning "Tarih" va "Ingiliz tili" bo'limi chap tarafga yopishgan holda kelyapti shuning uchun yuqoridagi qator-10: dagi <tr> tagi ichiga align="center" yozib (<tr align="center">) quyidagi natijaga erishamiz. Agar siz hamma qatorlardagi ma'lumotlarni markazda kelishini hohlasangiz hamma <tr> ga alohida-alohida align="center" yozib chiqishingizga to'g'ri keladi. Chinki <table align="center"> bizning jadvalimizni o'zini markazlash uchundir uning ichidagi ma'lumotlarini emas.
Misol:
<tr align="center">
<th scope="row">8:00-9:30</th>
<td>Tarih</td>
<td>Ingiliz tili </td>
</tr>

bgcolor=" " Ba'zan jadvalimizning ma'lum bir qatorini boshqa qatorlardan ajratish maqsadida biror rangda belgilashimiz mumkin, uning uchun o'sha qatorni anglatuvchi <tr> tagi ichiga bgcolor="" attributini ishlatishimizga to'g'ri keladi. Masalan quyida birinchi qatorni sariq (yellow) rangda belgilimiz.
Misol:
<tr bgcolor="yellow">
<th width="100" scope="col">&nbsp;</th>
<th width="120" scope="col">Dushanba</th>
<th width="120" scope="col">Seshanba</th>
</tr>
bordercolor=" " Ba'zan jadvalimizning ma'lum bir qatorini boshqa qatorlardan ajratish maqsadida chiziqlarini biror rangda belgilashimiz mumkin, uning uchun o'sha qatorni anglatuvchi <tr> tagi ichiga bordercolor="" attributini ishlatishimizga to'g'ri keladi. Masalan quyida birinchi qatorni chiziqlarini ko'k (blue) rangda belgilimiz.
<tr bordercolor="blue">
<th width="100" scope="col">&nbsp;</th>
<th width="120" scope="col">Dushanba</th>
<th width="120" scope="col">Seshanba</th>
</tr> 

height=" " - Jadvalimizning biror qatorini boshqa qatorlardan farqli o'laroq bo'yi jihatidan kattaroq qilishni hohlasak shu attributeni o'sha qatorni anglaruvchi <tr> tagi ichiga yozishimizga to'g'ri keladi. Quyidagi jadvalda men birinchi qatorni tanladim siz ham istagan qatorizi tanlashiz mumkin faqat yodizda bo'lsin bitta yoki ikkita qator uchun bu attributeni ishlatsek ham bo'ladi lekin butun bir jadval uchun <table height=""> ishlatilinadi.
<tr height="30">
<th width="100" scope="col">&nbsp;</th>
<th width="120" scope="col">Dushanba</th>
<th width="120" scope="col">Seshanba</th>
</tr>

title=" " - Jadvalimizning qaysi qatoriga sichqonchaning ko'rsatkichini olib borsak o'sha qator ma'lum bir nom bilan sichqoncha ko'rsatkichi oldida paydo bo'lishi hohlasak o'sha qatorga title=" " attributini istagan so'zimizni uning qiymati sifatida ishlatishimizga to'g'ri keladi.
Misol:
<tr title="Fizika va matematika 10:00 dan 11:30 gacha!">
<th scope="row">10:00-11:30</th>
<td>Fizika</td>
<td>Matematika</td>
</tr>

valign="bottom" - Jadvalimizning vertical joylashuvini pastga qilib belgilaydi. Ma'lumotimizni quyida joylashganini ko'risatish maqsadida katak balandligi qisman kattaroq qilb olingandir.
Misol:
<tr valign="bottom" height="40" >
<th scope="row">8:00-9:30</th>
<td>Tarih</td>
<td>Ingiliz tili </td>
</tr>

Downloaded from http://test1.ru