logo
  1. Главная страница
  2. Рефераты
  3. Информатика и ИТ
  4. Жадвал яратиш асослари. Жадвалнинг кушимча элементлари

Жадвал яратиш асослари. Жадвалнинг кушимча элементлари

Загружено в:

20.09.2019

Скачано:

0

Размер:

64.5 KB
Скачать
www.arxiv.uz Жадвал яратиш асослари. Жадвалнинг кушимча элементлари Режа: 1. Жадваллар яратиш. <table> элементи. Жадвал номи. 2. Жадвал каторлари. Жадвал ячейкалари элементлари 3. Ячейкалар чегаралари, ранглари 4. Жадвалнинг кушимча атрибутлари: width, border, align, cellpadding, 5. Cellspacing 6. Жадвалли дизайн назарияси. Жадвалларда расмлар. 7. Ичма-ич жадваллар. 8. Катор ва устунларни гурухлаш. 9. Рамкалар ва чизиклар. www.arxiv.uz Жадвални хосил килишнинг асосий элементи <table> хисобланади. Ишлатилиши шарт булмаган элемент <caption> дир. <table> нинг ичида <tr> – жадвал каторини билдирувчи ва <td> жадвал устунини билдирувчи элементлар жойлашади. Устун ёки катор сарлавхасини <th> элементи ёрдамида бериш мумкин. Жадвални яратиш технологияси: Жадвал хосил килишни бошлаш учун <table> ва </table>элементлари ёзилади. Бу элементлар уртасига керакли микдорда каторлар сонига мос <tr> ва </tr> элементлари ёзилади. Энди биринчи <tr> дан сунг керакли микдорда <td> ва </td> эелементлари ни ёзилади. Хар бир <td> ва </td> элементлари уртасида жадвалнинг мос кийматини киритилади. <td>ва </td> элементлари урнига <th> ва </th> элементларини ишлатиш хам мумкин. Бу элементлар одатда факат биринчи катор элементларини ёзишда ишлатилади. Купгина график браузерлар <th> ва </th> лар уртасидаги матнни корайтирилган (жирный) куринишда тасвирлайдилар. Хар бир <tr> элементида кейин юкоридаги учинчи кадам такрорланади. Оддий жадвалга мисол: <table border=”1”> <caption> 1 курс талабалар активлари </caption> <tr> <th> 1-A </th> <th> 1-Б </th> <th> 1-В </th> <th> 1-Г </th> </tr> <tr> <td> Абдуллаев А. </td> <td> Лочинов К. </td> <td> Лутфуллаев К. </td> <td> Рустамов Н. </td> </tr> <tr> <td> Каримов Б. </td> <td> Амруллаев Д. </td> <td> Жуманов И. </td> <td> Хамраев О. </td> </tr> <tr> <td> Раззоков М. </td> <td> Бегматов Л. </td> <td> Туракулов И. </td> <td> Тураев П. </td> </tr> www.arxiv.uz </table> Унинг натижаси куйидагича: 1 курс талабалар активлари1-A 1-Б 1-В 1-Г Абдуллаев А. Лочинов К. Лутфуллаев К. Рустамов Н. Каримов Б. Амруллаев Д. Жуманов И. Хамраев О. Раззоков М. Бегматов Л. Туракулов И. Тураев П. Жадвал номини <caption> элементи ёрдамида берилиши айтиб утилди. Бундан ташкари бу элементни ИЗОХ сифатида ишлатиш хам мумкин. Бунинг учун <caption align=“bottom”> деб ёзилса жавдалнинг пастки кисмида чикувчи изохга айланади. .:B:. Катор элементларида иккита мухим атрибутлар мавжуд: align ва valign. Улар ёрдамида жадвал ячейкасидаги матнни горизонтал ва вертикал холатда ихтиёрий жойлаштириш мумкин. align элементи center, left, right (ячейкадаги матннни уртадан, чапдан, унгдан текислаш), valign атрибути эса top, bottom, center (ячейкадаги матнни тепадан, пастдан, уртадан текислаш) каби атрибутларга эга: <table border=&#34;1&#34; align=&#34;center&#34;> <tr align=&#34;center&#34;> <th> Yillar </th> <th> Choy </th> <th> Kofe </th> </tr> <tr align=&#34;left&#34;> <td> 2001 </td> <td> 35% </td> <td> 65% </td> </tr> <tr align=&#34;right&#34;> <td> 2002 </td> <td> 45% </td> <td> 55% </td> </tr> <tr align=&#34;center&#34;> <td> 2003 </td> <td> 55% </td> <td> 45% </td> </tr> </table> www.arxiv.uz Баъзи холларда, масалан, жадвал элементлари бир хил , ухшаш информацияларга эга булса valign атрибутининг натижаси куринмай колиши мумкин. Лекин ячейкаларда хар хил хажмдаги информациялар сакланадиган булса, унинг натижасини куриш мумкин. Бундан ташкари <th> элементининг <scope> атрибути мавжуд булиб у сарлавха катор ёки устунга тегишли эканлигини билдиради. Масалан: <table border=&#34;1&#34; align=&#34;center&#34;> <tr align=&#34;center&#34;> <th scope=&#34;row&#34;> Yillar </th> <td> Choy </td> <td> Kofe </td> </tr> <tr align=&#34;left&#34;> <th scope=&#34;row&#34;> 2001 </td> <td> 35% </td> <td> 65% </td> </tr> <tr align=&#34;right&#34;> <th scope=&#34;row&#34;> 2002 </td> <td> 45% </td> <td> 55% </td> </tr> <tr align=&#34;center&#34;> <th scope=&#34;row&#34;> 2003 </td> <td> 55% </td> <td> 45% </td> </tr> </table> Натижаси : Yillar Choy Kofe 2001 35% 65% 2002 45% 55% 2003 55% 45% .:C:. Шундай холлар бўладики, жадвалнинг бар нечта ячейкаларини (бир нечта устунни ёки бир нечта сатрни) бир хил ўлчамда ифодалашга тўгри келади (бир-бирига якин информациялар ёки жадвалнинг чиройли чикиши ...). Хар кандай холатда хам <th> ва <td> лар учун: colspan ва rowspan атрибутлари www.arxiv.uz кўлланилади. Улардан бири ячейкани горизонтал ўлчамини иккинчиси вертикал ўлчамини билдиради. Жадвал оркасидаги фонни рангини танлаш имконияти хам мавжуддир. Бунинг учун bgcolor атрибути кўлланилади: <table border=&#34;1&#34; align=&#34;center&#34;> <tr align=&#34;center&#34; bgcolor=&#34;red&#34;> <th > Yillar </th> <th Choy </th> <th> Kofe </th> </tr> <tr align=&#34;left&#34; bgcolor=&#34;brown&#34;> <td> 2001 </td> <td > 35% </td> <td> 65% </td> </tr> <tr align=&#34;right&#34; bgcolor=&#34;orange&#34;> <td> 2002 </td> <td > 45% </td> <td> 55% </td> </tr> <tr align=&#34;center&#34; bgcolor=&#34;yellow&#34;> <td> 2003 </td > <td > 55% </td> <td> 45% </td> </tr> </table> .:D:. <table> элементи <align> ва <border> атрибутларидан бошка атрибутларга хам эга. Улар куйидагилардир: width. Жадвалнинг энини урнатади. Икки холатда ўлчамини бериш мумкин: процентларда (width=”50%”) ва пикселлар (width= “250”) да. Бу атрибут берилмаганда жадвалнинг ичидаги маълумотлар улчамига караб жадвал чизилади. Улчамларни пикселларда бериш тавсия этилмайди. Чунки хамма фойдаланувчилар хам экраннинг ўлчамини хар доим хам бир хилда ифодаламайдилар (800х600, 1024х768 каби ўлчамлар мавжуд). border. Жадвал рамкаси калинлигини танлаш имкониятини беради. Ўлчамлар пикселларда белгиланади (border=”3”). Бу атрибут берилмаганда жадвал чегараси ок рангда ифодаланади (кўринмайди). www.arxiv.uz cellspasing. Жадвал устунлари орасидаги масофани билдиради. Улчамлар пикселларда берилади. Атрибут кўлланилмаганда 1 га тенг деб кабул килинади. cellpadding. Жадвал каторлари орасидаги масофани билдиради. Улчамлар пикселларда берилади. Атрибут кўлланилмаганда 1 га тенг деб кабул килинади. rules ва frames. Жадвалнинг ички (rules) ва ташки (frames) чегаралари кандай чизилиши кераклигини билдиради. .:E:. Жадваллар HTML стандартларига киргандан бошлаб дизайнлар яратиш профессионаллик даражаси бир неча маротаба ортди. Жадвал ячейкаларини бошкариб, уларга ихтиёрий элементларни – тасвирларни, матнларни, руйхатларни, гипермурожаатларни каерда керак булса уша ерда ишлатиш имконияти мавжуд булади. Шу тарика бутун веб сахифаларни камраб олувчи жадвалларни яратиш яши натижа беради. Ячейкаларни умумлаштириш, керакли улчамгача кенгайтириб, торайтириш, улар ораликларини белгилаш оркали юкорида айтилган натижага эришиш мумкин. Умумий холда жадваллар устунлар ва каторлардан иборат булиб, улар устида ишлаш имконияти мавжуддир. Газета ёки журналларни вараклаб куплаб катакларга булинганлигини куриш мумкин. Худди шундай килиб веб- сахифаларни хам катакларга булиш мумкин. Агар сахифа бир нечта булакларга булинса у укувчи томонидан осон тушунилади. Масалан, куйидаги куринишдаги веб-сахифа яратмокчи булайлик: Bosh sahifa | Products | Birinchi | Ikkinchi | Images | Table | Jadvallar!!! Жадваллар HTML стандартларига киргандан бошлаб дизайнлар яратиш профессионаллик даражаси бир неча маротаба ортди. Жадвал ячейкаларини www.arxiv.uz бошкариб, уларга ихтиёрий элементларни – тасвирларни, матнларни, руйхатларни, гипермурожаатларни каерда керак булса уша ерда ишлатиш имконияти мавжуд булади. Шу тарика бутун веб сахифаларни камраб олувчи жадвалларни яратиш яши натижа беради. Ячейкаларни умумлаштириш, керакли улчамгача кенгайтириб, торайтириш, улар ораликларини белгилаш оркали юкорида айтилган натижага эришиш мумкин. Умумий холда жадваллар устунлар ва каторлардан иборат булиб, улар устида ишлаш имконияти мавжуддир. Газета ёки журналларни вараклаб куплаб катакларга булинганлигини куриш мумкин. Худди шундай килиб веб- сахифаларни хам катакларга булиш мумкин. Агар сахифа бир нечта булакларга булинса у укувчи томонидан осон тушунилади. Бунинг учун куйидаги кодни ёзишга тугри келади: <table border=&#34;1&#34; cellpadding=&#34;5&#34; width=&#34;100%&#34;> <tr> <td colspan=&#34;2&#34; align=&#34;center&#34;> <a href=&#34;sinov.htm&#34;> Bosh sahifa | </a> <a href=&#34;Products/product.html&#34;> Products | </a> <a href=&#34;Products/1/1.html&#34;> Birinchi | </a> <a href=&#34;Products/1/2.html&#34;> Ikkinchi | </a> <a href=&#34;Images/images/html&#34;> Images | </a> <a href=&#34;Images/table.html&#34;> Table | </a> </td></tr> <tr > <td rowspan=&#34;2&#34; valign=&#34;top&#34;> <h1 align=&#34;center&#34;> Jadvallar!!! </h1> www.arxiv.uz <p>Жадваллар HTML стандартларига киргандан бошлаб дизайнлар яратиш профессионаллик даражаси бир неча маротаба ортди. Жадвал ячейкаларини бошкариб, уларга ихтиёрий элементларни – тасвирларни, матнларни, руйхатларни, гипермурожаатларни каерда керак булса уша ерда ишлатиш имконияти мавжуд булади. Шу тарика бутун веб сахифаларни камраб олувчи жадвалларни яратиш яши натижа беради. Ячейкаларни умумлаштириш, керакли улчамгача кенгайтириб, торайтириш, улар ораликларини белгилаш оркали юкорида айтилган натижага эришиш мумкин. </p> <p>Умумий холда жадваллар устунлар ва каторлардан иборат булиб, улар устида ишлаш имконияти мавжуддир. Газета ёки журналларни вараклаб куплаб катакларга булинганлигини куриш мумкин. Худди шундай килиб веб- сахифаларни хам катакларга булиш мумкин. Агар сахифа бир нечта булакларга булинса у укувчи томонидан осон тушунилади. </p> </td> <td><img src=&#34;Gerb.jpg&#34;></td> </tr> <tr> <td><img src=&#34;President.gif&#34; width=&#34;170&#34; height=&#34;200&#34;></td> </tr></table> .:F:. Юкорида айтилдики, жадвалларнниг ичига ихтиёрий элементни жойлаштириш мумкин деб. Худди шундай жадвал ичига жадвалларни ам жойлаштириш мумкин. Агар жадвал ичига бошка жадвал жойлаштирилса, ичма-ич жадваллар дейилади. Масалан куйидаги куринишдаги жадвални хосил килиш керак булсин: Bosh sahifa | Products | Birinchi | Ikkinchi | Images | Table | Birinchi qator Ikkinchi qator Uchinchi qator www.arxiv.uz To&#39;rtinchi qator Beshinchi qator Jadvallar!!! Жадваллар HTML стандартларига киргандан бошлаб дизайнлар яратиш профессионаллик даражаси бир неча маротаба ортди. Жадвал ячейкаларини бошкариб, уларга ихтиёрий элементларни – тасвирларни, матнларни, руйхатларни, гипермурожаатларни каерда керак булса уша ерда ишлатиш имконияти мавжуд булади. Шу тарика бутун веб сахифаларни камраб олувчи жадвалларни яратиш яши натижа беради. Ячейкаларни умумлаштириш, керакли улчамгача кенгайтириб, торайтириш, улар ораликларини белгилаш оркали юкорида айтилган натижага эришиш мумкин. Умумий холда жадваллар устунлар ва каторлардан иборат булиб, улар устида ишлаш имконияти мавжуддир. Газета ёки журналларни вараклаб куплаб катакларга булинганлигини куриш мумкин. Худди шундай килиб веб- сахифаларни хам катакларга булиш мумкин. Агар сахифа бир нечта булакларга булинса у укувчи томонидан осон тушунилади. Бунинг учун куйидаги кодни ёзишга тугри келади: <table border=&#34;1&#34; cellpadding=&#34;5&#34; width=&#34;100%&#34;> <!-- Yuqori menyu --> <tr> <td colspan=&#34;2&#34; align=&#34;center&#34;> <a href=&#34;sinov.htm&#34;> Bosh sahifa | </a> <a href=&#34;Products/product.html&#34;> Products | </a> <a href=&#34;Products/1/1.html&#34;> Birinchi | </a> <a href=&#34;Products/1/2.html&#34;> Ikkinchi | </a> www.arxiv.uz <a href=&#34;Images/images/html&#34;> Images | </a> <a href=&#34;Images/table.html&#34;> Table | </a> </td> < /tr> <!--Asosiy qism--> <tr > <td width=&#34;20 %&#34;> <!--Ikkinchi jadval--> <table border=&#34;1&#34;> <tr> <td> Birinchi qator </td> </tr> <tr> <td> Ikkinchi qator </td> </tr> <tr> <td> Uchinchi qator </td> </tr> <tr> <td> To&#39;rtinchi qator </td> </tr> <tr> <td> Beshinchi qator </td> </tr> </table> <td width=&#34;80 %&#34;> <h1 align=&#34;center&#34;> Jadvallar!!! </h1> <p>Жадваллар HTML стандартларига киргандан бошлаб дизайнлар яратиш профессионаллик даражаси бир неча маротаба ортди. Жадвал ячейкаларини бошкариб, уларга ихтиёрий элементларни – тасвирларни, матнларни, руйхатларни, гипермурожаатларни каерда керак булса уша ерда ишлатиш имконияти мавжуд булади. Шу тарика бутун веб сахифаларни камраб олувчи жадвалларни яратиш яши натижа беради. Ячейкаларни умумлаштириш, керакли улчамгача кенгайтириб, торайтириш, улар ораликларини белгилаш оркали юкорида айтилган натижага эришиш мумкин. </p> <p>Умумий холда жадваллар устунлар ва каторлардан иборат булиб, улар устида ишлаш имконияти мавжуддир. Газета ёки журналларни вараклаб куплаб катакларга булинганлигини куриш мумкин. Худди шундай килиб веб- сахифаларни хам катакларга булиш мумкин. Агар сахифа бир нечта булакларга булинса у укувчи томонидан осон тушунилади. </p> </td> </tr> </table> www.arxiv.uz Худди шунингдек, учта устун хосил килиб, унг ва чап устунларга 20% дан уртадаги устунга 60 % бериб, унг ва чап устунлар ичига хам юкоридагига ухшаш жадваллар хосил килиш мумкин. .:G:. Катор ва устунларни умумлаштириш юкоридаги мисолда килинган эди: Bosh sahifa | Products | Birinchi | Ikkinchi | Images | Table | Jadvallar!!! Жадваллар HTML стандартларига киргандан бошлаб дизайнлар яратиш профессионаллик даражаси бир неча маротаба ортди. Жадвал ячейкаларини бошкариб, уларга ихтиёрий элементларни – тасвирларни, матнларни, руйхатларни, гипермурожаатларни каерда керак булса уша ерда ишлатиш имконияти мавжуд булади. Шу тарика бутун веб сахифаларни камраб олувчи жадвалларни яратиш яши натижа беради. Ячейкаларни умумлаштириш, керакли улчамгача кенгайтириб, торайтириш, улар ораликларини белгилаш оркали юкорида айтилган натижага эришиш мумкин. Умумий холда жадваллар устунлар ва каторлардан иборат булиб, улар устида ишлаш имконияти мавжуддир. Газета ёки журналларни вараклаб куплаб катакларга булинганлигини куриш мумкин. Худди шундай килиб веб- сахифаларни хам катакларга булиш мумкин. Агар сахифа бир нечта булакларга булинса у укувчи томонидан осон тушунилади. Жадвалнинг colspan атрибути каторидаги устунларни умумлаштириш имкониятини беради. Бу ерда colspan= «n» ёзуви нечта каторни умумлаштириш керак булса, n шунга тенг деб ёзилади. www.arxiv.uz Жадвалнинг colspan атрибути каторидаги устунларни умумлаштириш имкониятини беради. Бу ерда colspan= «n» ёзуви нечта каторни умумлаштириш керак булса, n шунга тенг деб ёзилади. .:H:. Жадвалнинг яна куйидаги атрибутлари мавжуд: frame ва rules. Биринчи атрибут border>0 булган холатда ташки чегарасининг кандай булиши кераклиги, иккинчи атрибут эса ячейкаларни ажратувчи чегаралар кандай булиши кераклигини билдиради. frame атрибути кабул килиши мумкин булган кийматлар куйидаги жадвалда келтирилган: Атрибут номи Вазифаси void Чегара йук above Юкори чегара below Пастки чегара nsides Чап ва унг чегаралар йук vsides Юкори ва пастки чегаралар йук lhs Факат чап чегара мавжуд rhs Факат унг чегара мавжуд rules атрибути кабул килиши мумкин булган кийматлар куйидаги жадвалда келтирилган: Атрибут номи Вазифаси none Чизик йук groups <thead>, <tfoot>, <tbody> элементлари иштирок этганда факат каторлар оралигида чизик булади, <colgroup>, <col> элементлари иштирок этганда факат устунлар оралигида чизиклар булади. rows Чизиклар факат катор ораликларида cols Чизиклар факат устун ораликларида www.arxiv.uz all Хамма чизиклар булади Куйидаги кодни ёзиш оркали юкоридаги E режадаги жадвалнинг чизикларини узгарган холда экранга чикариш мумкин: <table border=&#34;3&#34; width=&#34;100%&#34; frame=&#34;vsides&#34; rules=&#34;rows&#34; > Е режадаги жадвалнинг узи ёзилади. </table>

Похожие

Web-узелни яратиш асослари
Web-узелни яратиш асослари
Массивлар (жадвал катталиклар)
Электрон жадвал тушунчаси
StringGrid жадвал компонентаси