HTML да жадваллар - Информатика и ИТ - Рефераты

HTML да жадваллар

Загружено в:

20.09.2019

Скачано:

0

Размер:

175 KB

HTML да жадваллар РЕЖА: 1. Жадваллар ҳ ақида умумий маълумот. 2. Жадвалларниннг қўлланилиши ва уни қуриш. 3. Бир ячейкага бир неча сатрларни бирлаштириш. 4. Бир неча устунларни бир ячейкага бирлаштириш. 5. Жадвалдаги ранглар.

Жадваллар ҳ ақида умумий маълумот. Жадваллар-бу Web саҳифаларда маълумотларни (визуал) ташкил қилишнинг му ҳ им воситаларидан биридир. Бизга маълумки HTML да, безатиш элементларини аниқ координаталар бўйича жойлаштириш воситалари мавжуд эмас. Шунинг учун жадваллардан шу мақсадда фойдаланиш мақсадга мувофи қ . Жадвалларни Web саҳифага жойлаштириб, уларнинг катакларига безатиш элементларини жойлаштириш мумкин. Бундан ташқари яна фреймлар деб аталувчи воситалар ёрдамида ҳам бу ишларни амалга ошириш мумкин. Лекин бу восита охирги вақтларда Web мастерлар орасида ўз оммавийлигини йўқота бошлади. Биз фреймларга кейинги маърузамизда батафсил тўхталамиз. Жадваллардан тўлалигича фойдаланиш қоидаларини билиш учун уларнинг тузилишини яхши билиш талаб қилинади. HTML да жадваллар сатрлардан ташкил топади, сатрлар эса ўз навбатида ячейка (катак)лардан ташкил топади. Шундай экан бу объектларнинг ҳ ар бирининг ўз параметрлари мавжуд. Бу параметрлар ёрдамида уларнинг ўлчамларини ўрнатиш мумкин. Агар биз жадвалнинг кенглигини олдиндан аниқлаб қ ўйган бўлсак, масалан 100 пиксел деб аниқлаган бўлайлик ва ҳ ар бир сатрда 4 та ячейка жойлашган бўлиб бу ячейкаларнинг ҳ ар бирининг узунлиги 30 пикселдан иборат бўлсин, у ҳ олда жадвал кенглиги 100 пиксел бўлмасдан балки 120 пиксел бўлади. Агар бирорта ячейка кенглиги 30 пикселдан кўп бўлган график тасвир жойлашган бўлса, у ҳ олда ячейканинг кенглиги тасвир кенглигига мос равишда кенгаяди, бунинг натижасида эса бутун жадвалнинг кенглиги ошади. Бу имконият шунинг учун яратилган, бунинг натижасида қ ар бир ячейкадаги маълумот аниқ ва ҳ еч қандай йўқотишларсиз тўлалигича тасвирланади. Шуни эътиборга олиш керакки жадвалнинг устунларини олдиндан аниқлаш имконияти йўқ. Устунларни браузернинг ўзи жадвал сатрларини та ҳ лил қилиб аниқлайди ва жадвални тўлалигича тасвирлайди.

Энди биз жадвал тэглари билан танишишни бошлаймиз. Жадвал ва унинг ташкил этувчи ҳамма элементлари < table > ва </ table > тэглари орасида сарлавҳаси эса < caption > ва </ caption > тэглари орасида жойлаштирилади. Жадвалларда бундан ташқари устунлар гуру ҳ ини < col > ва < colgroup > тэглари ёрдамида аниқлаш мумкин, ҳамда < thead > ва < tfoot > тэглар билан мос равишда жадвалнинг юқориги ва пастги сарлавҳаларини (шапкаларини) ташкил қилиш мумкин. Сатрлар гуру ҳ ини эса < tbody > тэги ёрдамида ҳ осил қ иламиз. Шундай қилиб жадвал асосан юқорида кўрилган тэглардан ташкил топади, қолган бошқа жадвал элементлари эса шу объектлар ичида жойлашади. < table > тэгида жадвалнинг барча хусусиятларини ўрнатиш учун етарли бўлган параметрлар мавжуд. Жадвалларда баландликни ўрнатиш параметри йўқ, кенгликни эса width шарт бўлмаган параметр билан ўрнатиш мумкин. Жадвалдаги ячейканинг баландлиги ячейкадаги объектнинг ўлчамига мос равишда ҳисобланади. Жадвал чегараларининг кенглигини ўрнатиш учун border параметридан фойдаланамиз. Бу параметрга манфий бўлмаган бутун қиймат берилади. Чунки у чегарадаги чизиқларнинг кенглигини (пикселларда) ўрнатади. Агар биз бу параметрга “ноль” қиймат ўрнатсак жадвал чегаралари кўринмас ҳ олатга ўтади. Бу эса бизга ячейкаларида Web саҳифанинг элементлари жойлашган кўринмас жадвал тузиш имкониятини яратади. Ячейкалар ўртасидаги масофани cellspaciing параметри ёрдамида пикселларда ўрнатиш мумкин. Худди шунга ўхшаш cellpadding параметри ячейка ичидаги объект билан унинг чегаралари орасидаги масофани пикселларда ўрнатади. Шундай қилиб cellspacing ячейкалар ўртасидаги очиқ (бўш) масофа, cellpadding эса ячейка ичидаги бўш қолдирилган жой. Жадвалларниннг қўлланилиши ва уни қуриш

Рўйхатлардаги битта камчилик – бу уларнинг бир ўлчовлилигидир. Бу дегани сиз рўйхатда маълумотларни кетма-кетлик билан сатрма-сатр жойлаштиришингиз мумкин деганидир. Жадваллар маълумотларни фақат сатр бўйлаб эмас балки устун бўйича ҳам жойлаштириш имконини беради. Жадвалларни шундай ишлатиш керакки улар Web саҳифада шунчаки жой эгалламаслиги керак. Жадвалнинг сатр ва устунлари маълумотларни таққослаш, қарама - қарши қўйиш имконини беради. Ҳ ар бир сатр ва устундаги маълумотларни электрон жадвал сингари тасвирлаш мумкин. Яхши тузилган жадвал билан Web саҳифа маълумотга бой ва тартибли бўлади, аммо кўримсиз жадвал сизнинг маълумотларингизни чалкаштириб юборади. Жадвал масаласи мураккаб кўриниши мумкин, чунки бунинг учун бутун бир теглар кетма-кетлиги тузилади. <table> ва </table> теглар жадвалини бутунлигича ўз ичига олади. Маълумот чиқарилишини бошқа бир теглар кетма-кетлиги аниқлайди. Қуйида жадвалнинг ҳамма теглари ифода қилинган:  <table>, </table> бу теглар жадвални эгаллайди. <table> теги браузерга ўзидан кейин жадвалнинг берилиши келишини хабар қилади. Агар сиз сатр ва устунларни ажратиб турувчи (чизиқлари) кўринишини ўзгартиришни хохласангиз border калит сўзини киритинг (<table border> ҳосил бўлади);  <caption> ва </caption > бу теглар билан белгиланган матн сарлавҳа кўринишини олади. Сарлавҳани бериш масаласи <tc> ва </tc> ёрдамида ҳам бажарилиши мумкин;  <th> ва </th> бу теглар матнни сатр ёки устун сарлавҳаси қилиб, бироз қалин шрифтда тасвирлайди;

 <tr> ва </tr> жадвалнинг ҳар бир сатрини аниқлайди. </tr> теги зарур эмас, бироқ у сизнинг HTML кодингизни янада тўла тушунарли қилади;  <td> ва </td> бу теглар жуфтлиги жадвалнинг ҳар бир ячейкаси учун матн ажратади; Сизнинг биринчи қ адамингиз – она тег < table > ни киритиш. < table > </ table > жадвалнинг ҳ ар бир ячейкаси нозик чизиқлар билан б ў линиши учун < table > тегига border =1 калит сўзини киритинг. Агар бу бўлмаса ячейканинг сўзлари автоматик тарзда текисланади, аммо жадвалда т ў р (ажратувчи чизиқлар) бўлмайди. Энди ячейкаларни бирин-кетин яратиб боринг. Дастлаб сатрни беринг: < table > < tr > </ tr > </ table > бундан сўнг устуннинг сарлавҳаси бўладиган ячейкани беринг. Браузерлар сарлавҳани қолган матнларга нисбатан қалинро қ шрифтда тасвирлайди. <table> <tr> <th> год </th> <th> модель </th>

<th> марка </th> </tr> </table> Ҳ озир сизнинг жадвалингиз устунларнинг сарлавҳаси ҳисобланган бита сатрдан иборат . Қолган сатрларни ҳам киритиб бошлаймиз . Ҳ ар бир сатрда устунлар сонига разм солиб боринг , ҳ озирги ҳ олатда 3 та устун мавжуд . Мисол 8_1. <html> <head> <title> Жадвал </title> </head> <table border=1> <tr> <th> йил </th> <th> модель </th> <th> марка </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>

Web саҳифаларда жуда кўп сатр ва устундан иборат жадвалларни яратиш мумкин . Бир ячейкага бир неча сатрларни бирлаштириш. Агар сиз тез-тез жадваллардан фойдаланиб турсангиз, қайсидир бир ячейка жадвалнинг бир неча сатрларини бирлаштириш лозим бўлиб қолган вазият билан албатта танишсиз. Бу ерда сизга < td > теги ичига қў шиладиган rowspan калит сўзи асқотади. Мисол қилиб бундан кейинги бўлимларда бейсбол жадвлининг версияларини кўриб ўтамиз. Мисол 8_2. <html> <head> <title> Бирлаштириш </title> </head> <body> <table border=1> <tr> <td> Дилшод </td> <td rowspan=2> Хоразм </td> <td> 16 - 2 </td> <td> 2.73</td>

<td> 194 </td> </tr> <tr> <td> Ма ҳ муджон </td> <td> 28 - 2 </td> <td> 1.92</td> <td> 199 </td> </tr> <tr> <td> Жавлон </td> <td> Нукус </td> <td> 28 - 1 </td> <td> 1.95</td> <td> 200 </td> </tr> </table> </body> </html>

Бир неча устунларни бир ячейкага бирлаштириш ва р ў йхат киргизиш . rowspan бир неча сатрларни бирлаштиргани каби , colspan бир неча устунларни бирлаштиради . colspan калит с ў зи ёрдамида сиз истаган ми қ дордаги устунларни бир ячейкага бирлаштиришингиз мумкин . Қуйидаги мисолга эътиборингизни қ аратинг : Мисол 8_3. <html> < head >< title > Жадвал ва р ў йхат </ title > </head> <body> <table border=1>

<tr> <th colspan=2> шахсий маълумот </th> <th colspan=3> статистика </th> </tr> <tr> <th> исм </th> <th> команда </th> <th> ғ алаба / ма ғ лубият </th> <th> жарима </th> <th> очко </th> </tr> <tr> <th> Дилшод </th> <th> Жайхун </th> <th> 2/1 </th> <th> 0 </th> <th> 7 </th> </tr> <tr> <th> Ма ҳ муджон </th> <th> Спартак </th>

<th> 3/1 </th> <th> 0 </th> <th> 10 </th> </tr> </table> </body> </html> Э ҳ тиёткорлик ! rowspan ( ёки colspan ) лардан фойдаланганда мос ҳ олда сатр ёки устунларнинг ми қ дорини камайтиришни эсдан чи қ арманг . Жадвалга HTML нинг бош қ а элементларини ҳам қў шиш мумкин . Шундай экан унга ихтиёрий турдаги р ў йхат киритилиши мумкин . Қ атъий равишда ёйилган теглардан фойдаланганликни кузатиб бориш керак , акс ҳ олда р ў йхат кодларини ажратиб кўриш қийин б ў лади . Жадвал ячейкаларининг вертикал ёки горизонтал равишда матнни текислаш масаласини бериш мумкин. Текислаш усуллари махсус align ва

valign калит сузлари ёрдамида берилади. Яна сиз умумий равишда жадвал учун текислашда ( < table > тегида), жорий сатр учун ( < tr > тегда) ёки бир ячейка учун ( < td > тегда) бериш мумкин. align ва valign калит с ў зларининг ҳ ар бири учун 3 та мумкин бўлган ифодалари бор:  align = left матнни ячейканинг чап тарафи бўйича текислайди (жимлик)  align = center матнни ячейканинг маркази бўйлаб текислайди  align = right матнни ячейканинг ўнг тарафи бўйича текислайди  valign = top матнни юқори қисми бўйича текислайди (агарда маълумот бир неча сатрдан иборат бўлганда фойдаланилади)  valign = middle матнни ячейканинг марказидан вертикал бўйлаб текислайди (жимлик ҳ олатида)  valign = bottom матнни ячейканинг паст қирраси бўйлаб текислайди. Жадвалдаги ранглар Сўнги вақтларгача Web саҳифанинг жадвалдаги рангларни бошқариш имкони мавжуд эмас эди. Жадвал тури қора рангда, фон эса саҳифа фони ранги билан мос тушар эди. Бирор бир ячейканинг рангини бошқасидан ажратиш ва ҳ ар хил ранглардан фойдаланиш жуда қийин бўлган. Хозирда фон ва тур рангини бериш мумкин бўлган янги теглар қатори мавжуд. Биринчи ҳ олда bgcolor калит с ў зи < table > тегида қуйидаги равишда қўйилади. <table border bgcolor=yellow> </table> Энди эса жадвал фонининг ранги сариқ бўлади. Қуйидаги 16 рангдан ихтиёрий бирини унинг номини кўрсатган ҳ олда беришингиз мумкин:

Black - қора Treen - т ўқ яшил Navy - тўқ кўк Tial - кўк Silver - очиқ кул ранг Lime - яшил Blue - кўк Aqua - берёзовый Maroon - малиновый Olive - оливковый Purple - сиреновый Troy - темно-серый Red - қизил Yellow - сари қ Fuchsia - розовый White - о қ bgcolor калит сўзидан бошқа яна рангларни бошқариш учун қуйдаги калит сўзлари ҳам ишлатилади: bordercolor – жадвал қошиясининг (турининг) рангини ўзгартириш. bordercolordark/bordercolorlight - жадвал қошиясининг (турининг) рангини қўшимча 3 ўлчамли кўринишда ўосил қилиш учун ишлатилади. Қуйида янги калит сўзларнинг барчасини ишлатиб тузилган оддий намуна берилган: <table border=2 bgcolor=yellow bordercolor=red bordecolordark=blue border color light=grey> </table> К ў риб турганингиздек сиз бу калит с ў злар ёрдамида жадвалнинг таш қ и к ў ринишини ў згартиришнинг к ўп имкониятларига эга б ў ласиз . Бу ҳ али ҳаммаси эмас . Бу калит сўзларни ҳ ар бир сатр ва ячейка учун беришимиз мумкин . Пастда берилган HTML кодда ҳ ар бир ячейканиннг ранги алоҳида берилади . Мисол 8_4.

<html> <head> <title> Жадвал катакчалари </title> </head> <body> <table border=2 width=300> <tr> <td bgcolor=yellow> </td> <td bgcolor=blaл> <font color=yellow> 11111</font> </td> </tr> <tr> <td bgcolor=blaл> <font color=yellow> 22222 </font> </td> <td bgcolor=yellow> 33333</td> </tr> </table> </body> </html> Бу калит сузларни tr тегида ҳам бериш мумкин . Бунда сатрнинг ранги берилади . Жадвал матнининг ранги унинг фони ранги билан мос тушмаганлигига эътиборингизни қ аратинг . Матн ранги font теги ёрдамида ўзгартирилиши керак.

Адабиётлар 1. Шафран Э. Создание Web -страниц: самоучитель-СПб:Питер,2001.-320с. 2. Игорь Шапошников HTML 4 «БХВ-Петербург» 2002. 3. www.intuit.ru 4. www.citforum.ru 5. www.ziyonet.uz 6. www.slayd.arxiv.uz

Похожие

HTML да руйхатлар

Жадваллар

HTML tili. HTML hujjatning strukturasi

HTML tili

HTML формалар