모서리 둥근 테이블, 이미지 없이 구현하기
인터넷정보2007. 10. 10. 11:29
<!--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> </td>";
top_html+="<td rowspan=2 style='width:1px;' class=bin> </td><td style='width:1px;' class=bin> </td><td bgcolor="+c+" class=bin> </td>";
top_html+="<td style='width:2px;' class=bin></td><td rowspan=2 style='width:1px;' class=bin> </td><td rowspan=3 style='width:1px;' class=bin> </td>";
top_html+="<td rowspan=4 style='width:1px;' class=bin> </td></tr><tr style='height:1px;'><td bgcolor="+c+" class=bin> </td>";
top_html+="<td bgcolor="+c+" class=bin> </td><td bgcolor="+c+" class=bin> </td></tr>";
top_html+="<tr style='height: 1px;'><td bgcolor="+c+" class=bin> </td><td colspan=3 bgcolor="+c+" class=bin> </td>";
top_html+="<td bgcolor="+c+" class=bin> </td></tr><tr style='height:2px;'><td bgcolor="+c+" class=bin> </td>";
top_html+="<td colspan=5 bgcolor="+c+" class=bin> </td><td bgcolor="+c+" class=bin> </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> </td><td width=1 bgcolor="+c+" class=bin> </td><td style='width:1px;' bgcolor="+c+" class=bin> </td>";
bottom_html+="<td style='width:1px;' bgcolor="+c+" class=bin> </td><td bgcolor="+c+" class=bin> </td><td width=2 bgcolor="+c+" class=bin> </td>";
bottom_html+="<td style='width:1px;' bgcolor="+c+" class=bin> </td><td style='width:1px;' bgcolor="+c+" class=bin> </td><td rowspan=4 style='width:1px;' class=bin> </td></tr>";
bottom_html+="<tr style='height: 1px;'><td rowspan=3 class=bin> </td><td bgcolor="+c+" class=bin> </td><td colspan=3 bgcolor="+c+" class=bin> </td>";
bottom_html+="<td bgcolor="+c+" class=bin> </td><td rowspan=3 class=bin> </td></tr><tr style='height:1px;'><td rowspan=2 class=bin> </td>";
bottom_html+="<td bgcolor="+c+" class=bin> </td><td bgcolor="+c+" class=bin> </td><td bgcolor="+c+" class=bin> </td><td rowspan=2 class=bin> </td></tr>";
bottom_html+="<tr style='height: 1px;' class=bin><td class=bin> </td><td bgcolor="+c+" class=bin> </td><td class=bin> </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>
.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> </td>";
top_html+="<td rowspan=2 style='width:1px;' class=bin> </td><td style='width:1px;' class=bin> </td><td bgcolor="+c+" class=bin> </td>";
top_html+="<td style='width:2px;' class=bin></td><td rowspan=2 style='width:1px;' class=bin> </td><td rowspan=3 style='width:1px;' class=bin> </td>";
top_html+="<td rowspan=4 style='width:1px;' class=bin> </td></tr><tr style='height:1px;'><td bgcolor="+c+" class=bin> </td>";
top_html+="<td bgcolor="+c+" class=bin> </td><td bgcolor="+c+" class=bin> </td></tr>";
top_html+="<tr style='height: 1px;'><td bgcolor="+c+" class=bin> </td><td colspan=3 bgcolor="+c+" class=bin> </td>";
top_html+="<td bgcolor="+c+" class=bin> </td></tr><tr style='height:2px;'><td bgcolor="+c+" class=bin> </td>";
top_html+="<td colspan=5 bgcolor="+c+" class=bin> </td><td bgcolor="+c+" class=bin> </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> </td><td width=1 bgcolor="+c+" class=bin> </td><td style='width:1px;' bgcolor="+c+" class=bin> </td>";
bottom_html+="<td style='width:1px;' bgcolor="+c+" class=bin> </td><td bgcolor="+c+" class=bin> </td><td width=2 bgcolor="+c+" class=bin> </td>";
bottom_html+="<td style='width:1px;' bgcolor="+c+" class=bin> </td><td style='width:1px;' bgcolor="+c+" class=bin> </td><td rowspan=4 style='width:1px;' class=bin> </td></tr>";
bottom_html+="<tr style='height: 1px;'><td rowspan=3 class=bin> </td><td bgcolor="+c+" class=bin> </td><td colspan=3 bgcolor="+c+" class=bin> </td>";
bottom_html+="<td bgcolor="+c+" class=bin> </td><td rowspan=3 class=bin> </td></tr><tr style='height:1px;'><td rowspan=2 class=bin> </td>";
bottom_html+="<td bgcolor="+c+" class=bin> </td><td bgcolor="+c+" class=bin> </td><td bgcolor="+c+" class=bin> </td><td rowspan=2 class=bin> </td></tr>";
bottom_html+="<tr style='height: 1px;' class=bin><td class=bin> </td><td bgcolor="+c+" class=bin> </td><td class=bin> </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>
'인터넷정보' 카테고리의 다른 글
| IE/FF(Gecko,W3C) 이벤트 설명 (0) | 2007.10.10 |
|---|---|
| 오른쪽마우스버튼,키보드 입력 방지,드래그금지, 특정키 제어 (0) | 2007.10.10 |
| 오픈마켓 광고, 옥션 광고, 지마켓 광고, 엠플 광고, 온켓 광고 (0) | 2007.10.10 |
| 폰트 사이트 (0) | 2007.10.10 |
| 레이어 여러개 반투명하게 교차하기 (0) | 2007.10.10 |
| 로딩 페이지에 들어갈 이미지가 여기다 있습니다 (0) | 2007.10.10 |
| 라이트박스 효과 (이미지, 아이프렘, html 지원) (0) | 2007.10.10 |
| 클릭 한번으로 창 여러개 두개 이상 띄우기 (0) | 2007.10.10 |
| 스크립트로 이미지 모서리를 둥글게 (0) | 2007.10.10 |
| XML 을 이용한 세로 플래시 메뉴 Ver 1.1 (0) | 2007.10.10 |
