Ç¥(TABLE)ÀÇ Ç¥Çö |
ÀÌÀü¼ø¼ | ´ÙÀ½¼ø¼ | ¸ñÂ÷ | ¿¤·¹¸àÆ® | ¾ÖÆ®¸®ºäÆ® | HTML ±Ô°Ý |
<TABLE>Ä÷´°ú ¿µé·Î ±¸¼ºµÈ Ç¥(Å×À̺í:TABLE)¸¦ ¸¸µé ¶§ TABLE ¿¤·¹¸àÆ®À» »ç¿ëÇÑ´Ù. ÀÌ TABLE ¿¤·¹¸àÆ®¿¡´Â Ç¥ÀÇ ÁÙ(TR: table rows), Ç¥ÀÇ Ä(TD: table data), Ç¥ÀÇ Á¦¸ñ(TH: table title) ¿¤·¹¸àÆ®¸¦ Æ÷ÇÔÇÏ°Ô µÈ´Ù. <TABLE>¿¡¼ »ç¿ë ÇÒ ¼ö ÀÖ´Â ¾ÖÆ®¸®ºäÆ®´Â bgcolor=»ö»ó : Ç¥ÀÇ ¹ÙÅÁ»öÀ» »ö»ó°ªÀ¸·Î ÁöÁ¤ width=±æÀÌ : Ç¥ÀÇ ³Êºñ¸¦ ¹éºÐÀ² ȤÀº Çȼ¿(pixel)·Î ÁöÁ¤ border=pixcel : Ç¥ÀÇ Å׵θ® µÎ²²¸¦ Çȼ¿(pixel)·Î ÁöÁ¤ cellspacing=pixcel : Ä(cell) »çÀÌÀÇ °£°ÝÀ» Çȼ¿(pixel)·Î ÁöÁ¤ cellpadding=pixcel : Ä ¾È¿¡¼ÀÇ °£°ÝÀ» Çȼ¿(pixel)·Î ÁöÁ¤
<TR>Ç¥ÀÇ ÁÙ(TR: table rows) ű×À̸ç, <TABLE></TABLE> »çÀÌ¿¡ ¹Ýµå½Ã ÇÑ ½Ö ÀÌ»ó ÀÖ¾î¾ß ÇÑ´Ù. <TR>¿¡¼ »ç¿ë ÇÒ ¼ö ÀÖ´Â ¾ÖÆ®¸®ºäÆ®´Â bgcolor=»ö»ó : Ç¥ÀÇ ÁÙ ¹ÙÅÁ»öÀ» »ö»ó°ªÀ¸·Î ÁöÁ¤ width=±æÀÌ : Ç¥ÀÇ ÁÙ ÆøÀ» ¹éºÐÀ² ȤÀº Çȼ¿(pixel)·Î ÁöÁ¤ height=±æÀÌ : Ç¥ÀÇ ÁÙ ³ôÀ̸¦ ¹éºÐÀ² ȤÀº Çȼ¿(pixel)·Î ÁöÁ¤ align=left | center | right : Ç¥ÀÇ ÁÙ¿¡¼ ³»¿ëÀÇ ¼öÆò Á¤·ÄÀ» ÁöÁ¤ valign=top | middle | bottom : Ç¥ÀÇ ÁÙ¿¡¼ ³»¿ëÀÇ ¼öÁ÷ Á¤·ÄÀ» ÁöÁ¤ ºê¶ó¿ìÀú¿¡ µû¶ó Ç¥ÇöÀÌ ´Ù¼Ò ´Ù¸£´Ù. <TD>¿Í <TH>Ç¥ÀÇ Á¦¸ñ(TH: table title) ¿¤·¹¸àÆ®µµ Ç¥ÀÇ Ä(TD: table data)ÀÇ ÇÑ Á¾·ùÀÌ¸ç ±× Æ¯¼ºµéµµ °ÅÀÇ °°´Ù. ´ÜÁö, TH¿¡¼´Â Á¦¸ñÀÎ ¸¸Å ±½Àº ±ÛÀڷΠǥÇöÇÏ°í ÄÀÇ Áß¾Ó¿¡ ¹è¿µÈ´Ù. <TR></TR> »çÀÌ¿¡ ¹Ýµå½Ã ÇÑ ½Ö ÀÌ»ó ÀÖ¾î¾ß ÇÑ´Ù. <TD>¿Í <TD>¿¡¼ »ç¿ë ÇÒ ¼ö ÀÖ´Â ¾ÖÆ®¸®ºäÆ®´Â bgcolor=»ö»ó : Ç¥ÀÇ Ä ¹ÙÅÁ»öÀ» »ö»ó°ªÀ¸·Î ÁöÁ¤ background=URL : Ç¥ÀÇ Ä ¹è°æ À̹ÌÁö¸¦ URLÀ¸·Î ÁöÁ¤ width=±æÀÌ : Ç¥ÀÇ Ä ÆøÀ» ¹éºÐÀ² ȤÀº Çȼ¿(pixel)·Î ÁöÁ¤ height=Çȼ¿(pixel) : Ç¥ÀÇ Ä ³ôÀ̸¦ Çȼ¿(pixel)·Î ÁöÁ¤ align=left | center | right : Ç¥ÀÇ Ä¿¡¼ ³»¿ëÀÇ ¼öÆò Á¤·ÄÀ» ÁöÁ¤, left°¡ µðÆúÆ®ÀÌ´Ù. valign=top | middle | bottom : Ç¥ÀÇ Ä¿¡¼ ³»¿ëÀÇ ¼öÁ÷ Á¤·ÄÀ» ÁöÁ¤, middleÀÌ µðÆúÆ®ÀÌ´Ù. colspan=°¹¼ö : Ç¥ÀÇ Ä¿¡¼ ¼öÆò ÅëÇÕ ÄÀÇ °¹¼ö ÁöÁ¤ rowspan=°¹¼ö : Ç¥ÀÇ Ä¿¡¼ ¼öÁ÷ ÅëÇÕ ÄÀÇ °¹¼ö ÁöÁ¤ ºê¶ó¿ìÀú¿¡ µû¶ó Ç¥ÇöÀÌ ´Ù¼Ò ´Ù¸£´Ù. °¡Àå °£´ÜÇÑ Ç¥´Â ÇÑ°³ÀÇ Ç¥ÀÇ ÁÙ°ú ÇÑÁÙ¿¡ ÇÑ°³ÀÇ Ç¥ÀÇ ÄÀ» °®´Â °æ¿ìÀÌ´Ù. <TABLE border=1><TR> <TD>ÇÑ°³ÀÇ Ç¥ÀÇ ÁÙ°ú ÇÑÁÙ¿¡ ÇÑ°³ÀÇ Ç¥ÀÇ ÄÀ» °®´Â Ç¥ÀÇ ¿¹Á¦</TD> </TR></TABLE>
Á¦¸ñ ÁÙ°ú ¼¼°³ÀÇ Ç¥ÀÇ ÁÙ, ¼¼°³ÀÇ Ç¥ÀÇ ÄÀ» °®´Â ¿¹Á¦. <TABLE border=1 bgcolor=ddddff width=80%> <TR bgcolor=ddffdd> <TH width=30%>1¹ø Ä Á¦¸ñ</TH> <TH width=30%>2¹ø Ä Á¦¸ñ</TH> <TH wdith=40% bgcolor=ffdddd>3¹ø Ä Á¦¸ñ</TH> </TR> <TR align=center> <TD height=40>1¹ø ÁÙ - 1¹ø Ä</TD> <TD>1¹ø ÁÙ - 2¹ø Ä</TD> <TD>1¹ø ÁÙ - 3¹ø Ä</TD> </TR> <TR> <TD>2¹ø ÁÙ - 1¹ø Ä</TD> <TD>2¹ø ÁÙ - 2¹ø Ä</TD> <TD>2¹ø ÁÙ - 3¹ø Ä</TD> <TR> <TD align=center>3¹ø ÁÙ - 1¹ø Ä</TD> <TD>3¹ø ÁÙ - 2¹ø Ä</TD> <TD align=right>3¹ø ÁÙ - 3¹ø Ä</TD> </TR> </TABLE>
Ç¥ÀÇ Á¦¸ñ: <CAPTION> </CAPTION>Ç¥ÀÇ Á¦¸ñÀ» Ç¥ÇöÇÑ´Ù. <TABLE> ½ÃÀÛ Å±װ¡ ½ÃÀÛ µÈ ´ÙÀ½¿¡ ¸í½ÃÇÑ´Ù. Ç¥ÀÇ Ä ¼Ó¿¡´Â ¹®ÀåÀ̳ª À̹ÌÁö »Ó¾Æ´Ï¶ó, ¿©·¯ ´Ü°è·Î ³×½ºÆà µÇ¸é¼ ¸ñ·ÏµéÀ̳ª ´Ù¸¥ Ç¥µéÀ» °¡Áú ¼ö ÀÖ´Ù. ÄÀÇ ÆøÀ» Çѹø ÁöÀåÇÏ¸é µÇÁö ¸¸ ÃÖ¼ÒÀÇ ÆøÀ» ¸ø °®´Â Ä÷³ÀÌ ÀÖÀ¸¸é, ºê¶ó¿ìÀúµéÀº Ç¥ÀÇ °¢ ÄÀÇ ³Êºñ³ª Àüü Ç¥ÀÇ ³Êºñ¸¦ ÀÚµ¿À¸·Î Á¶ÀýÇÏ¿© Ç¥ÇöÇϹǷΠ¸Å¿ì Æí¸®ÇÏÁö¸¸, ¿øÇÏ´Â ³Êºñ¸¦ ÀÎÀ§ÀûÀ¸·Î ¸ÂÃ߱Ⱑ ½±Áö ¾Ê´Ù. ºê¶ó¿ìÀú°¡ °¢ ÄÀÇ ³Êºñ¸¦ ¾î¶² ±âÁØ¿¡ ÀÇÇÏ¿© ÀÚµ¿ Á¶ÀýÇϴ°¡´Â HTML ±Ô°Ý¿¡¼ Ç¥ÀÇ Ç¥ÇöÀ» ÂüÁ¶Ç϶ó. ÄÀ» ÅëÇÕÇϸé Ç¥ÀÇ Ä ¾È¿¡ ´Ù¸¥ Ç¥°¡ µé¾î°£ ¿¹Á¦. <TABLE border=1 width=80%> <CAPTION>½ÇÇè¿ë Ç¥(TABLE) CAPTION</CAPTION> <TR bgcolor=ddffdd> <TH width=30%>1¹ø Ä Á¦¸ñ</TH> <TH width=30%>2¹ø Ä Á¦¸ñ</TH> <TH wdith=40% bgcolor=ffdddd>3¹ø Ä Á¦¸ñ</TH> </TR> <TR align=center> <TD rowspan=2>1¹ø ÁÙ - 1¹ø Ä<BR>2¹ø ÁÙ - 1¹ø Ä ÅëÇÕ</TD> <TD>1¹ø ÁÙ - 2¹ø Ä</TD> <TD>1¹ø ÁÙ - 3¹ø Ä</TD> </TR> <TR> <TD>2¹ø ÁÙ - 2¹ø Ä</TD> <TD>2¹ø ÁÙ - 3¹ø Ä</TD> <TR> <TD colspan=2 align=center bgcolor=eeffff>3¹ø ÁÙ - 1,2¹ø Ä ÅëÇÕ <TABLE border=1 bgcolor=ffffee width=90%> <TR><TD>3-1-1-1</TD><TD>3-1-1-2</TD><TD>3-1-1-3</TD></TR> <TR><TD>3-1-2-1</TD><TD>3-1-2-2</TD><TD>3-1-2-3</TD></TR> <TR><TD>3-1-3-1</TD><TD>3-1-3-2</TD><TD>3-1-3-3</TD></TR> </TABLE> </TD> <TD><IMG src="../../gif/ictrio.gif"> 3¹ø ÁÙ - 3¹ø Ä <OL> <LI>3-3-1 <LI>3-3-2 <LI>3-3-3 </OL> </TD> </TR> </TABLE>
±âŸ Ãß°¡ÀûÀÎ ¾ÖÆ®¸®ºäÆ® µîÀº HTML ±Ô°ÝÀÇ Ç¥ÀÇ Ç¥Çö¿¡ ´ëÇÑ ÀÚ¼¼ÇÑ Á¤º¸¸¦ ÂüÁ¶Ç϶ó. |