모서리 둥근 테이블, 이미지 없이 구현하기

<!--StartFragment--><style>
.bin {font-size:1px; font-family:verdana; line-height:1%;}
.fixed {table-layout:fixed;}
</style>

<pre class="scripts">

function top_round(w,c) {
var top_html;
top_html="<table cellpadding=0 cellspacing=0 border=0 style='width:"+w+";margin:0px;padding:0px;' class=fixed>";
top_html+="<tr style='height: 1px;'><td rowspan=4 style='width:1px;' class=bin></td><td rowspan=3 style='width:1px;' class=bin>&nbsp;</td>";
top_html+="<td rowspan=2 style='width:1px;' class=bin>&nbsp;</td><td style='width:1px;' class=bin>&nbsp;</td><td bgcolor="+c+" class=bin>&nbsp;</td>";
top_html+="<td style='width:2px;' class=bin></td><td rowspan=2 style='width:1px;' class=bin>&nbsp;</td><td rowspan=3 style='width:1px;' class=bin>&nbsp;</td>";
top_html+="<td rowspan=4 style='width:1px;' class=bin>&nbsp;</td></tr><tr style='height:1px;'><td bgcolor="+c+" class=bin>&nbsp;</td>";
top_html+="<td bgcolor="+c+" class=bin>&nbsp;</td><td bgcolor="+c+" class=bin>&nbsp;</td></tr>";
top_html+="<tr style='height: 1px;'><td bgcolor="+c+" class=bin>&nbsp;</td><td colspan=3 bgcolor="+c+" class=bin>&nbsp;</td>";
top_html+="<td bgcolor="+c+" class=bin>&nbsp;</td></tr><tr style='height:2px;'><td bgcolor="+c+" class=bin>&nbsp;</td>";
top_html+="<td colspan=5 bgcolor="+c+" class=bin>&nbsp;</td><td bgcolor="+c+" class=bin>&nbsp;</td></tr></table>";
document.write(top_html);
}

function bottom_round(w,c) {
var bottom_html;
bottom_html="<table cellpadding=0 cellspacing=0 border=0 style='width:"+w+";margin:0px;padding:0px;' class=fixed>";
bottom_html+="<tr style='height: 2px;'><td rowspan=4 width=1 class=bin>&nbsp;</td><td width=1 bgcolor="+c+" class=bin>&nbsp;</td><td style='width:1px;' bgcolor="+c+" class=bin>&nbsp;</td>";
bottom_html+="<td style='width:1px;' bgcolor="+c+" class=bin>&nbsp;</td><td bgcolor="+c+" class=bin>&nbsp;</td><td width=2 bgcolor="+c+" class=bin>&nbsp;</td>";
bottom_html+="<td style='width:1px;' bgcolor="+c+" class=bin>&nbsp;</td><td style='width:1px;' bgcolor="+c+" class=bin>&nbsp;</td><td rowspan=4 style='width:1px;' class=bin>&nbsp;</td></tr>";
bottom_html+="<tr style='height: 1px;'><td rowspan=3 class=bin>&nbsp;</td><td bgcolor="+c+" class=bin>&nbsp;</td><td colspan=3 bgcolor="+c+" class=bin>&nbsp;</td>";
bottom_html+="<td bgcolor="+c+" class=bin>&nbsp;</td><td rowspan=3 class=bin>&nbsp;</td></tr><tr style='height:1px;'><td rowspan=2 class=bin>&nbsp;</td>";
bottom_html+="<td bgcolor="+c+" class=bin>&nbsp;</td><td bgcolor="+c+" class=bin>&nbsp;</td><td bgcolor="+c+" class=bin>&nbsp;</td><td rowspan=2 class=bin>&nbsp;</td></tr>";
bottom_html+="<tr style='height: 1px;' class=bin><td class=bin>&nbsp;</td><td bgcolor="+c+" class=bin>&nbsp;</td><td class=bin>&nbsp;</td></tr></table>";
document.write(bottom_html);
}
</pre>

<pre class="scripts">top_round("60%","#FFCC66");</pre>
<table border=0 width=60% bgcolor=#FFCC66 cellpadding=0 cellspacing=0>
<tr><td>둥글 둥글 -_-</td></tr></table>
<pre class="scripts">bottom_round("60%","#FFCC66");</pre>