1. °Ô½ÃÆÇ ¸ð¾çÀ» ¸¶Å©¾÷ÇÑ´Ù.
<table class="board_list">
<thead>
<tr>
<th class="first" >no</th>
<th>Á¦¸ñ</th>
<th>ÀÛ¼ºÀÚ</th>
<th>Á¶È¸¼ö</th>
</tr>
</thead>
<tbody>
<tr>
<td>10</td>
<td>¸À½ºÅ¸ º¹¼þ¾Æ ¸À </td>
<td>Çຸ°ü</td>
<td>99</td>
</tr>
</tbody>
</table>
| no | Á¦¸ñ | ÀÛ¼ºÀÚ | Á¶È¸¼ö |
|---|---|---|---|
| 10 | ¸À½ºÅ¸ º¹¼þ¾Æ ¸À | Çຸ°ü | 99 |
2. ¿©±â¿¡ ¾Æ·¡¿Í °°Àº css¸¦ ÀÔÈù´Ù.
.board_list {width:60%; background:url(images/head_01.gif) no-repeat right top; border-bottom:1px solid silver;}
.board_list th {background:url(images/line.gif) no-repeat left top; white-space:pre;}
.board_list th.first {background:url(images/head_01.gif) no-repeat left top;}
1. Å×À̺íÀÇ ¾ç ³¡ÀÌ µðÀÚÀΠó¸®µÈ °æ¿ì¸¦ ¿¹·Î µé¾î Á¦ÀÛÇÔ. (¹è°æÀ̹ÌÁöÀÇ Æ÷Áö¼ÇÀ» ÁÂ,¿ì·Î ¹Ù²ã¼ À¯µ¿ÀûÀÎ »çÀÌÁî¿¡ ´ëÀÀÇÒ¼ö ÀÖÀ½)
2. theadÀÇ µðÀÚÀÎÀ» ÅëÀ¸·Î ¸¸µçÈÄ board_list¿Í th.first¿¡ °¢°¢ right¿Í left·Î Àû¿ëÇÔ. (¿¹Á¦ÀÇ À̹ÌÁö »çÀÌÁî : 1200 * 29)
3. °¢ th¿¡´Â ±¸ºÐ¼±À» ¹è°æÀ¸·Î ³ÖÀ»¼ö ÀÖÀ¸¸ç, white-space ¼Ó¼ºÀ» ÀÌ¿ëÇØ ´Ü¾î°¡ Áٹٲ޵Ǵ ÀÏÀÌ ¾øµµ·Ï ÇÑ´Ù.
| no | Á¦¸ñ | ÀÛ¼ºÀÚ | Á¶È¸¼ö |
|---|---|---|---|
| 10 | ¸À½ºÅ¸ º¹¼þ¾Æ ¸À | Çຸ°ü | 99 |
ÀÌÁ¦ thÀÇ ³ôÀ̰ª, Ä÷¯, tdµîÀ» ¿øÇϴ´ë·Î ½ºÅ¸ÀÏÇÑ´Ù.
.board_list th {height:18px; padding:7px 5px 4px;} (À̹ÌÁö ³ôÀÌ = padding + height - font-size)
.board_list th {color:#fff;}
.board_list td {color:#444; padding:5px 5px 2px; text-align:center; border-bottom:1px solid #eee;}
1. µ¸¿òüÀÇ °æ¿ì ¾Æ·¡·Î 3Çȼ¿ ¿©¹éÀ» °¡Áö¹Ç·Î, padding°ª 7px 5px 4px;Àº Á¿ì·Î 5Çȼ¿, »ó 7Çȼ¿, ÇÏ 4Çȼ¿À» ÁöÁ¤ÇÏ¸ç ¼¼·Î Áß¾ÓÀ» ¸ÂÃçÁØ´Ù.
2. ±×¸²¿¡¼Ã³·³ ÆùÆ®º°, ºê¶ó¿ìÀúº° °£°Ý°ªÀ» Âü°íÇÑ´Ù.
![]()
3. ÃÖÁ¾ ¿Ï¼ºÇü
| no | Á¦¸ñ | ÀÛ¼ºÀÚ | Á¶È¸¼ö |
|---|---|---|---|
| 10 | ¸À½ºÅ¸ º¹¼þ¾Æ ¸À | Çຸ°ü | 99 |
| 10 | ¸À½ºÅ¸ º¹¼þ¾Æ ¸À | Çຸ°ü | 99 |