W3C17 Å×À̺í(table)Trio ȨÆäÀÌÁö 

¸ñÂ÷

17.1 Å×À̺í(table)ÀÇ ¼Ò°³

Å×À̺íµéÀº µ¥ÀÌÅÍ»çÀÌÀÇ °ü°è¸¦ ´ëÇ¥ÇÑ´Ù. Á¦ÀÛÀÚµéÀº ÀÌµé °ü°è¸¦ ¹®¼­¾ð¾î ¾È¿¡¼­ ÁöÁ¤ÇÏ°í, ±×µéÀ» ÁöÁ¤Çϴ ǥÇöÀº ½Ã°¢Àû, ¼Ò¸®ÀûÀÇ µÎ°¡Áö ¹æ½ÄÀÌ ÀÖ´Ù.

Á¦ÀÛÀÚµéÀº ¼¿(cell)µéÀÇ »ç°¢Çü Ʋ(grid)·Î Å×À̺íÀÇ º¸ÀÌ´Â ¾ç½ÄÈ­¸¦ ÁöÁ¤ÇÒ ¼ö ÀÖ´Ù. ¼¿ÀÇ ÁÙ°ú Ä÷³µéÀº ÁÙ ±¸·ì°ú Ä÷³ ±¸·ìµé·Î ±¸¼ºµÉ ¼ö ÀÖ´Ù. ÁÙ, Ä÷³, ÁÙ ±¸·ì, ÁÙ Ä÷³°ú ÁÙµéÀº ±×µé ÁÖÀ§¿¡ ±×·ÁÁø Å׵θ®(border)µéÀ» °¡Áú ¼ö ÀÖ´Ù(CSS2¿¡´Â µÎ°¡Áö Å׵θ® ¸ðµ¨µéÀÌ ÀÖ´Ù). Á¦ÀÛÀÚµéÀº ÁÙ ¶Ç´Â Ä÷³ÀÇ ¸ðµç ¼¿¿¡¼­ ¼öÁ÷ÀûÀ¸·Î ¶Ç´Â ¼öÆòÀûÀ¸·Î µ¥ÀÌÅ͸¦ Á¤·ÄÇÒ ¼ö ÀÖ´Ù.

Á¦ÀÛÀÚµéÀº ¾î¶»°Ô ¸Ó¸´¸»°ú ³»¿ëÀÌ ¸»ÇØ Á®¾ßÇϴ°¡ ÇÏ´Â, Å×À̺íÀÇ ¼Ò¸®(aural) Ç¥Çöµµ ÁöÁ¤ÇÒ ¼ö ÀÖ´Ù. ¹®¼­¾ð¾î¿¡¼­, Á¦ÀÛÀÚµéÀº, ¼Ò¸®·Î Ç¥ÇöµÉ ¶§, ¼¿ÀÇ ¸Ó¸´¸»ÀÌ ¼¿ÀÇ µ¥ÀÌÅͺ¸´Ù ¸ÕÀú ¸»ÇØÁöµµ·Ï, ¼¿µé°ú ¼¿µéÀÇ ±¸·ìµé¿¡ À̸§À» ºÙÀÏ(label) ¼ö ÀÖ´Ù. ±× °á°ú, Å×À̺íÀÇ ÀÌ ¼ø¼­È­("serializes")´Â »ç¿ëÀÚµéÀÌ ÀÌ Å×ÀÌºí¸¦ ¼Ò¸®·Î µèÀ» ¶§ ¸Ó¸´¸» ´ÙÀ½¿¡ µ¥ÀÌÅ͸¦ µè°Ô µÈ´Ù.

¿¹Á¦:

¿©±â¼­ HTML¿¡¼­ 4À¸·Î ÀÛ¼ºÇÑ ´Ü¼øÇÑ ¼¼ ÁÙ, ¼¼ Ä®·³ÀÇ Å×ÀÌºí¸¦ º¸ÀÚ

<TABLE>
   <CAPTION>3x3 Å×À̺íÀÇ ´Ü¼øÇÑ ¿¹Á¦</CAPTION>
   <TR id="row1">
      <TH>¸Ó¸´¸» 1  <TD>¼¿ 1  <TD>¼¿ 2
   <TR id="row2">
      <TH>¸Ó¸´¸»  2  <TD>¼¿ 3  <TD>¼¿ 4
   <TR id="row3">
      <TH>¸Ó¸´¸» 3  <TD>¼¿ 5  <TD>¼¿ 6
</TABLE>

ÇϳªÀÇ Å×À̺í(TABLE ¿¤·¹¸àÆ®)¿¡, ¼¼°³ÀÇ ÁÙ(TR ¿¤·¹¸àÆ®), ¼¼°³ÀÇ ¸Ó¸´¸»(TH ¿¤·¹¸àÆ®)°ú ¿©¼¸°³ÀÇ µ¥ÀÌÅÍ ¼¿(TD ¿¤·¹¸àÆ®)µéÀ» »ý¼ºÇÑ´Ù. ÀÌ ¿¹Á¦¿¡¼­ ¼¼°³ÀÇ Ä÷³µéÀº ÇÔÃàÀûÀ¸·Î ÁöÁ¤µÇ¾ú´Ù´Â °Í¿¡ À¯ÀÇÇ϶ó: ¸Ó¸´¸»°ú µ¥ÀÌÅÍ ¼¿µé¿¡ ÀÇÇÏ¿© ÇÊ¿äÇÑ ¸¸Å­ÀÇ °¹¼ö ¸¸Å­ Ä÷³ÀÌ ÀÖ´Ù.

´ÙÀ½ CSS ¸í·ÉÀº, ¸Ó¸´¸» ¼¿µé°ú ÇöÀçÀÇ µ¥ÀÌÅÍ ¼¿¾È¿¡¼­ ±Û²ÃÀÇ µÎ²²¸¦ µÎ²®°Ô(bold), ÅؽºÆ®¸¦ ¼öÆòÀûÀ¸·Î Áß¾Ó¿¡ ¸ÂÃá´Ù:

TH {
   text-align: center;
   font-weight: bold
}

´ÙÀ½ ¸í·ÉµéÀº ¸Ó¸´¸» ¼¿ÀÇ ÅؽºÆ®¸¦ ±×µéÀÇ ±âÃʼ±(baseline)¿¡, °¢ µ¥ÀÌÅÍ ¼¿ÀÇ ÅؽºÆ®¸¦ ¼öÁ÷ÀûÀ¸·Î Áß°£¿¡ Á¤·ÄÇÑ´Ù:

TH { vertical-align: baseline }
TD { vertical-align: middle }

´ÙÀ½ ¸í·ÉµéÀº ¸ÇÀ§ ÁÙÀ» û»ö 3px ½Ç¼±(solid) Å׵θ®·Î ½ÎÀÌ°Ô ÇÏ°í, ´Ù¸¥ °¢ ÁÙµéÀº °ËÁ¤»ö 1px ½Ç¼± Å׵θ®·Î ½ÎÀÌ°Ô ÁöÁ¤ÇÏ¿´´Ù:

TABLE { border-collapse: collapse }
TR#row1 { border-top: 3px solid blue }
TR#row2 { border-top: 1px solid black }
TR#row3 { border-top: 1px solid black }

±×·¯³ª, ÁÙµé ÁÖÀ§ÀÇ Å׵θ®(border)µéÀº ÁÙµéÀÌ ¸¸³ª´Â °÷¿¡¼­ °ãÃÄÁø´Ù´Â Á¡¿¡ À¯ÀÇÇ϶ó. ÁÙ1(row1)°ú ÁÙ2(row2)»çÀÌÀÇ Å׵θ®´Â ¾î¶² »ö»ó(black ¶Ç´Â blue)°ú µÎ²²(1px ¶Ç´Â 3px)¸¦ °¡Áú °ÍÀΰ¡ ? ÀÌ´Â Å׵θ®ÀÇ ÇØ»óµµ ¸¶Âû(conflict resolution) Ç׸ñ¿¡¼­ ´Ù·é´Ù.

´ÙÀ½ ¸í·ÉÀº Å×À̺í À§¿¡ Å×À̺í Á¦¸ñ(caption)À» ³Ö´Â´Ù:

CAPTION { caption-side: top }

´ÙÀ½ ¸í·ÉÀº ¼Ò¸®·Î Ç¥ÇöµÉ ¶§, °¢ µ¥ÀÌÅÍ ÁÙÀÌ "Header, Data, Data"·Î ¸»Çϵµ·Ï ÁöÁ¤ÇÑ´Ù:

TH { speak-header: once }

¿¹¸¦ µé¾î, ù¹ø° ÁÙÀº "Header1 ¼¿1 ¼¿2"·Î ¸»ÇØÁø´Ù. ÀÌ¿Í´Â ´Þ¸®, ´ÙÀ½ ¸í·É:

TH { speak-header: always }

¿©±â¼­´Â "Header1 ¼¿1 Header1 ¼¿2"·Î ¸»ÇØÁø´Ù.

¾Õ ¿¹Á¦´Â CSSÀÇ HTML 4 ¿¤·¹¸àÆ®µé°ú ÀÛ¿ëÀ» ¼³¸íÇÏ¿´´Ù; ¿©·¯ ¹ø¿ª¹® HTML 4 Å×ÀÌºí ¿¤·¹¸àÆ®µé(TABLE, CAPTION, THEAD, TBODY, TFOOT, COL, COLGROUP, TH, TD)ÀÇ Àǹ̰¡ Àß Á¤ÀǵǾú´Ù. XML°ú °°Àº ´Ù¸¥ ¹®¼­¾ð¾îµé¿¡¼­, Å×ÀÌºí ¿¤·¹¸àÆ®µéÀÌ »çÀü¿¡ Á¤ÀǵÇÁö ¾Ê¾ÒÀ» ¼ö ÀÖ´Ù. µû¶ó¼­, CSS2´Â Á¦ÀÛÀڵ鿡°Ô ¹®¼­¾ð¾î ¿¤·¹¸àÆ®µéÀ», 'display' ¼Ó¼ºÀ» ÅëÇÏ¿©, Å×ÀÌºí ¿¤·¹¸àÆ®µé¿¡ ¹èÄ¡("map")¸¦ Çã¿ëÇÏ¿´´Ù. ¿¹¸¦ µé¾î, ´ÙÀ½ ¸í·ÉÀº, HTMLÀÇ TABLE ¿¤·¹¸àÆ®¿Í °°Àº, FOO ¿¤·¹¸àÆ®¿Í, CAPTION ¿¤·¹¸àÆ®¿Í °°Àº ÀÛ¿ëÀ» ÇÏ´Â, BAR ¿¤·¹¸àÆ® ¸¦ ¸¸µç´Ù:

FOO { display : table }
BAR { display : table-caption }

¿©·¯ Å×ÀÌºí ¿¤·¹¸àÆ®µéÀº ´ÙÀ½ Ç׸ñ¿¡¼­ ´Ù·é´Ù. ÀÌ ±Ô°Ý¿¡¼­, ¿ë¾î Å×À̺í(table) ¿¤·¹¸àÆ®´Â Å×ÀÌºí »ý¼º¿¡ °ü¿©ÇÏ´Â ¿¤·¹¸àÆ®¸¦ ¸»ÇÑ´Ù. ³»ºÎ Å×ÀÌºí ¿¤·¹¸àÆ®("internal" table element)´Â ÁÙ, ÁÙ±¸·ì, Ä÷³, Ä÷³±¸·ì ¶Ç´Â ¼¿À» ¸¸µå´Â °ÍÀÌ´Ù.

17.2 CSS Å×ÀÌºí ¸ðµ¨

CSS Å×ÀÌºí ¸ðµ¨Àº HTML 4 Å×ÀÌºí ¸ðµ¨¿¡ ±âÃʸ¦ µÎ°í ÀÖÀ¸¸ç, ¿©±â¼­ Å×À̺íÀÇ ±¸Á¶´Â Å×À̺íÀÇ º¸ÀÌ´Â ¹è¿­¿¡ °ÅÀÇ ÆòÇàÇÏ°Ô µÈ´Ù. ÀÌ ¸ðµ¨¿¡¼­, Å×À̺íÀº ¼±ÅÃÀû Á¦¸ñ°ú ¿©·¯°³ÀÇ ÁÙµé°ú ¼¿µé·Î ±¸¼ºµÈ´Ù. Å×ÀÌºí ¸ðµ¨Àº, Á¦ÀÛÀÚµéÀÌ, Ä÷³µéÀÌ ¾Æ´Ï°í, ÁÙµéÀ» ¹®¼­¾ð¾î ¸í½ÃÀûÀ¸·Î ÁöÁ¤Çϱ⠶§¹®¿¡, ÁÙ ¿ì¼±("row primary")À¸·Î ¸»ÇÒ ¼ö ÀÖ´Ù. Ä÷³µéÀº ¸ðµç ÁÙµéÀÌ ÁöÁ¤µÈ ´ÙÀ½¿¡ »ý¼ºµÈ´Ù. -- °¢ Á٠ù¹ø° ¼¿Àº ù¹ø° Ä÷³¿¡ ¼ÓÇÏ°í, µÎ¹ø°´Â µÎ¹ø° Ä÷³¿¡, µî. ÁÙµé°ú Ä÷³µé´Â ±¸Á¶ÀûÀ¸·Î ±¸·ì Áö¿ö Áú ¼ö ÀÖ°í, ÀÌ ±¸·ì Áþ±â(grouping) Ç¥Çö¿¡ ¹Ý¿µµÈ´Ù(¿¹: Å׵θ®°¡ ÁÙµé ±¸·ì ÁÖÀ§¿¡ ±×·Á Áú ¼ö ÀÖ½¿).

µû¶ó¼­, Å×ÀÌºí ¸ðµ¨Àº table, Á¦¸ñ, ÁÙ, ÁÙ ±¸·ì(row group), Ä÷³, Ä÷³ ±¸·ì(column group), ¼¿µé·Î ±¸¼ºµÈ´Ù.

CSS ¸ðµ¨Àº ¹®¼­¾ð¾î°¡ ÀÌµé °¢ ÄÞÆ÷³ÙÆ®¿¡ »óÀÀÇÏ´Â ¿¤·¹¸àÆ®µéÀ» Æ÷ÇÔÇÒ ÇÊ¿ä´Â ¾ø´Ù. Å×ÀÌºí ¿¤·¹¸àÆ®µéÀÌ »çÀü¿¡ Á¤ÀǵÇÁö ¾ÊÀº ¹®¼­¾ð¾îµé(XML Àû¿ë°ú °°Àº)¿¡¼­, Á¦ÀÛÀÚµéÀº Å×ÀÌºí ¿¤·¹¸àÆ®µé¿¡ ¹®¼­¾ð¾î ¿¤·¹¸àÆ®µéÀ» ¹èÄ¡(map)ÇÏ¿©¾ß ÇÑ´Ù; ÀÌ´Â 'display' ¼Ó¼ºÀ¸·Î ÀÌ·ç¾î Áø´Ù. ´ÙÀ½ 'display' °ªµéÀº ÀÓÀÇÀÇ ¿¤·¹¸àÆ®¿¡ Å×À̺í Àǹ̸¦ ºÎ¿©ÇÑ´Ù:

table (HTML¿¡¼­: TABLE)
¿¤·¹¸àÆ®°¡ ºí·°·¹º§(block-level) Å×À̺íÀº Á¤ÀÇÇϵµ·Ï ÁöÁ¤ÇÑ´Ù : ÀÌ´Â ºí·° ¾ç½ÄÈ­ ¹®¸Æ¿¡ Âü¿©ÇÏ´Â »ç°¢Çü ºí·°(block)ÀÌ´Ù.
inline-table (HTML¿¡¼­: TABLE)
¿¤·¹¸àÆ®°¡ ÀζóÀÎ(inline-level) Å×À̺íÀº Á¤ÀÇÇϵµ·Ï ÁöÁ¤ÇÑ´Ù: ÀÌ´Â ÀζóÀÎ ¾ç½ÄÈ­ ¹®¸Æ¿¡ Âü¿©ÇÏ´Â »ç°¢Çü ºí·°ÀÌ´Ù.
table-row (HTML¿¡¼­: TR)
¿¤·¹¸àÆ®°¡ ¼¿µéÀÇ ÁÙÀÓÀ» ÁöÁ¤ÇÑ´Ù.
table-row-group (HTML¿¡¼­: TBODY)
¿¤·¹¸àÆ® ±¸·ìµéÀÌ ÇϳªÀÌ»óÀÇ ÁÙÀÓÀ» ÁöÁ¤ÇÑ´Ù.
table-header-group (HTML¿¡¼­: THEAD)
'table-row-group'¿Í °°À¸³ª, º¸ÀÌ´Â ¾ç½ÄÈ­¿¡¼­, ÀÌ ÁÙ ±¸·ìÀº Ç×»ó, ¸ÇÀ§ Á¦¸ñ(caption)µé ´ÙÀ½¿¡, ¸ðµç ´Ù¸¥ ÁÙ°ú ÁÙµéÀÇ ±¸·ìµéº¸´Ù ¸ÕÀú µð½ºÇ÷¹À̵ȴÙ. Àμ⠻ç¿ëµµ±¸µéÀº ¸Ó¸´±Û(header) ÁÙµéÀ» Å×À̺íÀÌ ºÐ¸®µÈ °¢ ÆäÀÌÁö¿¡ ÀμâÇÒ ¼ö ÀÖ´Ù.
table-footer-group (HTML¿¡¼­: TFOOT)
'table-row-group'¿Í °°À¸³ª, º¸ÀÌ´Â ¾ç½ÄÈ­¿¡¼­, ÀÌ ÁÙ ±¸·ìÀº Ç×»ó, ¹Ù´Ú Á¦¸ñ(caption)µé ÀÌÀü¿¡, ¸ðµç ´Ù¸¥ ÁÙ°ú ÁÙµéÀÇ ±¸·ìµé ´ÙÀ½¿¡ µð½ºÇ÷¹À̵ȴÙ. Àμ⠻ç¿ëµµ±¸µéÀº ¹Ù´Ú±Û(footer) ÁÙµéÀ» Å×À̺íÀÌ ºÐ¸®µÈ °¢ ÆäÀÌÁö¿¡ ÀμâÇÒ ¼ö ÀÖ´Ù.
table-column (HTML¿¡¼­: COL)
¿¤·¹¸àÆ®°¡ ¼¿µéÀÇ Ä÷³ÀÓÀ» ÁöÁ¤ÇÑ´Ù.
table-column-group (HTML¿¡¼­: COLGROUP)
¿¤·¹¸àÆ® ±¸·ìµéÀÌ ÇϳªÀÌ»óÀÇ Ä÷³ ÀÓÀ» ÁöÁ¤ÇÑ´Ù.
table-cell (HTML¿¡¼­: TD, TH)
¿¤·¹¸àÆ®°¡ ¼¿µéÀÇ Å×ÀÌºí ¼¿ÀÓÀ» ÁöÁ¤ÇÑ´Ù.
table-caption (HTML¿¡¼­: CAPTION)
¿¤·¹¸àÆ®°¡ ¼¿µéÀÇ Å×À̺íÀÇ Á¦¸ñÀÓÀ» ÁöÁ¤ÇÑ´Ù.

'display'°¡ 'table-column' ¶Ç´Â 'table-column-group'À¸·Î ¼³Á¤µÈ ¿¤·¹¸àÆ®µéÀº Ç¥ÇöµÇÁö ¾Ê´Â´Ù('display: none'ÀÎ °Í°ú ²À °°ÀÌ). ±×·¯³ª ±×µéÀÌ ´ëÇ¥ÇÏ´Â Ä÷³µé¿¡ ¾î¶² ½ºÅ¸ÀÏ(style)À» Æ÷ÇÔÇÏ´Â ¾ÖÆ®¸®ºäÆ®(attribute)µéÀ» °¡Áú ¼ö ÀÖÀ¸¹Ç·Î À¯¿ëÇÏ´Ù.

ºÎ·ÏÀÇ HTML 4 ½ºÅ¸ÀϽ¬Æ®´Â HTML 4¿¡¼­ ÀÌ °ªµéÀÇ »ç¿ëÀ» ¼³¸íÇÑ´Ù:

TABLE { display: table }
TR { display: table-row }
THEAD { display: table-header-group }
TBODY { display: table-row-group }
TFOOT { display: table-footer-group }
COL { display: table-column }
COLGROUP { display: table-column-group }
TD, TH { display: table-cell }
CAPTION { display: table-caption }

Á¦ÀÛÀÚµéÀÌ ¿¤·¹¸àÆ®ÀÇ ¿¹»óµÇ´Â ÀÛ¿ëÀ» º¯°æÇÏ¸é ¾ÊµÇ±â ¶§¹®¿¡, »ç¿ëµµ±¸µéÀº HTML ¹®¼­¿¡¼­ À̵é 'display' ¼Ó¼º°ª ¹«½ÃÇÒ ¼ö ÀÖ´Ù.

17.2.1 °¡¸í(anonymous) Å×ÀÌºí °³Ã¼(object)

HTML ÀÌ¿ÜÀÇ ¹®¼­¾ð¾îµéÀº CSS2 Å×ÀÌºí ¸ðµ¨ÀÇ ¸ðµç ¿¤·¹¸àÆ®¸¦ Æ÷ÇÔÇÏÁö ¾ÊÀ» ¼ö ÀÖ´Ù. ÀÌ °æ¿ì, Å×ÀÌºí ¸ðµ¨ÀÌ ÀÛ¿ëÇϱâ À§ÇÏ¿© ´©¶ôµÈ ¿¤·¹¸àÆ®µéÀÌ °¡Á¤µÈ´Ù. ´©¶ôµÈ ¿¤·¹¸àÆ®µéÀº ´ÙÀ½ ±ÔÄ¢¿¡ µû¶ó °¡¸í(anonymous) °³Ã¼(object)µéÀ» »ý¼ºÇÑ´Ù(¿¹: º¸ÀÌ´Â Å×ÀÌºí ¹è¿­¿¡¼­ °¡¸í ¹Ú½ºµé):

  1. ¾î¶² Å×ÀÌºí ¿¤·¹¸àÆ®ÀÌ ÀÚµ¿ÀûÀ¸·Î ÇÊ¿äÇÑ ±× ÀÚü ÁÖÀ§ÀÇ °¡¸í Å×ÀÌºí °³Ã¼(object)µéÀ» »ý¼ºÇÑ´Ù ÃÖ¼Ò ¼¼°³, 'table'/'inline-table' ¿¤·¹¸àÆ®, 'table-row' ¿¤·¹¸àÆ®¿Í 'table-cell' ¿¤·¹¸àÆ®¿¡ ÇØ´çÇÏ´Â ³×½ºÆ®(nest)µÈ °³Ã¼(object)µé·Î ±¸¼ºµÈ´Ù.
  2. ¸¸ÀÏ ±× 'table-cell' ¿¤·¹¸àÆ® TÀÇ ¸ðü P°¡ 'table-row'°¡ ¾Æ´Ï¸é, 'table-row'¿¡ ÇØ´çÇÏ´Â °³Ã¼(object)°¡ P¿Í T»çÀÌ¿¡ »ý¼ºµÈ´Ù. ÀÌ °³Ã¼(object)´Â TÀÇ ¸ðµç ÈÄ¼Ó 'table-cell' ÇüÁ¦(sibling: ¹®¼­°èÅë¿¡¼­)µé¿¡ È®Àå È®ÀåµÈ´Ù.
  3. ¸¸ÀÏ 'table-row' ¿¤·¹¸àÆ® TÀÇ ¸ðü P°¡ 'table', 'inline-table', ¶Ç´Â 'table-row-group' ¿¤·¹¸àÆ®°¡ ¾Æ´Ï¸é, 'table' ¿¤·¹¸àÆ®¿¡ ÇØ´çÇÏ´Â °³Ã¼(object)°¡ P¿Í T»çÀÌ¿¡ »ý¼ºµÈ´Ù. ÀÌ °³Ã¼´Â 'table-row', 'table-row-group', 'table-header-group', 'table-footer-group', 'table-column', 'table-column-group', °ú 'caption' µî, 'table' ¸ðü¿¡ ÇÊ¿äÇÑ ¸ðµç ÈÄ¼Ó TÀÇ ÇüÁ¦(sibling: ¹®¼­°èÅë¿¡¼­)¿¡ È®ÀåµÈ´Ù.
  4. 'table-row-group'(¶Ç´Â 'table-header-group' ¶Ç´Â 'table-footer-group') ¿¤·¹¸àÆ® TÀÇ ¸ðü P°¡ 'table' ¶Ç´Â 'inline-table'ÀÌ ¾Æ´Ï¸é, 'table' ¿¤·¹¸àÆ®¿¡ ÇØ´çÇÏ´Â °³Ã¼°¡ P¿Í T»çÀÌ¿¡ »ý¼º È®ÀåµÈ´Ù. ÀÌ °³Ã¼(object)´Â, 'table-row', 'table-row-group', 'table-header-group', 'table-footer-group', 'table-column', 'table-column-group'°ú 'caption' µî, 'table' ¸ðü¿¡ ÇÊ¿äÇÑ ¸ðµç ÈÄ¼Ó TÀÇ ÇüÁ¦(sibling)¿¡ È®Àå È®ÀåµÈ´Ù.
  5. 'table-row' ¿¤·¹¸àÆ®ÀÇ P ÀÚ½Ä(child) T°¡ 'table-cell' ¿¤·¹¸àÆ®°¡ ¾Æ´Ï¸é, 'table-cell' ¿¤·¹¸àÆ®¿¡ ÇØ´çÇÏ´Â °³Ã¼°¡ P¿Í T»çÀÌ¿¡ »ý¼ºµÈ´Ù. ÀÌ °³Ã¼(object)´Â 'table-cell' ¿¤·¹¸àÆ®µéÀÌ ¾Æ´Ñ ¸ðµç ÈÄ¼Ó TÀÇ ÇüÁ¦µé¿¡ È®ÀåµÈ´Ù.

¿¹Á¦:

ÀÌ XML ¿¹Á¦¿¡¼­, 'table' ¿¤·¹¸àÆ®´Â HBOX ¿¤·¹¸àÆ®¸¦ °®´Â´Ù°í °¡Á¤ÇÑ´Ù:

<HBOX>
<VBOX>George</VBOX>
<VBOX>4287</VBOX>
<VBOX>1998</VBOX>
</HBOX>

¿¬°üµÈ ½ºÅ¸ÀϽ¬Æ®°¡ ¾Æ·¡¿Í °°À¸¹Ç·Î:

HBOX { display: table-row }
VBOX { display: table-cell }

¿¹Á¦:

ÀÌ ¿¹Á¦¿¡¼­, ¼¼°³ÀÇ 'table-cell' ¿¤·¹¸àÆ®µéÀÌ ROWµé ¾È¿¡ ÅؽºÆ®¸¦ °®´Â´Ù°í °¡Á¤ÇÑ´Ù. ÅؽºÆ®´Â, º¸ÀÌ´Â ¾ç½ÄÈ­ ¸ðµ¨¿¡¼­ ¼³¸íÇÑ ¹Ù¿Í °°ÀÌ, Ãß°¡ÀûÀ¸·Î °¡¸í(anonymous) ÀζóÀÎ ¹Ú½º(inline box)µé¿¡ ½ÎÀδٴ Á¡¿¡ À¯ÀÇÇ϶ó:

 <STACK>
<ROW>ÀÌ´Â ¸Ç À§ (<D> top </D>) ÁÙÀÌ´Ù.</ROW>
<ROW>ÀÌ´Â °¡¿îµ¥(<D>middle</D>) ÁÙÀÌ´Ù.</ROW>
<ROW>ÀÌ´Â ¸Ç¾Æ·¡(<D>bottom</D>) ÁÙÀÌ´Ù.</ROW>
</STACK>

±× ½ºÅ¸ÀϽ¬Æ®´Â:

STACK { display: inline-table }
ROW { display: table-row }
D { display: inline; font-weight: bolder }

HTML »ç¿ëµµ±¸µéÀº À§ ¸í·Éµé¿¡ µû¶ó °¡¸í(anonymous) °³Ã¼(object)µéÀ» »ý¼ºÇÒ ÇÊ¿ä°¡ ¾ø´Ù.

17.3 Ä÷³ ¼±ÅÃÀÚ(Column selector)

Å×ÀÌºí ¼¿µéÀº ÁÙ(row)µé°ú Ä÷³(column)µé µÎ°¡Áö ¹®¸Æ¿¡ ±Í¼ÓµÉ ¼ö ÀÖ´Ù. ±×·¯³ª, ¿ø¹®(source)¿¡¼­ ¼¿µéÀº Ä÷³ÀÌ ¾Æ´Ï¶ó ÁÙµéÀÇ ÇÏÀ§(descendant)µéÀÌ´Ù. ±×·³¿¡µµ ºÒ±¸ÇÏ°í, ¾î¶² °ßÁö¿¡¼­´Â Ä÷³µé¿¡ ¼Ó¼ºµéÀÌ ¼³Á¤µÊÀ¸·Î¼­ ¼¿µéÀÌ ¿µÇ⠹޴´Ù.

´ÙÀ½ ¼Ó¼ºµéÀº Ä÷³°ú Ä÷³ ±¸·ì ¿¤·¹¸àÆ®µé¿¡ Àû¿ëµÈ´Ù:

'border'
¿©·¯ Å׵θ® ¼Ó¼ºµéÀÌ Å×ÀÌºí ¿¤·¹¸àÆ®¿¡ 'border-collapse'°¡ 'collapse'·Î ¼³Á¤µÇ¾úÀ» ¶§ ¸¸ Ä÷³µé¿¡ Àû¿ëµÈ´Ù. ±× °æ¿ì, Ä÷³µé°ú Ä÷³ ±¸·ìµé¿¡ ¼³Á¤µÈ Å׵θ®µéÀÌ °¢ ¼¿ ¸ð¼­¸®¿¡ Å׵θ® ½ºÅ¸ÀÏÀ» ¼±ÅÃÇÏ´Â ÇØ»óµµ ¸¶Âû(conflict resolution) ±â´É¿¡ ÀԷµȴÙ.
'background'
¹è°æ ¼Ó¼ºµéÀº Ä÷³ ¾ÈÀÇ ¼¿µé¿¡ ¹è°æÀ» ¼³Á¤ÇÏÁö¸¸, ¼¿°ú ÁÙÀÌ µÑ ´Ù Åõ¸í ¹è°æµé °¡Áú ¶§ ¸¸ ÀÛ¿ëÇÑ´Ù. "Å×À̺í Ãþ(layer)°ú Åõ¸í¼º(transparency)"¸¦ ÂüÁ¶Ç϶ó.
'width'
'width' ¼Ó¼ºÀº Ä÷³ÀÇ ÃÖ¼Ò ³ÊºñÀ» ÁöÁ¤ÇÑ´Ù.
'visibility'
Ä÷³ÀÇ 'visibility'°¡ 'collapse'·Î ¼³Á¤µÇ¸é, ±× Ä÷³ÀÇ ¾Æ¹« ¼¿µµ Ç¥ÇöµÇÁö ¾Ê°í, ´Ù¸¥ Ä÷³µé·Î ħÀÔÇÑ ¼¿µéÀº Àß·ÁÁø´Ù. Ãß°¡ÀûÀ¸·Î, Å×À̺íÀÇ ³Êºñ´Â Ä÷³ÀÇ ³Êºñ·Î ÁÙ¾îµç´Ù. ¾Æ·¡ "ź·Â(Dynamic) È¿°úµé"À» ÂüÁ¶Ç϶ó. 'visibility'ÀÇ ´Ù¸¥ °ªµéÀº ¾Æ¹« È¿°úµµ ¾ø´Ù.

¿¹Á¦:

Ä÷³µéÀÇ ¼Ó¼ºµéÀ» ¼³Á¤ÇÏ´Â ½ºÅ¸ÀÏ ¸í·ÉµéÀÇ ÀϺΠ¿¹Á¦µé¸¦ º¸ÀÚ. ¾ÕÀÇ µÎ ¸í·ÉµéÀº °øÈ÷ HTML 4ÀÇ ¾ÖÆ®¸®ºäÆ®(attribute) "cols" °ªÀ» Àû¿ëÇÑ´Ù. ¼¼¹ø° ¸í·ÉÀº "totals" Ä÷³À» û»öÀ¸·Î ¸¸µé°í, ÃÖÁ¾ µÎ ¸í·ÉµéÀº °íÁ¤ ¹è¿­ ±â´ÉÀ» »ç¿ëÇÏ¿© ¾î¶»°Ô Ä÷³µéÀ» °íÁ¤ Å©±â¸¦ ¸¸µå´Â°¡¸¦ º¸¿©ÁØ´Ù.

COL { border-style: none solid }
TABLE { border-style: hidden }
COL.totals { background: blue }
TABLE { table-layout: fixed }
COL.totals { width: 5em }

17.4 º¸ÀÌ´Â ¾ç½ÄÈ­ ¸ðµ¨¿¡¼­ÀÇ Å×À̺í

¿ë¾î º¸ÀÌ´Â ¾ç½ÄÈ­ ¸ðµ¨¿¡¼­, Å×À̺íÀÌ ºí·°·¹º§(block-level) ¶Ç´Â ´ëüµÈ ÀζóÀÎ(inline-level) ¿¤·¹¸àÆ®¿Í °°ÀÌ ÀÛ¿ëÇÑ´Ù. Å×À̺íÀº ³»¿ë(content), Æеù(padding), Å׵θ®(border)¿Í ¸¶Áø(margin)µéÀ» °®´Â´Ù.

µÎ °æ¿ì ´Ù, Å×ÀÌºí ¿¤·¹¸àÆ®´Â Å×ÀÌºí ¹Ú½º ÀÚü¿Í Á¦¸ñ(caption)ÀÇ ¹Ú½º(ÀÖÀ¸¸é)¸¦ Æ÷ÇÔÇÏ´Â °¡¸í(anonymous) ¹Ú½º¸¦ »ý¼ºÇÑ´Ù. Å×À̺í°ú Á¦¸ñ ¹Ú½ºµéÀº ÀÚüÀÇ ³»¿ë, Æеù, ¸¶Áø°ú Å׵θ® Áö¿ªµéÀ» °¡Áö¸ç, »ç°¢Çü °¡¸í ¹Ú½ºÀÇ ±Ô°ÝÀº µÑ´Ù¸¦ Æ÷ÇÔÇϴµ¥ ÇÊ¿äÇÑ °¡Àå ÀÛÀº °ÍÀÌ µÈ´Ù. ¼öÁ÷ ¸¶ÁøµéÀÌ Å×À̺í°ú Á¦¸ñ ¹Ú½º°¡ ¸¸³ªµµ·Ï ÅëÇÕ(collapse)µÈ´Ù. Å×À̺íÀÇ ¾î¶² Àç ¹èÄ¡´Â, ±× Å×ÀÌºí ¹Ú½º ¸¸ÀÌ ¾Æ´Ï¶ó Àüü °¡¸í ¹Ú½º¸¦ ¿òÁ÷¿©¾ß ÇÏ°í, ÀÌ¿¡ µû¶ó Á¦¸ñµµ Å×À̺íÀ» µû¶ó °£´Ù.

À§¿¡ Á¦¸ñ(caption)À» °¡Áø Å×À̺í; µÑ ´Ù ¸¶Áø(margin)µéÀ» °¡Áö°í ÀÖÀ¸¸ç ¸¶ÁøµéÀº, ÀϹÝÀûÀÎ ¼öÁ÷ ¸¶Áøµé¿¡¼­¿Í °°ÀÌ, ±×µé»çÀÌ¿¡¼­ ÅëÇÕ(collapse)µÈ´Ù.   [D]

À§¿¡ Á¦¸ñÀ» °¡Áø Å×ÀÌºí µµÇ¥¿¡¼­ Á¦¸ñÀÇ ¹Ù´Ú ¸¶ÁøÀÌ Å×À̺íÀÇ ¸ÇÀ§ ¸¶Áø°ú ÅëÇյȴÙ.

17.4.1 Á¦¸ñ(Caption) À§Ä¡¿Í Á¤·Ä

'caption-side'
°ª:  top | bottom | left | right | inherit
ÃÖÃÊ°ª:  top
Àû¿ë:  'table-caption' ¿¤·¹¸àÆ®µé
Àü´Þ:  µÊ
¹éºÐÀ²:  »ç¿ë ¸øÇÔ
¸Þµð¾Æ:  visible(º¸ÀÌ´Â)

ÀÌ ¼Ó¼ºÀº Á¦¸ñ ¹Ú½ºÀÇ À§Ä¡¸¦ Å×ÀÌºí ¹Ú½º¿¡ »ó´ëÀûÀ¸·Î ÁöÁ¤ÇÑ´Ù. °ªµéÀº ´ÙÀ½ÀÇ Àǹ̸¦ °®´Â´Ù:

top(ˤ)
Å×ÀÌºí ¹Ú½º À§¿¡ Á¦¸ñ ¹Ú½º¸¦ À§Ä¡½ÃÅ´.
bottom(¾Æ·¡)
Å×ÀÌºí ¹Ú½º ¾Æ·¡¿¡ Á¦¸ñ ¹Ú½º¸¦ À§Ä¡½ÃÅ´.
left(¿ÞÂÊ)
Å×ÀÌºí ¹Ú½º ¿ÞÂÊ¿¡ Á¦¸ñ ¹Ú½º¸¦ À§Ä¡½ÃÅ´.
right(¿À¸¥ÂÊ)
Å×ÀÌºí ¹Ú½º ¿À¸¥ÂÊ¿¡ Á¦¸ñ ¹Ú½º¸¦ À§Ä¡½ÃÅ´.

´ÙÀ½ÀÇ »çÇ×À» Á¦¿ÜÇÏ°í´Â, Å×À̺íÀÇ ¾Õ ¶Ç´Â µÚÀÇ ºí·°(block) ¿¤·¹¸àÆ®ÀÎ °Íó·³, 'table' ¿¤·¹¸àÆ®ÀÇ À§ ¶Ç´Â ¾Æ·¡ Á¦¸ñµéÀÌ ¾ç½ÄÈ­µÈ´Ù.
(1) Å×À̺í·Î ºÎÅÍ Àü´ÞµÉ ¼ö ÀÖ´Â ¼Ó¼ºµéÀ» Àü´Þ(inherit) ¹Þ´Â °Í°ú,
(2) Å×ÀÌºí ¾Õ¿¡ ¿À´Â Ä¡¹Ð('compact') ¶Ç´Â ¼±Çà('run-in') ¿¤·¹¸àÆ®¸¦ À§ÇÑ ºí·° ¹Ú½º(block box)·Î °í·ÁµÇÁö´Â ¾Ê´Â´Ù.

Å×ÀÌºí ¹Ú½º À§ ¶Ç´Â ¾Æ·¡ÀÇ Á¦¸ñ(caption)Àº ¶ÇÇÑ ³Êºñ °è»ê¿¡¼­ ºí·° ¹Ú½º¿Í °°ÀÌ ÀÛ¿ëÇÏ¿©, ³Êºñ°¡ Å×ÀÌºí ¹Ú½ºÀÇ ¿ë±âºí·°(containing block) ³Êºñ¿¡ ´ëÇÏ¿© °è»êµÈ´Ù.

Å×ÀÌºí ¹Ú½ºÀÇ ¿ÞÂÊ ¶Ç´Â ¿À¸¥ÂÊ ¸é¿¡ ÀÖ´Â Á¦¸ñÀº, ÀÌ¿Í´Â ´Þ¸®, 'width'ÀÇ 'auto' ÀÌ¿ÜÀÇ °ªÀº ¸í½ÃÀûÀ¸·Î ³Êºñ¸¦ ¼³Á¤Çϳª, 'auto'´Â »ç¿ëµµ±¸¿¡°Ô ÇÕ¸®ÀûÀÎ ³Êºñ¸¦ ¼±ÅÃÇϵµ·Ï ¾Ë·ÁÁØ´Ù. ÀÌ´Â °¡Àå Á¼Àº °¡´ÉÇÑ ¹Ú½º¿¡¼­ ÇÑ ÁÙ·ÎµÈ °Í±îÁö ³Ð°Ô º¯ÇÒ ¼ö ÀÖ¾î, »ç¿ëÀÚµéÀÌ ¿ÞÂÊ°ú ¿À¸¥ÂÊ Á¦¸ñ ³Êºñµé¿¡ 'auto'¸¦ ¼³Á¤ÇÏÁö ¾ÊÀ» °ÍÀ» ÃßõÇÑ´Ù.

Á¦¸ñ ³»¿ëÀ» Á¦¸ñ ¹Ú½º ¾È¿¡ ¼öÆòÀûÀ¸·Î Á¤·ÄÇϱâ À§ÇÏ¿©, 'text-align' ¼Ó¼ºÀ» »ç¿ëÇÑ´Ù. Á¦¸ñ ¹Ú½º ¿ÞÂÊ ¶Ç´Â ¿À¸¥ÂÊ¿¡ ¼öÁ÷Á¤·ÄÀº Å×ÀÌºí ¹Ú½º¿¡ ´ëÇÏ¿© Çϸç, 'vertical-align' ¼Ó¼ºÀ» »ç¿ëÇÑ´Ù. ÀÌ ¶§ ÀǹÌÀÖ´Â °ªµéÀº 'top', 'middle'°ú 'bottom' »ÓÀÌ´Ù. ¸ðµç ´Ù¸¥ °ªµéÀº 'top'°ú °°ÀÌ Ã³¸®µÈ´Ù.

¿¹Á¦:

ÀÌ ¿¹Á¦¿¡¼­, 'caption-side' ¼Ó¼ºÀº Á¦¸ñ(caption)À» Å×ÀÌºí ¾Æ·¡¿¡ À§Ä¡½ÃŲ´Ù. ÀÌ Á¦¸ñÀº Å×ÀÌºí ¸ðüÀÇ ³Êºñ¿Í °°¾ÆÁö°í, Á¦¸ñ ÅؽºÆ®´Â ¿ÞÂÊ¿¡ Á¤·ÄµÈ´Ù.

CAPTION {
   caption-side: bottom;
   width: auto;
   text-align: left
}

¿¹Á¦:

´ÙÀ½ ¿¹Á¦´Â ¿ÞÂÊ ¸¶Áø(margin) ¾È¿¡ ¾î¶»°Ô Á¦¸ñÀ» ³Ö´Â°¡¸¦ ¼³¸íÇÑ´Ù. ¿ÞÂÊ°ú ¿À¸¥ÂÊ ¸¶ÁøµéÀ» 'auto'·Î ¼³Á¤ÇÏ¿© Å×À̺í ÀÚü°¡ Áß¾Ó¿¡ À§Ä¡µÇ¾î ÀÖ°í, Å×À̺í°ú Á¦¸ñÀ» °®´Â Àüü ¹Ú½º´Â Á¦¸ñÀÇ ³Êºñ¿Í °°Àº ¾ç ¸¸Å­ ¿ÞÂÊ ¸¶Áø ÂÊÀ¸·Î À̵¿µÈ´Ù.

BODY { margin-left: 8em }
TABLE {
   margin-left: auto;
   margin-right: auto
}
CAPTION {
   caption-side: left;
   margin-left: -8em;
   width: 8em;
   text-align: right;
   vertical-align: bottom
}

Å×À̺íÀÇ ³Êºñ°¡ À¯¿ëÇÑ°ª º¸´Ù ÀÛ´Ù´Â °¡Á¤ ÇÏ¿¡, ¾ç½ÄÈ­´Â ¾Æ·¡¿Í À¯»çÇÏ°Ô µÈ´Ù:

ÆäÀÌÁöÀÇ ¿ÞÂÊ ¸¶Áø(margin) ¾ÈÀ¸·Î Á¦¸ñÀÌ µé¾î °£ Áß¾Ó¿¡ À§Ä¡ÇÑ Å×ÀÌºí   [D]

Áß¾Ó¿¡ À§Ä¡ÇÑ Å×ÀÌºí¿¡¼­ À½¼ö 'margin-left' ¼Ó¼ºÀÇ °á°ú·Î ÆäÀÌÁöÀÇ ¿ÞÂÊ ¸¶Áø ¾ÈÀ¸·Î Á¦¸ñÀÌ È®ÀåµÈ °ÍÀ» ¼³¸íÇÏ´Â µµÇ¥.

17.5 Å×ÀÌºí ³»¿ëÀÇ º¸ÀÌ´Â ¹è¿­

¹®¼­¾ð¾îÀÇ ´Ù¸¥ ¿¤·¹¸àÆ®µéó·³, ³»ºÎ(internal) Å×ÀÌºí ¿¤·¹¸àÆ®µéÀº ³»¿ë, Æеù(padding)°ú Å׵θ®(border)µéÀ» °®´Â »ç°¢Çü ¹Ú½ºµéÀ» »ý¼ºÇÑ´Ù. ±×·¯³ª ¸¶ÁøÀ» °®Áö ¾Ê´Â´Ù.

ÀÌµé ¹Ú½ºµéÀÇ º¸ÀÌ´Â ¹è¿­Àº, ÀÏÁ¤ÇÏÁö ¾ÊÀº ÁÙ°ú Ä÷³µéÀÇ Æ²(grid)À» °®´Â »ç°¢Çü¿¡ ÀÇÇÏ¿© °áÁ¤µÈ´Ù. °¢ ¹Ú½º´Â ´ÙÀ½ ±ÔÄ¢¿¡ µû¶ó °áÁ¤µÇ¸ç Àüü Ʋ ¼¿µé¿¡ ÀÇÇÏ¿© ±¸¼ºµÈ´Ù. ÀÌ ±ÔÄ¢Àº HTML 4 ¶Ç´Â HTMLÀÇ ÀÌÀü ¹öÀü¿¡´Â Àû¿ëµÇÁö ¾Ê´Â´Ù; HTMLÀº ÀÚü¿¡¼­ ÁÙ°ú Ä÷³ ½ºÆÇ(span)À» Á¦ÇÑÇÑ´Ù.

  1. °¢ ÁÙ(row) ¹Ú½º´Â Ʋ(grid) ¼¿ÀÇ ÇÑ ÁÙÀ» Â÷ÁöÇÑ´Ù. ¶ÇÇÑ, ÁÙ ¹Ú½ºµéÀº Å×À̺íÀ» ¸ÇÀ§¿¡¼­ ¹Ù´ÚÀ¸·Î ¿ø¹®(source)¿¡ ÀÖ´Â ¼ø¼­´ë·Î ä¿î´Ù(¸»ÇÏÀÚ¸é Å×À̺íÀº ÁÙ ¿¤·¹¸àÆ®µéÀÇ °¹¼ö¿Í ²À °°Àº °¹¼öÀÇ Æ² ¼¿µéÀ» Â÷ÁöÇÑ´Ù.
  2. ÇÑ ÁÙ ±¸·ìÀº, ±×°¡ Æ÷ÇÔÇÑ ÁÙµé°ú, °°Àº Ʋ ÁÙµéÀ» Â÷ÁöÇÑ´Ù.
  3. Ä÷³ ¹Ú½º´Â ÇϳªÀÌ»óÀÇ Æ² ÁÙµéÀÇ Ä÷³µéÀ» Â÷ÁöÇÑ´Ù. Ä÷³ ¹Ú½ºµéÀº ±×°¡ ³ªÅ¸³ª´Â ¼ø¼­·Î ¼­·Î ¿·¿¡ À§Ä¡ÇÑ´Ù. ù¹ø° Ä÷³ ¹Ú½º´Â Å×À̺íÀÇ ¹æÇâ('direction') ¼Ó¼º°ª¿¡ µû¶ó ¿ÞÂÊ ¶Ç´Â ¿À¸¥ÂÊÀÌ µÉ ¼ö ÀÖ´Ù
  4. Ä÷³ ±×·ì ¹Ú½º´Â ±×°¡ Æ÷ÇÔÇÑ Ä÷³µé°ú °°Àº Ʋ ¼¿µéÀ» Â÷ÁöÇÑ´Ù.
  5. ¼¿µéÀº ¿©·¯ ÁÙ ¶Ç´Â Ä÷³µé·Î È®ÀåµÉ ¼ö ÀÖ´Ù.(CSS2 ¿¡´Â È®ÀåµÇ´Â ÁÙ°ú Ä÷³µéÀ» ¾î¶»°Ô °áÁ¤Çϴ°¡ Á¤ÀǵǾî ÀÖÁö ¾ÊÀ¸³ª, »ç¿ëµµ±¸´Â ¿ø¹®¿¡ ´ëÇÑ Æ¯¼öÇÑ Á¤º¸¸¦ °¡Áú ¼ö ÀÖ´Ù; CSSÀÇ ÇâÈÄ ¹öÀüÀº CSS ¹®¹ý¿¡¼­ ÀÌ Á¤º¸¸¦ Ç¥ÇöÇÏ´Â ¹æ¹ýÀÌ Á¦°øµÉ ¼ö ÀÖ´Ù). °¢ ¼¿Àº »ç°¢Çü ¹Ú½ºÀ̸ç ÇϳªÀÌ»óÀÇ Æ²(grid) ¼¿µéÀÇ ³Êºñ¿Í ³ôÀ̸¦ °®´Â´Ù. ³×¸ð²ÃÀÇ ¸ÇÀ§ ÁÙÀº ¼¿ ¸ðü¿¡ ÀÇÇÏ¿© ÁöÁ¤µÈ ÁÙÀÌ´Ù. ÀÌ ³×¸ð²ÃÀº °¡´ÉÇÑ ÇÑ ¿ÞÂÊ¿¡ ÀÖ¾î¾ß Çϳª ´Ù¸¥ ¼¿ ¹Ú½º¿Í Áߺ¹µÉ ¼ö ¾ø°í, °°Àº ÁÙ¿¡¼­ ¿ø¹®¿¡¼­ ¸ÕÀú ³ª¿Â ¸ðµç ¼¿µéÀÇ ¿À¸¥ÂÊ¿¡ ÀÖ¾î¾ß ÇÑ´Ù. (ÀÌ´Â Å×À̺íÀÇ ¹æÇâ('direction') ¼Ó¼ºÀÌ ¿ÞÂÊ¿¡¼­ ¿À¸¥ÂÊÀ¸·Î('ltr')À̸é Àû¿ëµÇ°í; ¸¸ÀÏ ¹æÇâ('direction') ÀÌ ¿À¸¥ÂÊ¿¡¼­ ¿ÞÂÊÀ¸·Î('rtl') À̸é, ¾ÕÀÇ ¹®Àå¿¡¼­ '¿ÞÂÊ'°ú '¿À¸¥ÂÊ'ÀÌ ¹Ù²ï´Ù.)
  6. ¼¿ ¹Ú½º°¡ Å×À̺íÀ̳ª ÁÙ±¸·ì(row-group) ¸¶Áö¸· ÁÙ ¹Ú½º µÚ·Î È®ÀåµÉ ¼ö ¾øÀ¸¸é, »ç¿ëµµ±¸µéÀº ±×°ÍÀÌ ¸ÂÀ» ¶§±îÁö ª°Ô ¸¸µé¾î¾ß ÇÑ´Ù.

ÁÖ¼®. Å×ÀÌºí ¼¿µéÀº »ó´ëÀûÀ¸·Î³ª Àý´ëÀûÀ¸·Î À§Ä¡µÉ ¼ö ÀÖÀ¸³ª, ÃßõµÇÁö ¾Ê´Â´Ù: À§Ä¡ ½ÃÅ´°ú À¯µ¿(floating)Àº È帧À¸·Î ºÎÅÍ ¹Ú½º¸¦ Á¦°ÅÇÏ°í Å×À̺íÀ» Á¤·ÄÇÑ´Ù.

¿©±â µÎ°³ÀÇ ¿¹Á¦µéÀÌ ÀÖ´Ù. ù¹ø°´Â HTML ¹®¼­¿¡¼­ ³ªÅ¸³ª´Â °ÍÀ¸·Î °¡Á¤ÇÑ´Ù:

<TABLE>
   <TR>
      <TD>1
      <TD rowspan="2">2
      <TD>3
      <TD>4
   <TR>
      <TD colspan="2">5
</TABLE>
<TABLE>
   <ROW>
      <CELL>1
      <CELL rowspan="2">2
      <CELL>3
      <CELL>4
   <ROW>
      <CELL colspan="2">5
</TABLE>

µÎ¹ø° Å×À̺íÀº ¿À¸¥ÂÊ µµÇ¥¿¡ ¾ç½ÄÈ­µÇ¾úÀ¸³ª, HTML Å×À̺íÀÇ Ç¥ÇöÀÌ HTML¿¡ ÀÇÇÏ¿© ¸í½ÃÀûÀ¸·Î µÇÁö ¾Ê¾Ò°í, CSS´Â À̸¦ Á¤ÀÇÇϱâ À§ÇÑ ½Ãµµ¸¦ ÇÏÁö ¾Ê¾Ò´Ù. »ç¿ëµµ±¸µéÀº À̸¦ Ç¥ÇöÇϴµ¥ ÀÚÀ¯·Ó´Ù. ¿¹: µµÇ¥¿¡¼­ ¿ÞÂÊ°ú °°ÀÌ.

¼¿µéÀÌ Áߺ¹µÈ Å×À̺í°ú ±×·¸Áö ¾ÊÀº Å×ÀÌºí   [D]

¿ÞÂÊÀº, HTML 4 Å×ÀÌºí¿¡¼­ ¿À·ù·Î °¡´ÉÇÑ Ç¥ÇöÀÌ°í
¿À¸¥ÂÊÀº, À¯»çÇÑ ºñ HTML Å×À̺í·Î À¯ÀÏÇÏ°Ô °¡´ÉÇÑ ¾ç½ÄÈ­.

17.5.1 Å×À̺í Ãþ(layer)°ú Åõ¸í¼º(transparency)

°¢ Å×ÀÌºí ¼¿ÀÇ ¹è°æÀ» ã±â À§ÇÑ ¸ñÀûÀ¸·Î, ´Ù¸¥ ÅÂÀÌºí ¿¤·¹¸àÆ®µéÀÌ ¿©¼¸°³ÀÇ ÃþµéÀ» °®°í ÀÖ´Ù°í »ý°¢ÇÏÀÚ. À̵é ÃþµéÀÇ ÇϳªÀÇ ¿¤·¹¸àÆ®¿¡ ¼³Á¤µÈ ¹è°æÀº ±× À§ÀÇ ÃþµéÀÌ Åõ¸íÇÑ ¹è°æÀ» °¡Áú ¶§ ¸¸ º¸ÀÏ ¼ö ÀÖ´Ù.

Å×À̺í Ãþ(layer) µµÇ¥   [D]

Å×À̺í Ãþ(layer) µµÇ¥

.
  1. °¡Àå ³·Àº ÃþÀº Å×ÀÌºí ¹Ú½º ÀÚü¸¦ ³ªÅ¸³»´Â ´ÜÀÏ ÃþÀÌ´Ù. ¸ðµç ¹Ú½ºµéó·³, ÀÌ´Â Åõ¸íÇÒ ¼ö ÀÖ´Ù.

  2. ´ÙÀ½ ÃþÀº Ä÷³ ±¸·ìµéÀ» Æ÷ÇÔÇÏ°í ÀÖ´Ù. Ä÷³ ±¸·ìµéÀÇ ³ôÀÌ´Â Å×ÀÌºí¿¡¼­¿Í °°ÀÌ ³ôÀ¸³ª, Àüü¸¦ Å×À̺íÀ» ¼öÆòÀûÀ¸·Î ´Ù Ä¿¹öÇÒ ÇÊ¿ä´Â ¾ø´Ù.

  3. Ä÷³ ±¸·ìµé À§¿¡ Ä÷³ ¹Ú½ºµéÀ» ´ëÇ¥ÇÏ´Â Áö¿ªÀÌ ÀÖ´Ù. Ä÷³ ±¸·ì°ú ¸¶Âù°¡Áö·Î Ä÷³µéÀÇ ³ôÀÌ´Â Å×ÀÌºí¿¡¼­¿Í °°ÀÌ ³ôÀ¸³ª, Àüü¸¦ Å×À̺íÀ» ¼öÆòÀûÀ¸·Î ´Ù Ä¿¹öÇÒ ÇÊ¿ä´Â ¾ø´Ù

  4. ´ÙÀ½ ÃþÀº ÁÙ ±¸·ìµéÀ» Æ÷ÇÔÇÏ°í ÀÖ´Ù. °¢ ÁÙ ±¸·ìµéÀÇ ³ôÀÌ´Â Å×ÀÌºí¿¡¼­¿Í °°ÀÌ ³Ð°í, ¶ÇÇÑ ÁÙ ±¸·ìµéÀº Àüü¸¦ Å×À̺íÀÇ ¸Ç À§¿¡¼­ ¸Ç ¹Ù´Ú±îÁö ¿ÏÀüÈ÷ Ä¿¹öÇÑ´Ù.

  5. ¸¶Áö¸· Ãþ ´ÙÀ½¿¡ ÁÙµéÀ» Æ÷ÇÔÇÑ´Ù. Áٵ鵵 Àüü Å×À̺íÀ» Ä¿¹öÇÑ´Ù.

  6. °¡Àå ³ôÀº Ãþ¿¡´Â ¼¿µé ÀÚü¸¦ Æ÷ÇÔÇÑ´Ù. ÀÌ µµÇ¥¿¡¼­ ¼³¸íÇÏ´Â ¹Ù¿Í °°ÀÌ, ¸ðµç ÁÙµéÀÌ °°Àº °¹¼öÀÇ ¼¿µéÀ» Æ÷ÇÔÇÏ°í ÀÖÁö ¸¸, °¢ ¼¿µéÀº ƯÁ¤ÇÑ ³»¿ëÀ» °¡Áö°í ÀÖÁö ¾ÊÀ» ¼ö ÀÖ´Ù. ÀÌµé ºó("empty") ¼¿µéÀº Åõ¸íÇÏ¿© ¾Æ·¡ ÃþµéÀÇ ºñÃĺ¸ÀδÙ.

´ÙÀ½ ¿¹Á¦¿¡¼­, ù¹ø° ÁÙÀº ³×°³ÀÇ ¼¿(cell)µéÀ» °®°í ÀÖÀ¸³ª, µÎ¹ø° ÁÙÀº ¼¿ÀÌ Çϳªµµ ¾ø¾î¼­, ù¹ø° ÁÙÀÌ È®Àå(span)µÈ ÁÙÀÇ ¼¿À» Á¦¿ÜÇÏ°í´Â, Å×ÀÌºí ¹è°æÀÌ ±×´ë·Î ºñÃÄ º¸ÀδÙ. ´ÙÀ½ HTML ÄÚµå¿Í ½ºÅ¸ÀÏ ¸í·ÉÀº

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<HTML>
   <HEAD>
      <STYLE type="text/css">
         TABLE { background: #ff0; border-collapse: collapse }
         TD { background: red; border: double black }
      </STYLE>
   </HEAD>
   <BODY>
      <P>
      <TABLE>
         <TR>
            <TD> 1
            <TD rowspan="2"> 2
            <TD> 3
            <TD> 4
         </TR>
         <TR>
            <TD>
            </TD>
         </TR>
      </TABLE>
   </BODY>
</HTML>

ÀÌ´Â ´ÙÀ½°ú °°ÀÌ ¾ç½ÄÈ­µÈ´Ù:

¹Ù´Ú ÁÙ¿¡ ¼¼°³ÀÇ ºó ¼¿ÀÌ ÀÖ´Â Å×ÀÌºí   [D]

¹Ù´Ú ÁÙ¿¡ ¼¼°³ÀÇ ºó ¼¿ÀÌ ÀÖ´Â Å×À̺í.

17.5.2 Å×ÀÌºí ³Êºñ ±â´É: 'table-layout' ¼Ó¼º

´ëºÎºÐÀÇ °æ¿ì ÃÖÀûÀº ¼±È£ÀÇ ¹®Á¦À̱⠶§¹®¿¡, CSS´Â Å×À̺íÀÇ ÃÖÀû("optimal") ¹è¿­À» Á¤ÀÇÇÏÁö ¾Ê¾Ò´Ù. CSS´Â »ç¿ëµµ±¸µéÀÌ Å×À̺íÀ» ¹èÄ¡Çϴµ¥ µû¶ó¾ß ÇÒ Á¦ÇÑÀ» Á¤ÀÇÇÏ¿´´Ù. »ç¿ëµµ±¸µéÀº ±×°¡ ¿øÇÏ´Â ¾î¶² ±â´Éµµ »ç¿ëÇÒ ¼ö ÀÖÀ¸¸ç, "°íÁ¤ ¹è¿­ ±â´É"ÀÌ ¼±ÅÃµÈ °æ¿ì¸¦ Á¦¿ÜÇÏ°í´Â, Á¤¹Ð¼ºº¸´Ù Ç¥Çö ¼Óµµ¸¦ ¼±È£ÇÒ ÀÚÀ¯°¡ ÀÖ´Ù.

'table-layout'
°ª:  auto | fixed | inherit
ÃÖÃÊ°ª:  auto
Àû¿ë:  'table'°ú 'inline-table' ¿¤·¹¸àÆ®µé
Àü´Þ:  ¾ÈµÊ
¹éºÐÀ²:  »ç¿ë ¸øÇÔ
¸Þµð¾Æ:  visible(º¸ÀÌ´Â)

'table-layout' ¼Ó¼ºÀº Å×ÀÌºí ¼¿(cell), ÁÙ(row), Ä÷³(column)µéÀÇ ¹èÄ¡¿¡ »ç¿ëµÇ´Â ±â´ÉÀ» Á¦¾îÇÑ´Ù. °ªµéÀº ´ÙÀ½ Àǹ̸¦ °®´Â´Ù:

fixed(°íÁ¤ )
°íÁ¤ Å×À̺í(table) ¹è¿­ ±â´ÉÀ» »ç¿ëÇÑ´Ù
auto(ÀÚµ¿)
ÀÚµ¿ Å×ÀÌºí ¹è¿­ ±â´ÉÀ» »ç¿ëÇÑ´Ù

ÀÌ µÎ ±â´ÉµéÀº ¾Æ·¡¿¡¼­ ¼³¸íÇÑ´Ù.

°íÁ¤ Å×À̺í(table) ¹è¿­

ÀÌ ºü¸¥ ±â´ÉÀ¸·Î, Å×À̺íÀÇ ¼öÆò ¹è¿­Àº ¼¿µéÀÇ ³»¿ë(content)µé µû¶ó º¯ÇÏÁö ¾Ê´Â´Ù ; ÀÌ´Â ´ÜÁö Å×À̺íÀÇ ³Êºñ, Ä÷³ÀÇ ³Êºñ, Å׵θ® ¶Ç´Â ¼¿ ½ºÅ×À̽̿¡ µû¶ó ´Þ¶óÁø´Ù.

Å×À̺íÀÇ ³Êºñ´Â 'width' ¼Ó¼ºÀ¸·Î ¸í½ÃÀûÀ¸·Î ÁöÁ¤µÉ ¼ö ÀÖ´Ù. 'display: table'°ú 'display: inline-table'ÀÇ °ª 'auto'´Â ÀÚµ¿ Å×ÀÌºí ¹è¿­ ±â´ÉÀÇ »ç¿ëÀ» ÀǹÌÇÑ´Ù.

°íÁ¤ Å×À̺í(table) ¹è¿­ ±â´É¿¡¼­, °¢ Ä÷³ÀÇ ³Êºñ´Â ´ÙÀ½°ú °°ÀÌ °áÁ¤µÈ´Ù:

  1. Ä÷³ ¿¤·¹¸àÆ®ÀÇ °ªÀÌ 'width' ¼Ó¼º¿¡¼­ 'auto'°¡ ¾Æ´Ï¸é, ±× Ä÷³ÀÇ ³Êºñ¸¦ ¼³Á¤ÇÑ´Ù.
  2. ±×·¸Áö ¾ÊÀ¸¸é, ù¹ø° ÁÙ ¼¿ °ªÀÌ 'width' ¼Ó¼º¿¡¼­ 'auto'°¡ ¾Æ´Ï¸é, ±× Ä÷³ÀÇ ³Êºñ¸¦ ¼³Á¤ÇÑ´Ù. ¸¸ÀÏ ¼¿ÀÌ ÇϳªÀÌ»óÀÇ Ä÷³À¸·Î È®ÀåµÇ¾úÀ¸¸é, ±× ³Êºñ¸¦ Ä÷³µé¿¡ ³ª´©¾î ÁØ´Ù.
  3. ³ª¸ÓÁö Ä÷³µéÀº(Å׵θ® ¶Ç´Â ¼¿ ½ºÆäÀ̽ÌÀ» »©°í) ³ª¸ÓÁö ¼öÆò Å×ÀÌºí °ø°£¿¡ µ¿µîÇÏ°Ô ³ª´µ¾î Áø´Ù.

Å×À̺íÀÇ ³Êºñ´Â ±× ÈÄ Å×ÀÌºí ¿¤·¹¸àÆ® 'width' ¼Ó¼º¿¡¼­ Å« °ªÀ» °®°í, Ä÷³ ³ÊºñµéÀ» ÇÕ(¼¿ ½ºÆäÀÌ½Ì ¶Ç´Â Å׵θ®µéÀ» ´õÇÏ¿©)ÇÑ´Ù. Å×À̺íÀÌ Ä÷³µéº¸´Ù ³ÐÀ¸¸é, ¿©À¯ °ø°£Àº Ä÷³µé¿¡ ¹èºÐµÈ´Ù.

ÀÌ ¹æ¹ýÀ¸·Î, »ç¿ëµµ±¸´Â, ù ÁÙÀ» ¿ÏÀüÈ÷ ¹ÞÀ¸¸é, Å×ÀÌºí ¹èÄ¡¸¦ ½ÃÀÛÇÒ ¼ö ÀÖ´Ù. ÈÄ¼Ó ÁÙµé ¾ÈÀÇ ¼¿µéÀº Ä÷³ ³Êºñµé¿¡ ¿µÇâÀ» ÁÖÁö ¾Ê´Â´Ù. ¾î¶² ¼¿ÀÇ ³»¿ëÀÌ ³ÑóÈ帣(overflow)¸é, 'overflow' ¼Ó¼ºÀ» »ç¿ëÇÏ¿© ³ÑóÈ帧 ³»¿ëÀ» À߶ó¹ö¸± °ÍÀΰ¡¸¦ °áÁ¤ÇÑ´Ù.

ÀÚµ¿ Å×À̺í(table) ¹è¿­

ÀϹÝÀûÀ¸·Î ÃÖ¼Ò µÎ ´Ü°è¸¦ °®´Â ÀÌ ±â´ÉÀ¸·Î, Ä÷³µéÀÇ ³Êºñ¿¡ ÀÇÇÏ¿©, Å׵θ®µéÀ» °¨¾ÈÇÏ¿©, Å×À̺íÀÇ ³Êºñ°¡ ÁÖ¾îÁø´Ù. ÀÌ ±â´ÉÀº ÀÌ ±Ô°ÝÀ» ¾µ ´ç½Ã ¸¹ÀÌ »ç¿ëµÇ´Â ¿©·¯ HTML »ç¿ëµµ±¸µéÀÇ ±â´ÉÀ» ¹Ý¿µÇÏ°í ÀÖ´Ù. »ç¿ëµµ±¸µéÀº Å×ÀÌºí ¹è¿­À» °áÁ¤Çϴµ¥, 'table-layout'ÀÌ 'auto'ÀÌ¸é ´Ù¸¥ ±â´ÉÀ» »ç¿ëÇÒ ¼ö ÀÖ¾î, ÀÌ ±â´ÉÀÇ Àû¿ëÀÌ ¿ä±¸µÇÁö´Â ¾Ê´Â´Ù

ÀÌ ±â´ÉÀº, »ç¿ëµµ±¸°¡ ÃÖÁ¾ ¹è¿­ °áÁ¤ ÀÌÀü¿¡ Å×À̺íÀÇ ¸ðµç ³»¿ë¿¡ Á¢¼ÓÇÒ ÇÊ¿ä°¡ ÀÖ°í, ÇϳªÀÌ»óÀÇ °æ·Î°¡ ¿ä±¸µÉ ¼ö ÀÖÀ¸¹Ç·Î, ºÒÃæºÐÇÒ ¼ö ÀÖ´Ù.

Ä÷³ ³ÊºñµéÀº ´ÙÀ½°ú °°ÀÌ °áÁ¤µÈ´Ù:

  1. °¢ ¼¿ÀÇ ÃÖ¼Ò ³»¿ë ³Êºñ(minimum content width) °è»ê: ¾ç½ÄÈ­µÈ ³»¿ëÀº ¿©·¯ Áٵ鿡 È®Àå(span)µÉ ¼ö ÀÖÀ¸³ª, ¼¿ ¹Ú½º¸¦ ³ÑóÈ帣Áö(overflow) ¾Ê´Â´Ù. ¸¸ÀÏ ¼¿ÀÇ ÁöÁ¤µÈ 'width'(W: ³Êºñ)°¡ ÃÖ¼Ò ³»¿ë ³Êºñº¸´Ù Å©¸é, W´Â ÃÖ¼Ò ¼¿ ³Êºñ°¡ µÈ´Ù. ÀÌ °ªÀÌ 'auto'À̸é ÃÖ¼Ò ³»¿ë ³Êºñ°¡ ÃÖ¼Ò ¼¿ ³Êºñ ÀÓÀ» ÀǹÌÇÑ´Ù.

    °¢ ¼¿ÀÇ ÃÖ´ë("maximum") ¼¿ ³ÊºñÀÇ °è»êµµ: ¸í½ÃÀûÀÎ ÁٹٲÞÀÌ ¾ø´Â ÇÑ ³»¿ëÀÌ ÁÙ¹Ù²Þ ¾øÀÌ ¾ç½ÄÈ­µÈ´Ù.

  2. °¢ Ä÷³Àº ±× Ä÷³¿¡ ¸¸ È®ÀåµÈ ¼¿µé·ÎºÎÅÍÀÇ ÃÖ´ë¿Í ÃÖ¼Ò Ä÷³ ³Êºñ·Î °áÁ¤µÈ´Ù. ÃÖ¼Ò´Â °¡Àå Å« ÃÖ¼Ò ¼¿ ³Êºñ(¶Ç´Â Ä÷³ 'width' Áß Å«°Í)¸¦ °¡Áø ¼¿¿¡ ÀÇÇÏ¿© ÇÊ¿äÇÑ ³ÊºñÀÌ´Ù. ÃÖ´ë´Â °¡Àå Å« ÃÖ´ë ¼¿ ³Êºñ(¶Ç´Â Ä÷³ 'width' Áß Å«°Í)¸¦ °¡Áø ¼¿¿¡ ÀÇÇÏ¿© ÇÊ¿äÇÑ ³ÊºñÀÌ´Ù.
  3. ÇϳªÀÌ»ó Ä÷³¿¡ È®ÀåµÈ °¢ ¼¿Àº, Ä÷³µéÀÇ ÃÖ¼Ò ³Êºñ¸¦ ±× ¼¿ ³Êºñ ÀÌ»óÀ¸·Î µÇµµ·Ï Áõ°¡½ÃÄÑ È®ÀåµÇ°Ô ÇÑ´Ù. ÃÖ´ë ³Êºñ¿¡¼­µµ °°Àº ½ÄÀÌ µÈ´Ù. °¡´ÉÇÑÇÏ¸é ¸ðµç È®ÀåµÈ Ä÷³µéÀ» ´ë·« °°Àº Á¤µµ·Î ³ÐÈù´Ù.

ÀÌ´Â °¢ Ä÷³ÀÇ ÃÖ´ë¿Í ÃÖ¼Ò ³Êºñ¸¦ Á¦°øÇÑ´Ù. Ä÷³ ³ÊºñµéÀº ÃÖÁ¾ Å×ÀÌºí ³Êºñ¿¡ ´ÙÀ½°ú °°Àº ¿µÇâÀ» ÁØ´Ù:

  1. ¸¸ÀÏ 'table' ¶Ç´Â 'inline-table' ¿¤·¹¸àÆ®ÀÇ 'width' ¼Ó¼ºÀÌ 'auto' ÀÌ¿ÜÀÇ ÁöÁ¤µÈ °ª(W)À» °¡Áö¸é, ±× ¼Ó¼ºÀÇ °è»êµÈ °ªÀº W°ú ¸ðµç Ä÷³µéÀÇ ÃÖ¼Ò ³Êºñ¿Í ¼¿ ½ºÆäÀÌ½Ì ¶Ç´Â Å׵θ®µé(MIN)¿¡ ÀÇÇÏ¿© ÇÊ¿äÇÑ ±æÀ̸¦ ´õÇÑ °Íº¸´Ù Å©´Ù. ¸¸ÀÏ W °¡ MINº¸´Ù Å©¸é, ¿©À¯ ³Êºñ´Â Ä÷³µé¿¡ ¹èºÐµÇ¾î¾ß ÇÑ´Ù.
  2. ¸¸ÀÏ 'table' ¶Ç´Â 'inline-table' ¿¤·¹¸àÆ®°¡ 'width: auto'¸¦ °¡Áö°í ÀÖÀ¸¸é, °è»êµÈ Å×ÀÌºí ³Êºñ´Â Å×À̺íÀÇ ¿ë±âºí·°(containing block) ³Êºñ¿Í MINº¸´Ù Å©´Ù. ±×·¯³ª, ¸¸ÀÏ Ä÷³µé ´õÇϱ⠼¿ ½ºÆäÀÌ½Ì ¶Ç´Â Å׵θ®µéÀ» À§ÇÏ¿© ÇÊ¿äÇÑ ÃÖ´ë ³Êºñ(MAX)°¡ ±× ¿ë±âºí·°º¸´Ù ÀÛÀ¸¸é MAX¸¦ »ç¿ëÇÑ´Ù.

¹éºÐÀ² °ª Ä÷³ ³Êºñ´Â Å×ÀÌºí ³Êºñ¿¡ »ó´ëÀûÀÌ´Ù. ¸¸ÀÏ Å×À̺íÀÌ 'width: auto'¸¦ °¡Áö¸é, ¹éºÐÀ²Àº Ä÷³ÀÇ ³ÊºñÀÇ ÇÑ°èÀ» ³ªÅ¸³»¸ç, ½Ã¿ëµµ±¸´Â À̸¦ ¸¸Á·½ÃÅ°µµ·Ï ½ÃµµÇÏ¿©¾ß ÇÑ´Ù.(¸í¹éÈ÷, ÀÌ´Â Ç×»ó °¡´ÉÇÑ °ÍÀÌ ¾Æ´Ï´Ù: ¸¸ÀÏ Ä÷³ÀÇ ³Êºñ°¡ '110%'À̸é, ±× ÇÑ°è´Â ¸¸Á·µÉ ¼ö ¾ø´Ù.)

ÁÖ¼®. ÀÌ ±â´É¿¡¼­, ÁÙµé(°ú ÁÙ ±¸·ìµé)°ú Ä÷³µé(°ú Ä÷³ ±¸·ìµé)Àº ¸ðµÎ ±×µé¸¦ Æ÷ÇÔÇÏ´Â ¼¿µéÀÇ Å©±â¿¡ Á¦ÇÑÀ» ÁÖ¸ç ¶ÇÇÑ ±×µé¿¡ ÀÇÇÏ¿© Á¦ÇÑÀ» ¹Þ´Â´Ù. Ä÷³ÀÇ ³ÊºñÀÇ ¼³Á¤Àº ÁÙ ³ôÀÌ¿¡ °£Á¢ÀûÀ¸·Î ¿µÇâÀ» ÁÙ ¼ö ÀÖÀ¸¸ç, ¾Æ¿ï·¯ ³ôÀÌÀÇ ¼³Á¤µµ ³Êºñ¿¡ ¿µÇâÀ» ÁÙ ¼ö ÀÖ´Ù.

17.5.3 Å×À̺í(table) ³ôÀÌ ±â´É

Å×À̺íÀÇ ³ôÀÌ´Â 'table' ¶Ç´Â 'inline-table' ¿¤·¹¸àÆ®ÀÇ 'height' ¼Ó¼ºÀ¸·Î ÁÖ¾îÁø´Ù. °ª 'auto'´Â ³ôÀÌ°¡ ÁÙ ³ôÀÌµé ´õÇϱ⠼¿ ½ºÆäÀÌ½Ì ¶Ç´Â Å׵θ®µéÀÇ ÇÕ°è ÀÓÀ» ÀǹÌÇÑ´Ù. ´Ù¸¥ °ªÀº ³ôÀ̸¦ ¸í½ÃÀûÀ¸·Î ÁöÁ¤ÇÑ´Ù; µû¶ó¼­ Å×À̺íÀº ±× ÁÙµéÀÇ ³ôÀ̺¸´Ù ´õ Å°°¡ Å©°Å³ª ÀÛÀ» ¼ö ÀÖ´Ù. CSS2´Â ÁöÁ¤µÈ Å×ÀÌºí ³ôÀÌ°¡ ³»¿ë ³ôÀÌ(content height)¿Í ´Ù¸¦ ¶§ÀÇ Ç¥Çö, ±¸Ã¼ÀûÀ¸·Î ³»¿ë ³ôÀÌ°¡ ÁöÁ¤µÈ ³ôÀ̸¦ µ¤¾î¾º¿ö¾ßÇϴ°¡¸¦, ÁöÁ¤ÇÏÁö ¾Ê¾Ò´Ù; ¸¸ÀÏ ±×·¸Áö ¾ÊÀ¸¸é, ¾î¶»°Ô ¿©À¯ÀÇ °ø°£À», ÁöÁ¤µÈ Å×ÀÌºí ³ôÀ̺¸´Ù ÀÛÀº °Í¿¡ Ãß°¡ÇÏ¿©, ÁÙµé»çÀÌ¿¡ ¹èºÐÇÏ¿©¾ß Çϴ°¡; ¶Ç´Â, ¸¸ÀÏ ³»¿ë ³ôÀÌ°¡ ÁöÁ¤µÈ Å×ÀÌºí ³ôÀ̸¦ ÃÊ°úÇϸé, ±× »ç¿ëµµ±¸°¡ È­¸é±¼¸²(scroll) ±â´ÉÀ» Á¦°øÇÏ¿©¾ß Çϴ°¡ µî. ÁÖ¼®. CSS ÇâÈÄ ¹ö¹øµé¿¡¼­´Â À̸¦ Ãß°¡·Î Á¤ÀÇÇÒ ¼ö ÀÖ´Ù.

»ç¿ëµµ±¸°¡ ÁÙ¿¡ ÀÖ´Â ¸ðµç ¼¿µéÀ» °¡Áø ÈÄ, 'table-row' ¿¤·¹¸àÆ®ÀÇ ¹Ú½ºÀÇ ³ôÀÌ°¡ °è»êµÈ´Ù: ÀÌ´Â ÁÙÀÇ ÁöÁ¤µÈ ÃÖ´ë 'height'¿Í ¼¿µé¿¡ ÀÇÇØ ÇÊ¿äÇÑ ÃÖ¼Ò ³ôÀÌ(MIN)´Ù. 'table-row'ÀÇ 'height' °ªÀÌ 'auto'ÀÌ¸é °è»êµÈ ÁÙ ³ôÀÌ´Â MIN ÀÓÀ» ÀǹÌÇÑ´Ù. MIN´Â ¼¿ ¹Ú½º ³ôÀ̵é°ú ¼¿ ¹Ú½º Á¤·Ä(¶óÀÎ ¹Ú½º ³ôÀÌ °è»ê°ú ¸¶Âù°¡Áö·Î)¿¡ µû¶ó ´Þ¶óÁø´Ù. CSS2´Â Å×À̺í ÁÙ°ú ÁÙ ±¸·ìµé¿¡ ÁöÁ¤µÈ 'height' ÂüÁ¶ÀÇ ¹éºÐÀ² °ªµéÀ» Á¤ÀÇÇÏÁö ¾Ê¾Ò´Ù.

CSS2¿¡¼­ ¼¿ ¹Ú½ºÀÇ ³ôÀÌ´Â Å×ÀÌºí ¼¿ÀÇ 'height' ¼Ó¼ºÀÇ ÃÖ´ë¿Í ³»¿ë¿¡ ÇÊ¿äÇÑ ÃÖ¼Ò ³ôÀÌ(MIN). 'height'ÀÇ °ª 'auto'´Â MINÀÇ °è»êµÈ °ªÀ» ÀǹÌÇÑ´Ù. CSS2´Â Å×ÀÌºí ¼¿µé¿¡ ÁöÁ¤µÇ¾úÀ» ¶§ 'height' ÂüÁ¶ÀÇ ¹éºÐÀ² °ªµéÀÌ ¹«¾ùÀΰ¡¸¦ Á¤ÀÇÇÏÁö ¾Ê¾Ò´Ù.

CSS2´Â, °ü·Ã ÁÙ ³ôÀ̵éÀÇ ÇÕ°è´Â ÁÙµéÀÇ ¼¿ È®ÀåÀ» Æ÷ÇÔÇϱ⿡ ÃæºÐÈ÷ Ä¿¾ßÇÑ´Ù´Â °Í ÀÌ¿Ü¿¡´Â, ÇÑ ÁÙ ÀÌ»ó¿¡ È®Àå(span)µÈ ¼¿µéÀÌ ÁÙ ³ôÀÌ °è»ê¿¡ ¾î¶»°Ô ¿µÇâÀ» ¹ÌÄ¡´Â°¡¸¦ Á¤ÀÇÇÏÁö ¾Ê¾Ò´Ù.

°¢ Å×ÀÌºí ¼¿ÀÇ 'vertical-align' ¼Ó¼ºÀº ÁÙ ¾È¿¡¼­ Á¤·ÄÀ» °áÁ¤ÇÑ´Ù. °¢ ¼¿ÀÇ ³»¿ëÀº ÁÙ ÀÚü¿Í ¸¶Âù°¡Áö·Î ±âÃʼ±, ¸ÇÀ§, °¡¿îµ¥, ±×¸®°í ¹Ù´ÚÀ» °¡Áø´Ù. Å×À̺íµéÀÇ ¹®¸Æ¿¡¼­, 'vertical-align' °ªµéÀº ´ÙÀ½ Àǹ̸¦ °®´Â´Ù:

baseline(±âÃʼ±)
¼¿ÀÇ ±âÃʼ±Àº È®Àå(span) ÇÑ ÁÙµéÀÇ Ã¹¹ø° ±âÃʼ±°ú °°Àº ³ôÀÌ·Î ¹èÄ¡ÇÑ´Ù(¾Æ·¡ ¼¿µé°ú ÁÙµéÀÇ ±âÃʼ± Á¤ÀǸ¦ ÂüÁ¶Ç϶ó).
top(¸ÇÀ§)
¼¿ ¹Ú½ºÀÇ ¸ÇÀ§°¡ È®ÀåÇÑ ÁÙµéÀÇ Ã¹¹ø° ¸ÇÀ§¿¡ Á¤·ÄµÈ´Ù.
bottom(¹Ù´Ú)
¼¿ ¹Ú½ºÀÇ ¹Ù´ÚÀÌ È®ÀåÇÑ ÁÙµéÀÇ ¸¶Áö¸· ÁÙ ¹Ù´Ú¿¡ Á¤·ÄµÈ´Ù.
middle(Áß¾Ó)
¼¿ ¹Ú½ºÀÇ Áß¾ÓÀÌ È®ÀåÇÑ ÁÙµéÀÇ Áß¾Ó¿¡ Á¤·ÄµÈ´Ù.
sub, super, text-top, text-bottom(¾Æ·¡Ã·ÀÚ, À§Ã·ÀÚ, ÅؽºÆ® À§, ÅؽºÆ® ¾Æ·¡)
ÀÌ °ªµéÀº ¼¿µé¿¡ Àû¿ëµÇÁö ¾Ê°í, ¼¿Àº ´ë½Å ±âÃʼ±¿¡ Á¤·ÄÇÑ´Ù.

¼¿ÀÇ ±âÃʼ±Àº ¼¿ ¾ÈÀÇ Ã¹¹ø° ¶óÀÎ ¹Ú½º(line box) ±âÃʼ±ÀÌ´Ù. ¸¸ÀÏ ÅؽºÆ®°¡ ¾øÀ¸¸é, ±× ±âÃʼ±Àº ¾î¶² Á¾·ùµç ¼¿ ¾È¿¡ µð½ºÇ÷¹À̵Ǵ °³Ã¼(object)ÀÇ ±âÃʼ±ÀÌ°í, ¸¸ÀÏ °³Ã¼°¡ ¾øÀ¸¸é ¼¿ ¹Ú½ºÀÇ ¹Ù´ÚÀÌ´Ù. ¼¿ ¹Ú½º ¸ÇÀ§¿Í 'vertical-align: baseline'À» °®°íÀÖ´Â ¸ðµç ¼¿µé À§ÀÇ ±âÃʼ±°úÀÇ ÃÖ´ë °Å¸®´Â ÁÙÀÇ ±âÃʼ± ¼³Á¤¿¡ »ç¿ëµÈ´Ù. ¿¹Á¦:

¼öÁ÷ÀûÀ¸·Î Á¤·ÄµÈ ¼¿µéÀÇ ¿¹Á¦   [D]

Å×ÀÌºí ¼¿¿¡¼­ 'vertical-align'ÀÇ
¿©·¯ °ªµéÀÇ È¿°ú¸¦ ¼³¸íÇÏ´Â µµÇ¥.

¼¿ ¹Ú½º(box)µé 1°ú 2´Â ±×µéÀÇ ±âÃʼ±¿¡ Á¤·ÄµÇ¾ú´Ù. ¼¿ ¹Ú½º 2´Â ±âÃʼ± À§¿¡ °¡Àå ³ôÀº ³ôÀ̸¦ °®°í ÀÖ¾î, ÁÙÀÇ ±âÃʼ±À» °áÁ¤ÇÑ´Ù. ¸¸ÀÏ ÀÌ ±âÃʼ±¿¡ Á¤·ÄµÈ ¼¿ ¹Ú½º°¡ ¾ø´Ù¸é, ±× ÁÙÀº ±âÃʼ±À» ÇÊ¿ä·Î ÇÏÁö ¾Ê°í °¡ÁöÁö ¾ÊÀ» °ÍÀÓ¿¡ À¯ÀÇÇ϶ó.

¸ðÈ£ÇÑ »óȲÀ» ÇÇÇϱâ À§ÇÏ¿©, ¼¿µéÀÇ Á¤·ÄÀº ´ÙÀ½ ¼ø¼­¿¡ µû¸¥´Ù:

  1. Á¦ÀÏ ¸ÕÀú ±×µéÀÇ ±âÃʼ±¿¡ Á¤·ÄµÇ´Â ¼¿µéÀÌ ¹èÄ¡µÈ´Ù. ÀÌ´Â ±× ÁÙÀÇ ±âÃʼ±À» Çü¼ºÇÑ´Ù. ´ÙÀ½ 'vertical-align: top'À» °®´Â ¼¿µéÀÌ ¹èÄ¡µÈ´Ù.
  2. ±× ÁÙÀº ÀÌÁ¦ ±âÃʼ±ÀÌ °¡´ÉÇÑ ¸ÇÀ§, Áö±Ý±îÁö ¹èÄ¡µÈ ¼¿µéÀÇ ¸ÇÀ§¿¡¼­ ¸Ç ¾Æ·¡ ¹Ù´Ú±îÁöÀÇ °Å¸® ÀÎ Á¦°øµÈ ³ôÀ̸¦ °®´Â´Ù.(¾Æ·¡ ¼¿ Æеù Á¶°Ç ÂüÁ¶)
  3. ¸¸ÀÏ ³ª¸ÓÁö ¼¿µéÀÌ ÀÖÀ¸¸é, À̵éÀº ¹Ù´Ú ¶Ç´Â Áß¾Ó¿¡ Á¤·ÄµÇ°í, ÁÙÀÇ ÇöÀçÀÇ ³ôÀ̺¸´Ù Å« ³ôÀ̸¦ °¡Áö°í ÀÖÀ¸¸é, ÁÙÀÇ ³ôÀÌ´Â ¹Ù´ÚÀ» ³·Ãß¾î ÀÌ ¼¿µéÀÇ ÃÖ´ë·Î Áõ°¡µÈ´Ù.
  4. ÃÖÁ¾ÀûÀ¸·Î ³ª¸ÓÁö ¼¿µéÀÌ À§Ä¡µÈ´Ù.

ÁÙÀÇ ³ôÀ̺¸´Ù ÀÛÀº ¼¿ ¹Ú½º´Â Ãß°¡ÀûÀÎ ¸ÇÀ§ ¶Ç´Â ¹Ù´Ú Æеù(padding)À» ¹Þ´Â´Ù.

17.5.4 Ä÷³¿¡¼­ÀÇ ¼öÆòÁ¤·Ä

¼¿ ¹Ú½º ¾È¿¡¼­ ¼¿ÀÇ ³»¿ëÀÇ ¼öÆò Á¤·ÄÀº 'text-align' ¼Ó¼ºÀ¸·Î ÁöÁ¤µÈ´Ù.

Ä÷³ÀÇ ÇϳªÀÌ»ó ¼¿¿¡ 'text-align' ¼Ó¼ºÀÌ <¹®ÀÚ¿­> °ªÀ¸·Î ¼³Á¤µÇ¸é, ÀÌ ¼¿µéÀÇ ³»¿ëÀº ¼öÁ÷Àû ÃàÀ» µû¶ó Á¤·ÄµÈ´Ù. ¹®ÀÚ¿­ÀÇ ½ÃÀÛÀº ÀÌ Ãà¿¡ Á¢Ã˵ȴÙ. ±ÛÀÚ¹æÇ⼺ÀÌ ¹®ÀÚ¿­ÀÌ ÃàÀÇ ¿ÞÂÊ ¶Ç´Â ¿À¸¥ÂÊÀ¸·Î °¡´Â°¡¸¦ °áÁ¤ÇÑ´Ù.

ÀÌ ¹æ½ÄÀÇ ÅؽºÆ® Á¤·ÄÀº ÅؽºÆ®°¡ ÇÑ ÁÙ¿¡ ÀÖÀ» ¶§ ¸¸ À¯È¿ÇÏ´Ù. ¼¿ ³»¿ëÀÌ ÇϳªÀÌ»óÀÇ ÁÙ¿¡ È®Àå(span) µÇ¾úÀ¸¸é °á°ú´Â Á¤ÀǵǾî ÀÖÁö ¾Ê´Ù.

Å×ÀÌºí ¼¿ 'text-align' °ªÀÌ ¹®ÀÚ¿­À̳ª ±× ¹®ÀÚ¿­ÀÌ ¼¿ ³»¿ë(content) ¾È¿¡ ÀÖÁö ¾ÊÀ¸¸é, ¼¿ÀÇ ³»¿ëÀÇ ³¡ÀÌ Á¤·ÄÀÇ ¼öÁ÷ Ãà¿¡ Á¢ÃËÇÑ´Ù.

ÀϹÝÀûÀ¸·Î´Â °°Áö ¸¸ ¹®ÀÚ¿­ÀÌ °¢ ¼¿¿¡¼­ °°¾Æ¾ß ÇÏ´Â °ÍÀº ¾Æ´Ï¶ó´Â Á¡¿¡ À¯ÀÇÇ϶ó.

CSS´Â Ä÷³ ¹Ú½º ¸ð¼­¸®¿¡ ´ëÇÑ ¼öÁ÷Á¤·Ä ÃàÀÇ ¿ÀÇÁ¼¼Æ®(offset) ÁöÁ¤ ¹æ½ÄÀ» Á¦°øÇÏÁö ¾Ê´Â´Ù.

¿¹Á¦:

´ÙÀ½ ½ºÅ¸ÀϽ¬Æ®:

TD { text-align: "." }
TD:before { content: "$" }

´ÙÀ½ HTML Å×ÀÌºí¿¡¼­ ÀÌ´Â Ä÷³¿¡ ´Þ¶ó Ç¥½Ã("$")¸¦ ÇÑ´Ù:

<TABLE>
<COL width="40">
<TR> <TH>Àå°Å¸® ÀüÈ­</TH></TR>
<TR> <TD>1.30</TD></TR>
<TR> <TD>2.50</TD></TR>
<TR> <TD>10.80</TD></TR>
<TR> <TD>111.01</TD></TR>
<TR> <TD>85.</TD></TR>
<TR> <TD>90</TD></TR>
<TR> <TD>.05</TD></TR>
<TR> <TD>.06</TD></TR>
</TABLE>

Á¡('.')À» ¸ÂÃß¾î Á¤·ÄÇÏ°í °¢ ¼öÄ¡ ¾ÕÀÇ ´Þ¶ó Ç¥½Ã("$")¿¡ :before °¡»ó ¿¤·¹¸àÆ®(pseudo-element)¸¦ »ç¿ëÇÏ¿´´Ù.
ÀÌ Å×À̺íÀº ´ÙÀ½°ú °°ÀÌ Ç¥ÇöµÈ´Ù:

 Àå°Å¸® ÀüÈ­
    $1.30
    $2.50
  $10.80
 $111.01
  $85.
  $90
     $.05
     $.06

17.5.5 ÁÙ°ú Ä÷³ÀÇ Åº·Â(dynamic) È¿°ú

'visibility' ¼Ó¼ºÀº ÁÙ, ÁÙ ±¸·ì(row group), Ä÷³, Ä÷³ ±¸·ì(column group) ¿¤·¹¸àÆ®µé¿¡ °ª 'collapse'(ÅëÇÕ)¸¦ °®´Â´Ù. ÀÌ °ªÀº Àüü ÁÙ ¶Ç´Â Ä÷³À» µð½ºÇ÷¹ÀÌ¿¡¼­ Á¦¿Ü½Ãų °ÍÀÌ°í, ÀϹÝÀûÀ¸·Î Â÷ÁöÇÏ´Â °ø°£À»ÀÌ ´Ù¸¥ ³»¿ë¿¡ »ç¿ëÇϵµ·Ï ÁÙ ¶Ç´Â Ä÷³¿¡ ÀÇÇÏ¿© Â÷ÁöÇÏ°Ô µÈ´Ù. ±×·¯³ª,ÀÌ ÁÙ ¶Ç´Â Ä÷³ÀÇ ¾ïÁ¦´Â Å×ÀÌºí ¹è¿­¿¡ ´Ù¸£°Ô´Â ¿µÇâÀ» ÁÖÁö ¾Ê´Â´Ù. ÀÌ´Â Å×À̺í Àç¹è¿­À» ÇÏÁö ¾ÊÀ¸¸é¼­, Ä÷³ ÇÑ°è ¾È¿¡¼­ °¡´ÉÇÑ º¯È­¸¦ À§ÇÏ¿©, Å×À̺í ÁÙµé ¶Ç´Â Ä÷³µéÀ» Á¦°ÅÇϴ ź·Â È¿°úµéÀ» Çã¿ëÇÑ´Ù.

17.6 Å׵θ®(border)

CSS¿¡¼­ Å×ÀÌºí ¼¿µé¿¡ Å׵θ®µéÀ» ¼³Á¤ÇÏ´Â µÎ°¡Áö ±¸º°µÇ´Â ¸ðµ¨µéÀÌ ÀÖ´Ù. Çϳª´Â °³º° ¼¿µé ÁÖÀ§ÀÇ ºÐ¸®µÈ Å׵θ®(separated border)µé·Î ºÒ¸®¿ì´Â °Í¿¡ °¡Àå ÀûÀýÇÑ °ÍÀÌ°í, ´Ù¸¥ Çϳª´Â Å×À̺íÀÇ ÇÑ ³¡¿¡¼­ ´Ù¸¥ ³¡±îÁöÀÇ ¿¬¼Ó ¾ç½Ä Å׵θ®µéÀÌ Àû´çÇÏ´Ù. ¸¹Àº Å׵θ® ½ºÅ¸ÀϵéÀº ÀÌ µÎ ¸ðµ¨µé·Î ºÎÅÍ ¸¸µé¾î Áú ¼ö Àִµ¥, ÀÌ´Â ÀÚÁÖ »ç¿ëÀÇ ¼±È£ ¹®Á¦°¡ µÈ´Ù.

'border-collapse'
°ª:  collapse | separate | inherit
ÃÖÃÊ°ª:  collapse
Àû¿ë:  'table'°ú 'inline-table' ¿¤·¹¸àÆ®µé
Àü´Þ:  µÊ
¹éºÐÀ²:  »ç¿ë ¸øÇÔ
¸Þµð¾Æ:  visible(º¸ÀÌ´Â)

ÀÌ ¼Ó¼ºÀº Å×À̺íÀÇ Å׵θ® ¸ðµ¨À» ¼±ÅÃÇÑ´Ù. °ª 'separate'´Â ºÐ¸®µÈ Å׵θ®µéÀÇ Å׵θ® ¸ðµ¨À» ¼±ÅÃÇÑ´Ù. °ª 'collapse'´Â ÅëÇÕ(collapsing) Å׵θ®µé ¸ðµ¨À» ¼±ÅÃÇÑ´Ù. ¸ðµ¨µéÀº ¾Æ·¡ ¼³¸íµÇ¾î ÀÖ´Ù.

17.6.1 ºÐ¸®µÈ Å׵θ®(separated border) ¸ðµ¨

'border-spacing'
°ª:  <±æÀÌ> <±æÀÌ>? | inherit
ÃÖÃÊ°ª:  0
Àû¿ë:  'table'°ú 'inline-table' ¿¤·¹¸àÆ®µé
Àü´Þ:  µÊ
¹éºÐÀ²:  »ç¿ë ¸øÇÔ
¸Þµð¾Æ:  visible(º¸ÀÌ´Â)

±æÀÌ(length)µéÀº ºÐ¸®ÇÏ´Â ÀÎÁ¢ ¼¿ Å׵θ®(border)µéÀÇ °Å¸®¸¦ ÁöÁ¤ÇÑ´Ù. ¸¸ÀÏ ÇÑ ±æÀÌ°¡ ÁöÁ¤µÇ¸é, ÀÌ´Â ¼öÆò°ú ¼öÁ÷Àû ½ºÆäÀ̽ÌÀ» ´Ù ÁöÁ¤ÇÑ °ÍÀÌ´Ù. ¸¸ÀÏ µÎ°³°¡ ÁöÁ¤µÇ¸é, ù¹ø°´Â ¼öÆò ½ºÆäÀ̽Ì, µÎ¹ø°´Â ¼öÁ÷ ½ºÆäÀ̽ÌÀ» ÁöÁ¤ÇÑ´Ù. ±æÀ̵éÀº À½¼ö°¡ µÉ ¼ö ¾ø´Ù.

ÀÌ ¸ðµ¨¿¡¼­, °¢ ¼¿Àº °³º° Å׵θ®¸¦ °®´Â´Ù. 'border-spacing' ¼Ó¼ºÀº ÀÎÁ¢ ¼¿µéÀÇ Å׵θ®µé»çÀÌÀÇ °Å¸®¸¦ ÁöÁ¤ÇÑ´Ù. ÀÌ °ø°£Àº Å×ÀÌºí ¿¤·¹¸àÆ®ÀÇ ¹è°æÀ¸·Î ä¿öÁø´Ù. ÁÙµé, Ä÷³µé, ÁÙ ±¸·ì(row group)µé, Ä÷³ ±¸·ì(column group)µéÀº Å׵θ®µéÀ» °¡Áú ¼ö ¾ø´Ù. ¸»ÇÏÀÚ¸é, »ç¿ëµµ±¸µéÀº ÀÌ ¿¤·¹¸àÆ®µéÀÇ Å׵θ® ¼Ó¼ºµéÀ» ¹«½ÃÇÏ¿©¾ß ÇÑ´Ù.

¿¹Á¦:

¾Æ·¡ µµÇ¥¿¡ ÀÖ´Â Å×À̺íÀº ÀÌ ½ºÅ¸ÀϽ¬Æ®ÀÇ °á°ú°¡ µÈ´Ù:

TABLE {
   border: outset 10pt;
   border-collapse: separate;
   border-spacing: 15pt
}
TD { border: inset 5pt }
TD.special { border: inset 10pt }  /* À§-¿ÞÂÊ ¼¿ */
border-spacingÀ» °®´Â Å×ÀÌºí   [D]

'border-spacing'À¸·Î ±æÀÌ °ªÀ» ¼³Á¤ÇÑ Å×À̺í.
°¢ ¼¿Àº ÀÚ½ÅÀÇ Å׵θ®¸¦ °¡Áö°í ÀÖ°í, ÀÌ Å×À̺íÀº
ºÐ¸®µÈ Å׵θ®µµ °¡Áö°í ÀÖ½¿¿¡ À¯ÀÇÇ϶ó.

ºó ¼¿ ÁÖÀ§ÀÇ Å׵θ®(border): 'empty-cells' ¼Ó¼º

'empty-cells'
°ª:  show | hide | inherit
ÃÖÃÊ°ª:  show
Àû¿ë:  'table-cell' ¿¤·¹¸àÆ®µé
Àü´Þ:  µÊ
¹éºÐÀ²:  »ç¿ë ¸øÇÔ
¸Þµð¾Æ:  visible(º¸ÀÌ´Â)

ºÐ¸®µÈ(separated) Å׵θ® ¸ðµ¨¿¡¼­, ÀÌ ¼Ó¼ºÀº º¸ÀÌ´Â ³»¿ë(content)À» °¡Áö°í ÀÖÁö ¾Ê´Â ¼¿µé ÁÖÀ§ÀÇ Å׵θ®µé Ç¥ÇöÀ» Á¦¾îÇÑ´Ù. ºó ¼¿µé°ú º¸ÀÓ¼º('visibility') ¼Ó¼ºÀÌ 'hidden'À¸·Î ¼³Á¤µÈ ¼¿µéÀº º¸ÀÌ´Â ³»¿ëÀ» °¡Áö°í ÀÖÁö ¾Ê´Â °ÍÀ¸·Î °í·ÁµÈ´Ù. º¸ÀÌ´Â ³»¿ëÀº, ASCIIÀÇ ¿£ÅÍ(CR: "\0D"), ÁÙ °ø±Þ(LF: "\0A"), ÅÇ(tab: "\09"), °ø°£ ("\20")À» Á¦¿ÜÇÏ°í, "&nbsp;"°ú ´Ù¸¥ °ø¹éÀ» Æ÷ÇÔÇÑ´Ù.

ÀÌ ¼Ó¼ºÀÌ °ª 'show'¸¦ °¡Áö¸é, Å׵θ®µéÀº Á¤»ó ¼¿µé¿¡¼­ ó·³ ºó ¼¿µé ÁÖÀ§¿¡ ±×·ÁÁø´Ù.

°ª 'hide'´Â ºó ¼¿µé ÁÖÀ§¿¡ Å׵θ®°¡ ¾ø´Â °ÍÀ» ÀǹÌÇÑ´Ù. ¶Ç, ¸¸ÀÏ ÇÑ ÁÙÀÇ ¸ðµç ¼¿µéÀÌ °ª 'hide'¸¦ °¡Áö°í º¸ÀÌ´Â ³»¿ëÀÌ ¾øÀ¸¸é, ±× Àüü ÁÙÀº 'display: none' ó·³ Ç¥ÇöµÈ´Ù.

¿¹Á¦:

´ÙÀ½ ¸í·ÉÀº Å׵θ®µéÀ» ¸ðµç ¼¿µé ÁÖÀ§¿¡ ±×¸°´Ù:

TABLE { empty-cells: show }

17.6.2 ÅëÇÕ(collapsing) Å׵θ® ¸ðµ¨

ÅëÇÕ Å׵θ® ¸ðµ¨¿¡¼­, ¼¿, ÁÙ, ÁÙ ±¸·ì(row group), Ä÷³, Ä÷³ ±¸·ì(column group)ÀÇ ÀüºÎ ȤÀº ºÎºÐ ÁÖÀ§¿¡ Å׵θ®µé¸¦ ÁöÁ¤ÇÏ´Â °ÍÀÌ °¡´ÉÇÏ´Ù. HTMLÀÇ "rule" ¾ÖÆ®¸®ºäÆ®(attribute)¿¡¼­ Å׵θ®µéÀº ÀÌ ¹æ½ÄÀ¸·Î ÁöÁ¤µÉ ¼öÀÖ´Ù.

Å׵θ®µéÀº ¼¿µé»çÀÌÀÇ Æ²(grid) °¡¿îµ¥ À§Ä¡ÇÑ´Ù. »ç¿ëµµ±¸µéÀº ½ºÅ©¸° Çȼ¿µé, ÇÁ¸°ÅÍ Á¡µé(dot)µîÀÇ ´ÜÀ§µéÀÇ Á¶°¢À» ¹Ý¿Ã¸²(round)Çϴµ¥ ÀÏ°üµÈ ±ÔÄ¢À» ã¾Æ¾ß ÇÑ´Ù.

¾Æ·¡ µµÇ¥´Â ¾î¶»°Ô Å×ÀÌºí ³Êºñ, Å׵θ®µéÀÇ ³Êºñ, Æеù(padding)°ú ¼¿ ³Êºñ°¡ ÀÛ¿ëÇϴ°¡¸¦ ¼³¸íÇÑ´Ù. ±×µéÀÇ °ü°è´Â Å×À̺íÀÇ °¢ ÁÙÀ» À§ÇÏ¿© ´ÙÀ½ °ø½ÄÀ¸·Î ÁÖ¾îÁ³´Ù:

row-width = (0.5 * border-width0) + padding-left1 + width1 + padding-right1 + border-width1 + padding-left2 +...+ padding-rightn + (0.5 * border-widthn)

¿©±â¼­ n´Â ±× ÁÙ(row)¿¡¼­ ¼¿µéÀÇ °¹¼öÀÌ°í, border-widthi´Â ¼¿µé i¿Í i + 1»çÀÌÀÇ Å׵θ®¸¦ ÂüÁ¶ÇÑ´Ù. µÎ ¿ÜºÎ(exterior) Å׵θ®µéÀÇ ¹Ý ¸¸ÀÌ Å×ÀÌºí ³Êºñ·Î °è»êµÇ°í, ´Ù¸¥ ÀÌµé µÎ Å׵θ®µéÀÇ ¹ÝÀº ¸¶Áø(margin) Áö¿ª¿¡ µé¾î°£´Ù´Â °Í¿¡ À¯ÀÇÇ϶ó.

¼¿µéÀÇ ³Êºñ¿Í Å׵θ®(border)µé°ú ¼¿µéÀÇ ÆеùÀ» ¼³¸íÇÏ´Â µµÇ¥   [D]

¼¿µéÀÇ ³Êºñ¿Í Å׵θ®(border)µé°ú ¼¿µéÀÇ ÆеùÀ» ¼³¸íÇÏ´Â µµÇ¥.

ÀÌ ¸ðµ¨¿¡¼­, Å×À̺íÀÇ ³Êºñ´Â Å×À̺í Å׵θ®ÀÇ ¹ÝÀ» Æ÷ÇÔ ÇÔ¿¡ À¯ÀÇÇ϶ó. ¶ÇÇÑ, ÀÌ ¸ðµ¨¿¡¼­, Å×À̺íÀº ¸¶ÁøµéÀ» °¡Áö°í ÀÖÀ¸³ª ÆеùÀ» °¡Áö°í ÀÖÁö ¾Ê´Ù.

Å׵θ®ÀÇ ÇØ»óµµ ¸¶Âû(conflict resolution)

ÅëÇÕ(collapsing) Å׵θ® ¸ðµ¨¿¡¼­, °¢ ¼¿ÀÇ °¢ ¸ð¼­¸®¿¡ ÀÖ´Â Å׵θ®µéÀº ¸ð¼­¸®(¼¿µé, ÁÙµé, ÁÙ ±¸·ì(row group)µé, Ä÷³µé, Ä÷³ ±¸·ì(column group)µé, Å×À̺í ÀÚü)¿¡ ¸¸³ª´Â ¿©·¯ ¿¤·¹¸àÆ®µé¿¡¼­ Å׵θ®(border) ¼Ó¼ºµé¿¡ ÀÇÇÏ¿© ÁöÁ¤µÉ ¼ö ÀÖ°í, À̵é Å׵θ®µéÀº ³Êºñ, ½ºÅ¸ÀÏ, »ö»ó¿¡¼­ ¼­·Î ´Ù¸¦ ¼ö ÀÖ´Ù. ¾î¶² 'hidden' ½ºÅ¸ÀÏÀ» ¸¸³ª¸é Å׵θ®´Â ¹«Á¶°Ç °¨ÃçÁö´Â °ÍÀ» Á¦¿ÜÇÏ°í´Â, ´ë·«, °¢ ¸ð¼­¸®¿¡ °¡Àå "´«¿¡ ¶ç´Â" Å׵θ® ½ºÅ¸ÀÏÀÌ ¼±ÅõȴÙ.

´ÙÀ½ ±ÔÄ¢Àº ¸¶ÂûÀÌ ÀÖÀ» ¶§ ¾î¶² Å׵θ® ½ºÅ¸ÀÏÀÌ ÀÛ¿ëµÇ´Â°¡¸¦ °áÁ¤ÇÑ´Ù.

  1. 'border-style'°¡ 'hidden'ÀÎ Å׵θ®µéÀÌ ¸ðµç ´Ù¸¥ ¸¶Âû Å׵θ®µé¿¡ ¿ì¼±ÇÑ´Ù. ÀÌ °ªÀ» °®´Â Å׵θ®´Â ±× À§Ä¡¿¡¼­ ¸ðµç Å׵θ®µéÀ» ¾ïÁ¦ÇÑ´Ù.
  2. ½ºÅ¸ÀÏÀÌ 'none' ÀÎ Å׵θ®µéÀÌ °¡Àå ³·Àº ¿ì¼±¼øÀ§¸¦ °®´Â´Ù. ¸ðµç ¿¤·¹¸àÆ®µéÀÇ Å׵θ® ¼Ó¼ºµéÀÌ ÀÌ 'none' ¸ð¼­¸®¿¡¼­ ¸¸³ª´Â °æ¿ì¿¡ ¸¸ Å׵θ®°¡ »ý·«µÉ ¼ö ÀÖ´Ù(±×·¯³ª 'none'ÀÌ ±× Å׵θ® ½ºÅ¸ÀÏÀÇ µðÆúÆ® °ª ÀÓ¿¡ À¯ÀÇÇ϶ó.)
  3. ¸¸ÀÏ ½ºÅ¸ÀÏÀÌ 'hidden'ÀÎ °ÍÀÌ ¾ø°í ÇϳªÀÌ»óÀÌ 'none'ÀÌ ¾Æ´Ï¸é, ¾ãÀº Å׵θ®°¡ ³ÐÀº Å׵θ®µé¸¦ À§ÇØ ¾ø¾îÁø´Ù. ¸¸ÀÏ ¿©·¯°³°¡ °°Àº 'border-width'¸¦ °¡Áö¸é ½ºÅ¸ÀϵéÀº ´ÙÀ½ÀÇ ¼ø¼­·Î ¼±È£µÈ´Ù: 'double', 'solid', 'dashed', 'dotted', 'ridge', 'outset', 'groove', ±×¸®°í °¡Àå ³·°Ô: 'inset'.
  4. ¸¸ÀÏ Å׵θ® ½ºÅ¸ÀϵéÀÌ »ö»ó ¸¸ ´Ù¸£¸é, ¼¿¿¡ ¼³Á¤µÈ °ÍÀÌ ¿¡ ¼³Á¤µÈ °Íº¸´Ù ¿ì¼±ÇÏ°í, ÁÙ¿¡ ¼³Á¤µÈ °ÍÀÌ ÁÙ ±¸·ì(row group)¿¡ ¼³Á¤µÈ °Íº¸´Ù ¿ì¼±Çϸç, Ä÷³, Ä÷³ ±¸·ì(column group) ¼ø¼­·Î Àû¿ëÇÏ¿© Å×À̺íÀÇ °ÍÀÌ °¡Àå ³ªÁß¿¡ Àû¿ëµÈ´Ù.

¿¹Á¦:

´ÙÀ½ ¿¹Á¦´Â À̵éÀÇ ¿ì¼±¼øÀ§ ±ÔÄ¢ÀÇ Àû¿ëÀ» ¼³¸íÇÑ´Ù. ÀÌ ½ºÅ¸ÀϽ¬Æ®:

TABLE { border-collapse: collapse; border: 5px solid yellow; }
*#col1 { border: 3px solid black; }
TD { border: 1px solid red; padding: 1em; }
TD.solid-blue { border: 5px dashed blue; }
TD.solid-green { border: 5px solid green; }

ÀÌ HTML ÀÚ¿øÀº:

<P>
<TABLE>
   <COL id="col1"> <COL id="col2">  <COL id="col3">
   <TR id="row1">
     <TD>1<TD>2<TD>3
   </TR>
   <TR id="row2">
       <TD>4<TD class="solid-blue">5<TD class="solid-green">6
   </TR>
   <TR id="row3">
      <TD>7<TD> 8<TD>9
   </TR>
   <TR id="row4">
      <TD>10<TD> 11<TD>12
   </TR>
   <TR id="row5">
     <TD>13<TD> 14<TD>15
   </TR>
</TABLE>

ÀÌ´Â ¾Æ·¡¿Í À¯»çÇÏ°Ô ³ªÅ¸³­´Ù:

ÅëÇÕ(collapse)µÈ Å׵θ®(border)µéÀ» °®´Â Å×ÀÌºí ¿¹Á¦   [D]

ÅëÇÕ(collapse)µÈ Å׵θ®µéÀ» °®´Â Å×ÀÌºí ¿¹Á¦.

¿¹Á¦:

´ÙÀ½ ¿¹Á¦´Â ÁÙ(row)µé»çÀÌÀÇ ¼öÆò ÁÙ(rule)µéÀ» °®´Â Å×À̺íÀ» ¼³¸íÇÑ´Ù. Å×À̺íÀÇ ¸ÇÀ§ Å׵θ®°¡ 'hidden'À¸·Î ¼³Á¤µÇ¾î ù¹ø° ÁÙ ¸ÇÀ§ Å׵θ®°¡ ¾ïÁ¦µÈ´Ù. ÀÌ´Â HTML 4ÀÇ "rules" ¾ÖÆ®¸®ºäÆ®(rules="rows")¸¦ Àû¿ëÇÑ´Ù.

TABLE[rules=rows]TR { border-top: solid }
TABLE[rules=rows] { border-collapse: collapse; border-top: hidden }
¼öÆò ÁÙ(rule)µéÀ» °®´Â Å×ÀÌºí   [D]

ÁÙ(row)µé»çÀÌ¿¡ ¼öÆò ÁÙ(rule)À» °®´Â Å×À̺í

ÀÌ °æ¿ì TABLE¿¡ 'hidden' Å׵θ® ¼³Á¤ ¾øÀ̵µ ù¹ø° ÁÙÀ» º°µµ·Î ÁöÁ¤ÇÏ¿© °°Àº È¿°ú¸¦ ¾òÀ» ¼ö ÀÖ´Ù. ÀÌ ¹æ¹ýÀº ¼±È£µÇ¾î »ç¿ëµÈ´Ù.

TR:first-child { border-top: none }
TR { border-top: solid }

¿¹Á¦:

´Ù¸¥ °¨Ãá(hidden) ÅëÇÕ(collapsing) Å׵θ®µé ¿¹Á¦¸¦ º¸ÀÚ:

µÎ »ý·«(omitted)µÈ Å׵θ®µé¸¦ °®´Â Å×ÀÌºí   [D]

µÎ »ý·«(omitted)µÈ ³»ºÎ Å׵θ®µé¸¦ °®´Â Å×À̺í.

HTML ¼Ò½º´Â:

<TABLE style="border-collapse: collapse; border: solid;">
   <TR>
      <TD style="border-right: hidden; border-bottom: hidden">foo</TD>
      <TD style="border: solid">bar</TD>
   </TR>
   <TR>
      <TD style="border: none">foo</TD>
      <TD style="border: solid">bar</TD>
   </TR>
</TABLE>

17.6.3 Å׵θ®(border) ½ºÅ¸ÀÏ

'border-style'ÀÇ ÀϺΠ°ªµéÀº Å×ÀÌºí¿¡¼­´Â ´Ù¸¥ ¿¤·¹¸àÆ®µé¿¡¼­¿Í ´Ù¸¥ Àǹ̵éÀ» °®´Â´Ù. ¾Æ·¡ Ç¥¿¡¼­ º° Ç¥(*)¸¦ ÇÏ¿´´Ù.

none(¾øÀ½)
Å׵θ®°¡ ¾ø´Ù.
*hidden(°¨Ãã)
'none'°ú °°À¸³ª ÅëÇÕ(collapsing) Å׵θ® ¸ðµ¨¿¡¼­ ´Ù¸¥ Å׵θ®µµ ¾ïÁ¦ÇÑ´Ù(Å׵θ® ¸¶Âû ÂüÁ¶).
dotted(Á¡¼±)
Å׵θ®¸¦ Á¡¼±(dot)À¸·Î ÇÑ´Ù.
dashed(´ë½¬ Á¡¼±)
Å׵θ®¸¦ ªÀº¼±(short line)À¸·Î ÇÑ´Ù.
solid(½Ç¼±)
Å׵θ®¸¦ ´ÜÀϼ±(line)À¸·Î ÇÑ´Ù.
double(ÀÌÁß ½Ç¼±)
Å׵θ®¸¦ µÎ°³ÀÇ ´ÜÀϼ±µé·Î ÇÑ´Ù. µÎ ¼±µéÀÇ ÇÕ°è¿Í ±× »çÀÌÀÇ °£°ÝÀº 'border-width'ÀÇ °ª°ú °°´Ù.
groove(ÆÄÀÎÁ¶°¢)
Å׵θ®°¡ â(canvas)¿¡ Á¶°¢µÈ °Íó·³ º¸ÀδÙ.
ridge(Æ¢¾î³ª¿Â Á¶°¢)
'grove'ÀÇ ¹Ý´ë: Å׵θ®°¡ â¿¡ Æ¢¾î³ª¿Â Á¶°¢Ã³·³ º¸ÀδÙ.
*inset(ÆÄÀÎÁ¶°¢)
ºÐ¸®µÈ(separated) Å׵θ® ¸ðµ¨¿¡¼­, Å׵θ®´Â â(canvas)¿¡ ±ò¸°(embed) °Í °°ÀÌ º¸ÀÌ°Ô Àüü ¹Ú½º¸¦ ¸¸µç´Ù. ÅëÇÕ Å׵θ® ¸ðµ¨¿¡¼­´Â, 'groove'¿Í °°À½.
*outset(Æ¢¾î³ª¿Â Á¶°¢)
ºÐ¸®µÈ Å׵θ® ¸ðµ¨¿¡¼­, Å׵θ®´Â â(canvas)¿¡ Æ¢¾î ³ª¿Â °Íó·³ º¸ÀÌ°Ô Àüü ¹Ú½º¸¦ ¸¸µç´Ù. ÅëÇÕ(collapsing) Å׵θ® ¸ðµ¨¿¡¼­´Â, 'ridge'¿Í °°À½.

17.7 Å×À̺í(table)µéÀÇ ¼Ò¸® Ç¥Çö

À½¼º ÇÕ¼º ÀåÄ¡·Î Å×À̺íÀÌ ¸»ÇØÁö´Â °æ¿ì, µ¥ÀÌÅÍ ¼¿µé°ú Çì´õ(header) ¼¿µé»çÀÌÀÇ °ü°è°¡ ¼öÆò°ú ¼öÁ÷ Á¤·Ä°ú´Â ´Ù¸¥ ¹æ¹ýÀ¸·Î Ç¥ÇöµÇ¾î¾ß ÇÑ´Ù. ÀϺΠ¸»ÇÏ´Â ºê¶ó¿ìÀúµéÀº »ç¿ëÀÚ°¡, Ư¼öÇÏ°Ô °ü°è¸¦ Ç¥ÇöÇÏ´Â ±âȸ¸¦ Áָ鼭, 2 Â÷¿ø °ø°£À» À̵¿Çϵµ·Ï Çã¿ëÇÑ´Ù. ÀÌ°ÍÀÌ ºÒ°¡´ÉÇÑ °æ¿ì, ½ºÅ¸ÀϽ¬Æ®´Â ¾î´À ÁöÁ¡¿¡¼­ Çì´õ°¡ ¸»ÇØ Á®¾ß ÇÏ´ÂÁö¸¦ Á¤ÁöÇÏ¿©¾ß ÇÑ´Ù.

17.7.1 ¸»ÇÏ´Â Çì´õµé: 'speak-header' ¼Ó¼º

'speak-header'
°ª:  once | always | inherit
ÃÖÃÊ°ª:  once
Àû¿ë:  Å×À̺í Çì´õ(header) Á¤º¸¸¦ °®´Â ¿¤·¹¸àÆ®µé
Àü´Þ:  µÊ
¹éºÐÀ²:  »ç¿ë ¸øÇÔ
¸Þµð¾Æ:  aural(¼Ò¸®ÀÇ)

ÀÌ ¼Ó¼º Å×À̺í Çì´õ(header)µéÀÌ °¢ ¼¿ ¾Õ¿¡ ¸»ÇØ Áö´Â°¡, ¶Ç´Â ±× ¼¿ÀÌ ¾ÕÀÇ ¼¿°ú ´Ù¸¥ Çì´õ¿Í ¿¬°üµÈ ¼¿ ¾Õ¿¡¼­ ¸¸ ¸»ÇØ Áö´Â°¡¸¦ ÁöÁ¤ÇÑ´Ù. °ªµéÀº ´ÙÀ½ÀÇ Àǹ̸¦ °®´Â´Ù:

once(Çѹø)
Çì´õ¸¦ ¿©·¯°³ÀÇ ¼¿µé ¾Õ¿¡¼­ ÇÑ ¹ø ¸» ÇÔ.
always(Ç×»ó)
Çì´õ¸¦ °¢ ¼¿µé ¾Õ¿¡¼­ ¸» ÇÔ.

°¢ ¹®¼­¾ð¾î´Â Á¦ÀÛÀÚ°¡ Çì´õ¸¦ ÁöÁ¤ÇÒ ¼ö ÀÖµµ·Ï ´Ù¸¥ ±â´ÉµéÀ» °¡Áú ¼ö ÀÖ´Ù. ¿¹¸¦ µé¾î, ¹ø¿ª¹® HTML 4 Å×ÀÌºí¿¡¼­, ¼¼°¡Áö ´Ù¸¥ ¾ÖÆ®¸®ºäÆ®(HTML "headers", "scope", "axis")µé·Î Çì´õ Á¤º¸¸¦ ÁöÁ¤ÇÏ´Â °ÍÀÌ °¡´ÉÇÏ°í, ÀÌ ±Ô°Ý¿¡¼­´Â ÀÌµé ¾ÖÆ®¸®ºäÆ®(attribute)µéÀÌ ÁöÁ¤µÇÁö ¾Ê¾ÒÀ» ¶§, Çì´õ Á¤º¸¸¦ °áÁ¤ÇÏ´Â ±â´ÉÀ» Á¦°øÇÑ´Ù.

MS Word·Î »ý¼ºÇÑ Å×À̺í À̹ÌÁö   [D]

Àû¿ëµÇ´Â µ¥ÀÌÅÍ°¡ °°Àº Ä÷³ ¶Ç´Â ÁÙ¿¡ ÀÖÁö ¾Ê´Â Çì´õ ¼¿µé("San Jose"°ú "Seattle")À» °®´Â Å×À̺í À̹ÌÁö(image).

ÀÌ HTML ¿¹Á¦´Â µÎ Áö¿ª(San Jose¿Í Seattle)¿¡¼­, ¿¬¼ÓµÇ´Â ³¯ÀÚ¿¡, À½½Ä, È£ÅÚ°ú ±³Åëºñ¿¡ »ç¿ëµÈ ºñ¿ëÀ» ³ªÅ¸³½´Ù. °³³äÀûÀ¸·Î, n-Â÷¿ø °ø°£ÀÇ Å×À̺íÀ» »ý°¢ÇÒ ¼ö ÀÖ´Ù. ÀÌ °ø°£ÀÇ Çì´õµéÀº Áö¿ª(location), ÀÏÀÚ(day), ºñ¿ëÁ¾·ù(category) ¼Ò°è( subtotal)µéÀÌ´Ù. ÀϺΠ¼¿µéÀº Ãà¿¡ µû¶ó Ç¥½ÃµÇ¾ú°í ´Ù¸¥ °ÍµéÀº ÀÌ °ø°£¿¡¼­ ÁöºÒµÈ ±Ý¾×À» Á¦°øÇÑ´Ù. ÀÌ Å×À̺íÀÇ ³»¿ëÀº:

<TABLE>
<CAPTION>Travel Expense Report</CAPTION>
   <TR>
     <TH></TH>
     <TH>Meals</TH>
     <TH>Hotels</TH>
     <TH>Transport</TH>
     <TH>subtotal</TH>
   </TR>
   <TR>
      <TH id="san-jose" axis="san-jose">San Jose</TH>
   </TR>
   <TR>
      <TH headers="san-jose">25-Aug-97</TH>
      <TD>37.74</TD>
      <TD>112.00</TD>
      <TD>45.00</TD>
      <TD></TD>
   </TR>
   <TR>
      <TH headers="san-jose">26-Aug-97</TH>
      <TD>27.28</TD>
      <TD>112.00</TD>
      <TD>45.00</TD>
      <TD></TD>
   </TR>
   <TR>
      <TH headers="san-jose">subtotal</TH>
      <TD>65.02</TD>
      <TD>224.00</TD>
      <TD>90.00</TD>
      <TD>379.02</TD>
   </TR>
   <TR>
      <TH id="seattle" axis="seattle">Seattle</TH>
   </TR>
   <TR>
      <TH headers="seattle">27-Aug-97</TH>
      <TD>96.25</TD>
      <TD>109.00</TD>
      <TD>36.00</TD>
      <TD></TD>
   </TR>
   <TR>
      <TH headers="seattle">28-Aug-97</TH>
      <TD>35.00</TD>
      <TD>109.00</TD>
      <TD>36.00</TD>
      <TD></TD>
   </TR>
   <TR>
      <TH headers="seattle">subtotal</TH>
      <TD>131.25</TD>
      <TD>218.00</TD>
      <TD>72.00</TD>
      <TD>421.25</TD>
   </TR>
   <TR>
      <TH>Totals</TH>
      <TD>196.27</TD>
      <TD>442.00</TD>
      <TD>162.00</TD>
      <TD>800.27</TD>
   </TR>
</TABLE>

ÀÌ ¹æ½ÄÀÇ µ¥ÀÌÅÍ(data) ¸ðµ¨À» Á¦°øÇϹǷμ­, Á¦ÀÛÀÚµéÀÌ ¸»ÇÏ´Â ºê¶ó¿ìÀúµé·Î ÀÌ Å×À̺íÀ» dzºÎÇÏ°Ô Ç×ÇØÇÒ ¼ö ÀÖ°Ô ÇÑ´Ù. ¿¹: °¢ µ¥ÀÌÅÍ ¼¿ Àü¿¡ ÇØ´ç Çì´õ¸¦ ¹Ýº¹Çϸ鼭, °¢ ¼¿ÀÌ ¸ñ·ÏÀ¸·Î ¸»ÇØ ÁØ´Ù:

San Jose, 25-Aug-97, Meals: 37.74
San Jose, 25-Aug-97, Hotels: 112.00
San Jose, 25-Aug-97, Transport: 45.00 ...

ºê¶ó¿ìÀú´Â ¶ÇÇÑ Çì´õµéÀÌ ¹Ù²ð ¶§ ¸¸ ¸»ÇÒ ¼öµµ ÀÖ´Ù:

San Jose, 25-Aug-97,
Meals: 37.74 Hotels: 112.00
Transport: 45.00 26-Aug-97,
Meals: 27.28 Hotels: 112.00 ...

ÆäÀÌÁö ¸ÇÀ§·Î¸ÇÀ§ÀÌ Trio ȨÆäÀÌÁö ¹®¼­()´Â ÀÚÀ¯·ÎÀÌ ¿¬°á »ç¿ëÀÌ °¡´ÉÇÔ.
(¼öÁ¤ÀÏ )