Bucklet

2.HTML É½íÇ ÑÇÙÝ³Ï³Ý ÙÇçáóÝñÁ

2.4 ²ÕÛáõë³ÏÝñÇ ëïÕÍáõÙ

ºÝÃ³¹ñÝù ÙÝù Ùñ ¿çáõÙ áõ½áõÙ Ýù ïÕ³¹ñÉ ýáõïáÉÇ ³é³çÝáõÃÛ³Ý ³ñ¹ÛáõÝùÝñáí ³ÕÛáõë³Ï: ÆÝãåë ¹³ ³ÝÉ:

HTML-áõÙ ó³ÝÏó³Í ³³ÕÛáõë³Ï ë³ÑÙ³ÝíáõÙ ¿ <TABLE> ïÇ ûÝáõÃÛ³Ù: ²ÛÝ ³ÙÝÁ ÇÝãÁ ïÕ³¹ñí³Í ¿ <TABLE> ¨ </TABLE> ïñÇ ³ñ³ÝùáõÙ, ÁÝÏ³ÉíáõÙ ¿ áñåë ³ÕÛáõë³Ï: ´³Ûó Ã ¹áõù ñùª

<TABLE>

ê³ ³ñ¹Ý ³ÕÛáõë³Ï ¿

</TABLE>

</FONT>

³å³ ñáõ½ñÁ ¹³ Ï³ñï³å³ïÏñÇ áñåë ëáíáñ³³Ï³Ý ïùëï: ´³ÝÝ ³ÛÝ ¿, áñ ³ÕÛáõë³Ï ëïÕÍÉáõ Ñ³Ù³ñ Ñ³ñÏ³íáñ ¿ ëïÕÍÉ Ýñ³ ÝñëáõÙ áÝ ÙÏ ïáÕ, ÇëÏ ïáÕáõÙª áÝ ÙÏ çÇç: ²ÕÛáõë³ÏÇ ïáÕñÁ ëïÕÍíáõÙ Ý <TR> ¨ Ýñ³ ÷³ÏáÕ </TR> ïñÇ ûÝáõÃÛ³Ù, ÇëÏ çÇçÝñÁª <TD> ¨ </TD>: ´³Ûó ñÉáí

<TABLE>

<TR>

<TD> ê³ ³ñ¹Ý ³ÕÛáõë³Ï ¿

</TD>

</TR>

</TABLE>

</FONT>

ÙÝù Ïëï³Ý³Ýù ÝáõÛÝ ³ñ¹ÛáõÝùÁ, áñáíÑï¨ ³ÕÛáõë³ÏÝñÁ ëáíáñ³³ñ ³ñï³å³ïÏñíáõÙ Ý ³é³Ýó ßñç³Ý³ÏÇ: ºÃ ÙÝù áõ½áõÙ Ýù, áñ Ùñ çÇçÁ áõÝÝ³ ßñç³Ý³Ï ÙÝù åïù ï³Ýù BORDER= ³ïñÇáõïÁª

²ÕÛáõë³ÏÇ ÑÇÙÝ³Ï³Ý ³ïñÇáõïÝñÁ

ÆÝãåë ïëÝáõÙ ù Ùñ ³ÕÛáõë³ÏÁ ëï³óíÉ ¿ Ýñ³ Ùç ñ³Í ³ñï³Ñ³ÛïáõÃÛ³Ý É³ÛÝáõÃÛ³Ý, WIDTH= ³ïñÇáõïÇ ûÝáõÃÛ³Ù ³ÕÛáõë³ÏÇÝ Ï³ñÉÇ ï³É ó³ÝÏ³ó³Í É³ÛÝáõÃÛáõÝ: ºÃ ÙÝù ûñÇÝ³Ï ñÝù

<TABLE WIDTH="50" BORDER="3">,

³å³ ñááõ½ñÁ Ï³ñï³å³ïÏñÇ 50 åÇùëÉ É³ÛÝáõÃÛáõÝ áõÝóáÕ ³ÕÛáõë³Ï, ÇëÏ Ã ï³É WIDTH=50% ³å³ ³ÕÛáõë³ÏÁ Ï½³ÕóÝÇ ñááõ½ñÇ å³ïáõÑ³ÝÇ ³ÙáÕç É³ÛÝáõÃÛ³Ý ÏëÁ: ÆëÏ ÇÝã ³ÝÉ áñåë½Ç ïùëïÁ Ïå³Í ãÉÇÝÇ ççÇ ßñç³Ý³ÏÇÝ: ¸ñ³ Ñ³Ù³ñ áÛáõÃÛáõÝ áõÝÇ Ñ³ïáõÏ ³ïñÇáõïª CELLPADDING=: Üñ³ ³ñÅùÁ áñáßáõÙ ¿ Ã ïùëïÁ ù³ÝÇ Ïïáí ÏÑé³óíÇ ççÇ ßñç³Ý³ÏÇó:

<TD> ê³ ³ñ¹Ý ³ÕÛáõë³Ï ¿</TD> </TR>

</TABLE>

</FONT>

´³óÇ ¹ñ³ÝÇó áÛáõÃÛáõÝ áõÝÇ CELLSPACING= ³ïñÇáõïÁ, áñÁ ï³ÉÇë ¿ ³ÕÛáõë³ÏÇ çÇçÝñÇ ÙÇç¨ Ñé³íáñáõÃÛáõÝÁ

<TR>

<TD> ê³ ³ñ¹Ý ³ÕÛáõë³Ï ¿ </TD> </TR> </TABLE></FONT>

´³óÇ ¹ñ³ÝÇó BORDERCOLOR= ³ïñÇáõïáí Ï³ñÉÇ ¿ ï³É ßñç³Ý³ÏÇ áõÛÝÁ: ºÃ ÙÝù ñÝù, ûñÇÝ³Ïª BORDERCOLOR="blue", ³å³ Ùñ ³ÕÛáõë³ÏÇ ßñç³Ý³ÏÁ ÏÍíÇ Ï³åáõÛï, ³Ûó ÏÏáñóÝÇ áõéáõóÇÏáõÃÛ³Ý ¿ýÏïÁ: ²Ç¹ ¿ýÏïÁ ëï³óíáõÙ ¿ Ýñ³ ßÝáñÑÇí, áñ ³ÕÛáõë³ÏÇ ßñç³Ý³ÏÁ Ó³ËÇó ¨ íñ¨Çó ÍíáõÙ ¿ ³íÉÇ ³ó áõÛÝáí, ÇëÏ Ýñù¨Çó ¨ ³çÇóª ³íÉÇ Ùáõ: àõéáõóÇÏáõÃÛáõÝÁ å³Ñå³ÝÉáõ Ñ³Ù³ñ Ëáñáõñ¹ ¿ ïñíáõÙ ûï³áñÍÉ ñÏáõ ³ïñÇáõïª BORDERCOLORLIGHT= ¨ BORDERCOLORDARK=:

<TABLE WIDTH="50%" BORDER=="6" CELLSPACING="6" CELLPADDING="20" BORDERCOLORLIGHT="lime"

BORDERCOLORDARK="green">

<TR>

<TD> ê³ ³ñ¹Ý ³ÕÛáõë³Ï ¿ </TD>

</TR>

</TABLE>

</FONT>

²ÕÛáõë³ÏÇ ýáÝÇ áõÛÝÁ Ï³ñÉÇ ï³É BGCOLOR= ³ïñÇáõïÇ ûÝáõÃÛ³Ù: ²ÛÝ Ï³ñáÕ ¿ ï³ññíÉ ³ÙáÕç ¿çÇ ýáÝÇ áõÛÝÇó, áñÁÁ ïñíáõÙ ¿ <BODY> ïÇ BGCOLOR= ³ïñÇáõïáí:

àñåëë½Ç Ñ³í³ë³ñóÝÉ ³ÕÛáõë³ÏÁ ÏÝïñáÝáí Ï³Ù ³ç Í³Ûñáí, <TABLE> ïÇ ALIGN= ³ïñÇáõïáí

<TABLE WIDTH="50%" BORDER="6" CELLSPACING="6" CELLPADDING="20" ALIGN="center" BORDERCOLORLIGHT="Lime" BORDERCOLORDARK="Green"

BGCOLOR="#DFFFDF">

<TR>

<TD>ê³ ñÏñáñ¹ çÇçÝ ¿</TD> </TR>

</TABLE>

</FONT>

ÆÙãåë ïëÝáõÙ ù çÇçÝñÇ ÙÇç¨ Ñé³íáñáõÃÛáõÝÁ ÙÝáõÙ ¿ Ñ³í³ë³ñ CELLSPACING= ³ïñÇáõïÇ ³ñÅùÇÝ:

²ÛÅÙ ³íÉ³óÝÝù Ùñ ³ÕÛáõë³ÏÇ ñÏñáñ¹ ïáÕÁª

<TABLE WIDTH="50%" BORDER="6" CELLSPACING="6" CELLPADDING="20" ALIGN=="center" BORDERCOLORLIGHT="Lime"

BORDERCOLORDARK="Green" BGCOLOR="#DFFFDF">

<TR>

<TD>ê³ ñÏñáñ¹ çÇçÝ ¿</TD> </TR>

<TR>

<TD>ê³ ñÏñáñ¹ ïáÕÇ ³é³çÇÝ çÇçÝ ¿</TD>

</TR>

</TABLE>

</FONT>

ø³ÝÇ áñ ñÏñáñ¹ ïáÕáõÙ Ï³ ÙÇ³ÛÝ ÙÏ çÇç, ñÏñáñ¹ ïáÕÇ ³ó³Ï³ÛáÕ ñÏñáñ¹ ççÇ ïÕÁ ÙÝ³ó ³½³ï ï³ñ³ÍáõÃÛáõÝ: ºñÙÝ ¹³ ûï³Ï³ñ ¿ ÉÇÝáõÙ, ³Ûó ³íÉÇ Ñ³×³Ë å³Ñ³ÝçíáõÙ ¿ ÃáÕÝÉ ãÉñ³óí³Í ççÇ ¹³ï³ñÏ ßñç³Ý³ÏÁ: ÆÝãåë ¹³ ³ÝÉ: ºÃ ÙÝù áõÕÕ³ÏÇ ³íÉ³óÝÝù <TD> ¨ </TD> ïñÁ, áã ÙÇ ³Ý ãÇ ÷áËíÇª ¹³ï³ñÏ ççÇ ßñç³Ý³ÏÁ ãÇ ³ñï³å³ïÏñíÇ: ´ççÇ ïñÇ ³ñ³ÝùÁ ³ó³ÏÝñ ¹ÝÉÁ ÝáõÛÝåë ãÇ ûÝáõÙ, ù³ÝÇ áñ HTML-áõÙ ³íÉáñ¹ ³ó³ÏÝñÁ ³ÝïëíáõÙ Ý:

ØÇÝã ³ÛÅÙ ÙÝù ¹Çï³ñÏÉ Ýù ÙÇ³ÛÝ <TABLE> ïÇ ³ïñÇáõïÝñÁ, ë³Ï³ÛÝ <TR> ¨ <TD> ïñÁ ÝáõÛÝåë Ï³ñáÕ Ý áõÝÝ³É ÇñÝó ³ïñÇáõïÝñÁ ÇÝãåÇëÇÝ Ýª BGCOLOR=, BORDERCOLOR=, BORDERCOLORLIGHT=, BORDERCOLORDARK= ¨ ALIGN=: Üñ³Ýó ³ñÅùÝñÁ íñ³ñíáõÙ Ý ³ÕÛáõë³ÏÇ ÙÇ³ÛÝ ïáÕÇÝ Ï³Ù ççÇÝ: ´³óÇ ¹ñ³ÝÇó áÛáõÃÛáõÝ áõÝÇ VALIGN= ³ïñÇáõïÁ, áñÇ ûÝáõÃÛ³Ù Ï³ñÉÇ ¿ ÕÏ³í³ñÉ ïáÕÇ Ï³Ù ççÇ ïùëïÇ áõÕÕ³Ñ³Û³ó Ñ³í³ë³ñóáõÙÁ: ²Ûë ³ïñÇáõïÁ Ï³ñáÕ ¿ ÁÝ¹áõÝÉ Ñï¨Û³É ³ñÅùÝñÁª top- íñÇÝ Í³Ûñáí Ñ³í³ë³ñóáõÙ, middle- ÙçïÕ Ñ³í³ë³ñóáõÙ, bottom- ëïáñÇÝ Ù³ëáí Ñ³í³ë³ñóáõÙ:

êÛáõÝñÇ É³ÛÝáõÃÛ³Ý ÕÏ³í³ñáõÙ

ºÃ Ý³ÛÝù Ùñ ³ÕÛáõë³ÏÇÝ, ³å³ ÏïëÝÝù, áñ ëÛáõÝñÇ É³ÛÝáõÃÛáõÝÁ ï³ññ ¿: ¸ñ³ å³ï×³éÁ ³ÛÝ ¿, áñ ñááõ½ñÁ ÇÝùÝáõñáõÛÝ ³Å³ÝáõÙ ¿ ³ÕÛáõë³ÏÇ ïÕñÁ, Ï³Ëí³Í ëÛ³Ý ³é³çÇÝ ççáõÙ ïùëïÇ ù³Ý³ÏáõÃÛáõÝÇó: ´³Ûó Ã ³é³çÇÝ ççáõÙ ÝßÉ <TD WIDTH="50%">, ³å³ ñÏáõ ëÛáõÝÝ ¿É ÏáõÝÝ³Ý ÝáõÛÝ É³ÛÝáõÃÛáõÝÁ: ²ÛëåÇëáí WIDTH= ³ïñÇáõïÁ Ï³ñÉÇ ¿ ûï³áñÍÉ <TD> ïáõÙ ÝáõÛÝÏñå, ÇÝãåë <TABLE>-áõÙ: ê³Ï³ÛÝ ³ÝÑÝ³ñ ¿ ï³É Ûáõñ³ù³ÝãÛáõñ ççÇ É³ÛÝáõÃÛáõÝÁª ïñíáõÙ ¿ ³ÙáÕç ëÛáõÝÇ É³ÛÝáõÃÛáõÝÁ, ù³ÝÇ áñ ñááõ½ñÝñÇ ÙÍ³Ù³ëÝáõÃÛáõÝáõÙ ëÛ³Ý áÉáñ çÇçÝñÁ áõÝÝ ÝáõÛÝ É³ÛÝáõÃÛáõÝÁ:

´çÇçÝñÇ ÙÇ³íáñáõÙÁ

ºñÙÝ ³ÕÛáõë³ÏÝñáõÙ Ñ³Ý¹ÇåáõÙ Ý ³Ûëåë Ïáãí³Í ÙÇ³íáñí³Í çÇçÝñ:

ØÇ³íáñí³Í çÇçÁ ëï³óíáõÙ ¿ ÙÇ ù³ÝÇ Ñ³ñ¨³Ý çÇçÝñÇ ÙÇ³íáñáõÙÇó: ¸³ Ï³ñÉÇ ¿ ³ÝÉ ï³Éáí COLSPAN= ³ïñÇáõïÁª Ñ³ñ¨³Ý ëÛáõÝñÁ ÙÇ³óÝÉáõ Ñ³Ù³ñ, ¨ ROWSPAN= ³ïñÇáõïÁª Ñ³ñ¨³Ý ïáÕñÁ ÙÇ³óÝÉáõ Ñ³Ù³ñ:

<TABLE WIDTH="50%" BORDER="6" CELLSPACING="6" CELLPADDING="20" ALIGN="center" BORDERCOLORLIGHT="Lime"

BORDERCOLORDARK="Green" BGCOLOR="#DFFFDF">

<TR>

<TD WIDTH="33%">ê³ ñÏñáñ¹ çÇçÝ ¿</TD>

</TR> <TR>

<TD COLSPAN="2">ê³ ñÏñáñ¹ ïáÕÇ ÙÇ³Ï çÇçÝ ¿, áñÁ ÙÇ³íáñáõÙ ¿ ñÏáõ ëÛáõÝ</TD>

</TR>

<TR>

<TD>ÆëÏ ë³ ññáñ¹ ïáÕÇ ñÏñáñ¹ çÇçÝ ¿</TD> </TR>

</TABLE>

</FONT>

ÆÝãåë ïëÝáõÙ ù, ÝñÏ³Û³óí³Í ¿ ñù ïáÕáí ¨ ñù ëÛáõÝáí ³ÕÛáõë³Ï: ê³Ï³ÛÝ ³é³çÇÝ ïáÕÇ ññáñ¹ çÇçÁ ÙÇ³ó³Í ¿ ññáñ¹ ëÛ³Ý ÙÝ³ó³Í ñÏáõ çÇçÝññÇÝ ROWSPAN="3" ³ïñÇáõïÇ ûÝáõÃÛ³Ù: ØÛáõë ïáÕñáõÙ ÙÝù Ï³ñáÕ Ýù Ñ³ÝÇëï Ùáé³Ý³É ññáñ¹ ëÛ³Ý Ù³ëÇÝª ³Û¹ ïÕÁ ³ñ¹Ý ½³Õóñ³Í ¿: ²Û¹ å³ï×³éáí ³ÕÛáõë³ÏÇ ññáñ¹ ïáÕÁ å³ñáõÝ³ÏáõÙ ¿ ÙÇ³ÛÝ ñÏáõ çÇç, ÇëÏ ñÏñáñ¹ ïáÕáõÙ COLSPAN="2" ³ïñÇáõïÇ ÙÇçáóáí ïáÕÇ ñÏáõ çÇçÝñÁ ÙÇ³íáñí³Í Ý:

¸Çï³ñÏÝù ³ÕÛáõë³ÏÇ ³ÛÉ ï³ñññª íñÝ³ÇñÁ ¨ íñç³íáñáõÃÛáõÝÁ: HTML-áõÙ Ï³ñÉÇ ¿ ³ÕÛáõë³ÏÇ ÑÇÙÝ³Ï³Ý Ù³ëÁ ÝßÉ <TBODY> ïáí: ²Û¹ ¹åùáõÙ ³ÕÛáõë³ÏÇ íñÝ³ÇñÁ Ýß³Ý³ÏíáõÙ ¿ <THEAD> ïáí, ÇëÏ íç³íáñáõÃÛáõÝÁª <TFOOT>: ´áÉáñ ñù ïñÁ ûï³áñÍíáõÙ Ý ÇñÝó Ã³ÏáÕ ïñÇ Ñï ¨ Ï³ñáÕ Ý áõÝÝ³É ï³ññ ³ïñÇáõïÝñ, ûñÇÝ³Ïª BGCOLOR=, ALIGN=, VALIGN= ¨ ³ÛÉÝ, ÇëÏ ³ÕÛáõë³ÏÇ íñÝ³ñÇ ççÇ Ñ³Ù³ñ <TD> ïÇ ÷áË³ñÝ ëáíáñ³³ñ ûï³áñÍáõÙ Ý <TH> ïÁ: êÏ½áõÝùáñÝ ¹³ ÝáõÛÝ ³ÝÝ ¿, ³Ûó <TH> çÇçÝñáõÙ ïùëïÁ Ñ³í³ë³ñóíáõÙ ¿ ÏÝïñáÝáí í ³ñï³å³ïÏñíáõÙ ¿ Ã³í ßñÇýïáíª

<TABLE WIDTH="50%" BORDER="6" CELLSPACING="6" CELLPADDING="20" ALIGN="center" BORDERCOLORLIGHT="Lime"

BORDERCOLORDARK="Green" BGCOLOR="#DFFFDF">

<TR><TH COLSPAN="3">àõëáõóáÕ³Ï³Ý ³ÕÛáõë³Ï</TH></TR> </THEAD>

<TBODY>

<TR>

<TD WIDTH="33%"> ê³ ñÏñáñ¹ çÇçÝ ¿</TD>

</TR>

<TR>

<TR COLSPAN="2"> ê³ ñÏñáñ¹ ïáÕÇ ÙÇ³Ï çÇçÝ ¿, áñÁ ÙÇ³íáñáõÙ ¿ ñÏáõ ëÛáõÝ</TD>

</TR>

<TR>

<TD> ÆëÏ ë³ ññáñ¹ ïáÕÇ ñÏñáñ¹ çÇçÝ ¿</TD>

</TR>

</TBODY> <TFOOT BGCOLOR="Yellow">

</TR> ><Small>³ÕÛáõë³Ï ëïÕÍÉ</TFOOT>

</TABLE>

</FONT>