Xадвалхо
Дар чадвалхои Web – сахифахо метавонад додахои раками ва матни чо шаванд, дар онхо расмхо ва робитахо гузошта шаванд. Бо ёрии коди сенарияхо дар чадвалхо метавонем харгуна хисобхои мушкилро гузаронем.
Чузъи чадвали TABLE дар HTML – санад хам барои намоиши додахои аломати ва хам графики дар чадвал, хамчунин барои таксими сахифа ба кисмхои чудогона, ки дар онхо мухтавои хар гуна HTML – чузъ истифода бурда меашвад.
Хар як чадвал бо теги <TABLE> сар шуда бо теги</TABLE> интихо меёбад.
<TABLE>
<! - - Дар ин чо тафсири чадвал чо мешавад-->
</TABLE>
Сохтори чадвал аз руи сатр ва ячейка бо ёрии чузъхои зерин дода мешавад:
TR – сохтани сатри алохида
TD – муайянкунии мухтавои ячейка
TH – сарлавхаи ячейка
CAPTION – номи чадвал
<HTML>
<HEAD>
<TITLE> НАМУНАИ ЧАДВАЛХО</TITLE>
</HEAD>
<BODY>
<H2>Чатхои Руси</H2>
<TABLE border=1>
<TR>
<TD>Номгуи чат</TD>
</TR>
<TD>Сурога</TD>
</TR>
<TR>
<TD>СуперМегаЧат</TD>
<TD>http://smchat.ru/</TD>
</TR>
<TR>
<TD>Клуб Аська</TD>
<TD>http://asya-club.ru/</TD>
</TR>
<TR>
<TD>RusTusovka</TD>
<TD>http://www.rustusovka.com/</TD>
</TR>
</TABLE>
</BODY>
</HTML>
Барои сарлавха дар ячейкахо аз теги <TH> истифода мебаранд:
<TH>мухтавои сарлавхаи ячейка</TH>
Барои гузоштани ном ба чадвал теги махсуси <CAPTION>-ро истифода мебаранд, ки баъди теги TABLE, пеш аз тегхои TR,TD,TH навишта мешавад:
<TABLE border=1>
<CAPTION> номи чадвал</CAPTION>
<TR>
. . .
</TABLE>
Бари чадвалро хосияти width муайян менамояд:
<TABLE width=300>- ин код чадвалро бо бари хамаи сатрхо ки ба 300 пиксел баробар аст, нишон медихад.
Хосияти align киматхои left(тарафи чап), center(марказ), right(тарафи рост)-ро дорад.
<HTML>
<HEAD>
<TITLE> Росткунии ЧАДВАЛХО</TITLE>
</HEAD>
<BODY>
<TABLE border=1 width=”25%” align=”right”>
<TR><TD>Магоза</TD></TR>
<TR><TD>Имкониятхои мо</TD></TR>
<TR><TD>Накшахои мо</TD></TR>
<TR><TD>Сабад</TD></TR>
<TR><TD>Руйхат</TD></TR>
<TR><TD>Ёри</TD></TR>
</TABLE>
</BODY>
</HTML>
Бо ёрии хосияти border чадвалхо бо худудхои намуди хатхои дукаррата тасвир мешаванд:
<TABLE border=10>
Дар ин код чадвал бо хатхои худудии беруна ки 10 пиксел баробар аст ва хатхои худудии дохилаи он ба 1 пиксел баробар аст, тасвир шудааст.
Хосияти frame, ки дар теги <TABLE> дучор мешавад, киматхои зеринро кабул менамояд.
Border (ёки box) – хамаи хатхои берунаро чори менамояд.
Void – чорчубаи беруна тамоман намудор нест.
Above (ёки below) – танхо худуди болои(поёни) чадвалро нишон медихад.
Hsides – танхо хати болои(поёни) чорчубаро нишон медихад.
Vsides – танхо хатхои чап ё рости чорчуба
Lhs – танхо хати чапи чорчубаро чори месозад
Rhs – танхо хати рости чорчубаро чори месозад.
<HTML>
<HEAD>
<TITLE>Хосияти frame</TITLE>
<STYLE>
TABLE{font-size:13pt; margin-top:20}
TD{width:100; text-align:center; font-family:Courier New}
.eq{width:30; text-align:center}
</STYLE>
</HEAD>
<BODY>
<H2> Киматхои имконпазири хосияти frame</H2>
<TABLE border=0 width=100%>
<TR>
<TD><TABLE border=4 frame=”border”>
<TR><TD>frame</TD><TD class=”eq”>=<TD>border</TD>
</TR></TABLE></TD>
<TD><TABLE border=4 frame=”box”>
<TR><TD>frame</TD><TD class=”eq”>=</TD><TD>box</TD>
</TR></TABLE></TD>
<TD><TABLE border=4 frame=”void”>
<TR><TD>frame</TD><TD class=”eq”>=</TD><TD>void</TD>
</TR></TABLE></TD>
</TR>
<TR>
<TD><TABLE border=4 frame=”above”>
<TR><TD>frame</TD><TD class=”eq”>=</TD><TD>above</TD>
</TR></TABLE></TD>
<TD><TABLE border=4 frame=”below”>
<TR><TD>frame</TD><TD class=”eq”>=</TD><TD>below</TD>
</TR></TABLE></TD>
<TD><TABLE border=4 frame=”hsides”>
<TR><TD>frame</TD><TD class=”eq”>=</TD><TD>hsides</TD>
</TR></TABLE></TD>
</TR>
<TR>
<TD><TABLE border=4 frame=”vsides”>
<TR><TD>frame</TD><TD class=”eq”>=</TD><TD>vsides</TD>
</TR></TABLE></TD>
<TD><TABLE border=4 frame=”lhs”>
<TR><TD>frame</TD><TD class=”eq”>=</TD><TD>lhs</TD>
</TR></TABLE></TD>
<TD><TABLE border=4 frame=”rhs”>
<TR><TD>frame</TD><TD class=”eq”>=</TD><TD>rhs</TD>
</TR></TABLE></TD>
</TR></TABLE>
</BODY>
</HTML>
Муттахидсозии ячейкаи чадвалхо бо хосиятхои зерин ба амал бароварда мешавад:
Rowspan – барои муттахидсозии сатрхои хамсояи ячейка таъин шудааст. Масалан:
<TH rowspan=3>
Се ячейкаро бо хам муттахид месозад.
Colspan – cутунхои хамсояи ячейкаро муттахид месозад.
Агар хохед, ки ду сатри хамсоя ва се сутуни хамсояро ба як ячейка мубаддал гардонед, он вакт коди зерин ин имкониятро медихад:
<TD rowspan=2 colspan=3>
Хангоми муттахидсозии сутун ва сатри ячейкахо микдори онхо ба зарби кимати хосиятхои rowspan ва colspan баробар аст. Аз мисоли боло микдори мутахидии ячейкахо ба 6 (2*3=6)баробар аст.
Имконияти додани ранг ба чузъхои чадвалро дида мебароем.
Ранги замина дар чадвалхо бо хосияти bgcolor кабул гардидааст. Аз руи он, ки кадоме аз ин тегхо (<TABLE>, <TR>, <TH>, <TD>)-ро бо хосияти bgcolor пур менамоем, чор намуди омадани рангро мушохида менамоем: заминаи чадвал, заминаи сатр, заминаи ячейкаи сарлавха ва заминаи додахо.
<HTML>
<HEAD>
<TITLE>Ранги чузъхои чадвал</TITLE>
<STYLE type=”text/css”>
TABLE{font:bold 11pt Arial;
Text – align :center;
Background – color:#ff99ff;
Color:blue}
TR{ Background – color:aqua}
</STYLE>
</HEAD>
<BODY>
<H2> Cупориши рангхо барои чузъхои чадвал</H2><BR>
<TABLE cellspasicing=12 width=550 border=5>
<TR>
<TD>ранги заминаи чадвал</TD><TD>бунафш</TD></TR>
<TR>
<TD>ранги заминаи сатр</TD><TD>фирузаранг</TD></TR>
<TR>
<TD>ранги хати чорчуба</TD><TD>хокистари</TD></TR>
<TR>
<TD>ранги хуруф</TD><TD>кабуд</TD></TR>
</TABLE>
</BODY>
</HTML>
Гурухбандии сатрхо дар чадвалхо бо ёрии се чузъ ба амал бароварда мешавад:
THEAD – кисми сарлавхагии чадвалро муайян месозад.
TFOOT – кисми поёнии чадвалро медихад. Баъди теги <THEAD> навишта мешавад.
TBODY – кисми асосии чадвалро ташкил медихад, ки аз чузъхои сатрии TR иборат аст.
Кайд менамоем, ки дар чадвал яктоги чузъи THEAD ва TFOOT иштирок менамояд, вале чузъи TBODY якчандто омаданаш мумкин.
<HTML>
<HEAD>
<TITLE> гурухбандии сатрхо</ TITLE >
</HEAD>
<BODY>
<H2> намунаи таблитсахо бо ишитроки чузъхои THEAD, TFOOT, TBODY </H2>
<TABLE width=450 border style=”font-famiiy:Arial;
font-size:11pt; text-align:center”>
<THEAD style=”background-color:yellow”>
<TR style=”font-size:13pt; font-weight:bold”>
<TD colspan=2> микдори иштирокчиён дар тули хафта </TD></TR>
<TR style=”font-style:italic; texn-align:center”>
<TD>рузхо</TD><TD>микдор</TD></TR>
</THEAD>
<TFOOT style=”font:italic bold; color:white
Text-align:right; background-color:brown”>
<TR><TD>Чамъ</TD><TD>866</TD></TR>
<TR><TD>аз он чумла донишчуён</TR></TD><TD>251</TD></TR>
</TFOOT>
<TBODY style=”text-align:right;
Background-color:lightyellow”>
<TR><TD>Душанбе</TD><TD>106</TD></TR>
<TR><TD>Сешанбе</TD><TD>212</TD></TR>
<TR><TD>Чоршанбе</TD><TD>133</TD></TR>
<TR><TD>Панчшанбе</TD><TD>145</TD></TR>
<TR><TD>Чумъа</TD><TD>121</TD></TR>
<TR><TD>Шанбе</TD><TD>99</TD></TR>
<TR><TD>Якшанбе</TD><TD>50</TD></TR>
</TBODY>
</TABLE>
</BODY>
</HTML>
Барои сутунхо дар HTML имконияти гурухбанди бо ёрии чузъи COLGROUP гузаронида мешавад, ки он дохили теги TABLE навишта мешавад. Хосиятхои теги <COLGROUP>:
Span – микдори сутунро дар гурух муайян менамояд.
Width – барии сутуни гурухро муайян менамояд.
Хосиятхои align, valign, style форматкунии мухтавои ячейкаро муайян менамояд.
<HTML>
<HEAD>
<TITLE>Гурухбандии сутунхо</TITLE>
<STYLE>
TABLE {text-align:center}
TD {height:120; width:80}
</STYLE>
</HEAD>
<BODY>
<H2> Намунаи гурухбандии сутунхои чадвал</H2>
<TABLE border>
<CAPTION>Порчаи системаи кимиёвмм чузъхои Менделеев</CAPTION>
<COLGROUP span=2 style=”background-color:#ff99ff”>
<TR><TD>3<BR><B>Li</B><BR>Литий</TD>
<TD>4<BR><B>Be</B><BR>Берилий</TD>
<TD>5<BR><B>B</B><BR>Bor</TD>
<TD>6<BR><B>C</B><BR>Карбон</TD>
<TD>7<BR><B>N</B><BR>Азот</TD>
<TD>8<BR><B>O</B><BR>Оксиген</TD>
<TR><TD>11<BR><B>Na</B><BR>Натрий</TD>
<TD>12<BR><B>Mg</B><BR>Магний</TD>
<TD>13<BR><B>Al</B><BR>Аллюминий</TD>
<TD>14<BR><B>Si</B><BR>Кремний</TD>
<TD>15<BR><B>P</B><BR>Фосфор</TD>
<TD>16<BR><B>S</B><BR>Сулфур</TD>
<COLGROUP span=4 style=”background-color:#00ffff”>
<TR><TD>19<BR><B>K</B><BR>Калий</TD>
<TD>20<BR><B>Ca</B><BR>Калсий</TD>
<TD>21<BR><B>Sc</B><BR>Скандлий</TD>
<TD>22<BR><B>Ti</B><BR>Титан</TD>
<TD>23<BR><B>V</B><BR>Ванадий</TD>
<TD>24<BR><B>Cr</B><BR>Хром</TD></TR>
</TABLE>
</BODY>
</HTML>
