모서리가 둥근 테이블 만들기

모서리가 둥근 테이블 만드는 방법 중 자바 스크립트를 사용하는 방법이 많이 있는데 만약 자바스크립트 추가를 막아 놓은 사이트일 경우 사용할 수 없으므로 이 경우 사용 할 수 있는 방법에 대해서 소개 합니다.

이 방법은 네이버에 있는 이미지를 이용하는 방법으로 필요할 경우 아래 이미지를 자신의 계정으로 다운로드 받아서 사용하시면 될 듯 합니다.

titbar_l.gif

titbar_lbtm.gif

titbar_ltop.gif

titbar_r.gif

titbar_rbtm.gif

titbar_rtop.gif

위 이미지를 따로 다운로드 받아 사용하지 않는 다면 아래 소스를 복사해서 사용하시면 됩니다.


<TABLE cellSpacing=0 cellPadding=0 width=300> <TBODY> <TR> <TD vAlign=top width=9><IMG height=9 src="http://toolbar.naver.com/images/titbar_ltop.gif" width=9> </TD> <TD width=300 background=http://toolbar.naver.com/images/titbar_bgtop.gif height=9></TD> <TD vAlign=top width=9><IMG height=9 src="http://toolbar.naver.com/images/titbar_rtop.gif" width=9> </TD> </TR> <TR> <TD background=http://toolbar.naver.com/images/titbar_l.gif></TD><TD height=124>8개 이미지로 처리 </TD> <TD background=http://toolbar.naver.com/images/titbar_r.gif></TD> </TR> <TR> <TD><IMG height=9 src="http://toolbar.naver.com/images/titbar_lbtm.gif" width=9> </TD> <TD background=http://toolbar.naver.com/images/titbar_bgbtm.gif height=9></TD> <TD><IMG height=9 src="http://toolbar.naver.com/images/titbar_rbtm.gif" width=9> </TD> </TR> </TBODY> </TABLE>


두번째 방법으론 이미지도 사용하지 않고 자바스크립트도 사용하지 않는, 말 그대로 노가다 html 코딩으로 가능하게 하는 방법입니다. ^-^

<table cellpadding=0 cellspacing=0 border=0 width=300 > <tr height=1> <td rowspan=4 width=1></td> <td rowspan=3 width=1></td> <td rowspan=2 width=1></td> <td width=2></td> <td bgcolor=#e7e7e7></td> <td width=2></td> <td rowspan=2 width=1></td> <td rowspan=3 width=1></td> <td rowspan=4 width=1></td> </tr> <tr height=1> <td bgcolor=#e7e7e7></td> <td bgcolor=#ffffff></td> <td bgcolor=#e7e7e7></td> </tr> <tr height=1> <td bgcolor=#e7e7e7></td> <td colspan=3 bgcolor=#ffffff></td> <td bgcolor=#e7e7e7></td> </tr> <tr height=2> <td bgcolor=#e7e7e7></td> <td colspan=5 bgcolor=#ffffff></td> <td bgcolor=#e7e7e7></td> </tr> </table> <table cellpadding=0 cellspacing=0 border=0 width=300 > <tr > <td width=1 bgcolor=#e7e7e7></td> <td valign=top bgcolor=#ffffff> <table cellpadding=0 cellspacing=0 border=0 width=100%> <tr height=0><td></td> <td></td> <td></td> </tr> <tr> <td width=0></td> <td align="center">이곳에다가 내용을 적어주시면 됩니다.</td> <td width=0></td> </tr> <tr height=0> <td></td> <td bgcolor=#ffffff></td> <td></td> </tr> </table> </td> <td width=1 bgcolor=#e7e7e7></td> </tr> </table> <table cellpadding=0 cellspacing=0 border=0 width=300 > <tr height=2> <td rowspan=4 width=1></td> <td width=1 bgcolor=#e7e7e7></td> <td width=1 bgcolor=#ffffff></td> <td width=2 bgcolor=#ffffff></td> <td bgcolor=#ffffff></td> <td width=2 bgcolor=#ffffff></td> <td width=1 bgcolor=#ffffff></td> <td width=1 bgcolor=#e7e7e7></td> <td rowspan=4 width=1></td> </tr> <tr height=1> <td rowspan=3></td> <td bgcolor=#e7e7e7></td> <td colspan=3 bgcolor=#ffffff></td> <td bgcolor=#e7e7e7></td> <td rowspan=3></td> </tr> <tr height=1> <td rowspan=2></td> <td bgcolor=#e7e7e7></td> <td bgcolor=#ffffff></td> <td bgcolor=#e7e7e7></td> <td rowspan=2></td> </tr> <tr height=1> <td></td> <td bgcolor=#e7e7e7></td> <td></td> </tr> </table>


마지막 방법

<script> 

function roundTable(objID) { 

var obj = document.getElementById(objID); 

var Parent, objTmp, Table, TBody, TR, TD; 

var bdcolor, bgcolor, Space; 

var trIDX, tdIDX, MAX; 

var styleWidth, styleHeight; 

// get parent node 

Parent = obj.parentNode; 

objTmp = document.createElement('SPAN'); 

Parent.insertBefore(objTmp, obj); 

Parent.removeChild(obj); 

// get attribute 

bdcolor = obj.getAttribute('rborder'); 

bgcolor = obj.getAttribute('rbgcolor'); 

radius = parseInt(obj.getAttribute('radius')); 

if (radius == null || radius < 1) radius = 1; 

else if (radius > 6) radius = 6; 

MAX = radius * 2 + 1; 

/* 

create table {{ 

*/ 

Table = document.createElement('TABLE'); 

TBody = document.createElement('TBODY'); 

Table.cellSpacing = 0; 

Table.cellPadding = 0; 

for (trIDX=0; trIDX < MAX; trIDX++) { 

TR = document.createElement('TR'); 

Space = Math.abs(trIDX - parseInt(radius)); 

for (tdIDX=0; tdIDX < MAX; tdIDX++) { 

TD = document.createElement('TD'); 

styleWidth = '1px'; styleHeight = '1px'; 

if (tdIDX == 0 || tdIDX == MAX - 1) styleHeight = null; 

else if (trIDX == 0 || trIDX == MAX - 1) styleWidth = null; 

else if (radius > 2) { 

if (Math.abs(tdIDX - radius) == 1) styleWidth = '2px'; 

if (Math.abs(trIDX - radius) == 1) styleHeight = '2px'; 

} 

if (styleWidth != null) TD.style.width = styleWidth; 

if (styleHeight != null) TD.style.height = styleHeight; 

if (Space == tdIDX || Space == MAX - tdIDX - 1) TD.style.backgroundColor = bdcolor; 

else if (tdIDX > Space && Space < MAX - tdIDX - 1) TD.style.backgroundColor = bgcolor; 

if (Space == 0 && tdIDX == radius) TD.appendChild(obj); 

TR.appendChild(TD); 

} 

TBody.appendChild(TR); 

} 

/* 

}} 

*/ 

Table.appendChild(TBody); 

// insert table and remove original table 

Parent.insertBefore(Table, objTmp); 

} 

</script> 

<!------------------------------------------

사용법) 

테이블에 아이디태그가 있어야 합니다. 

전 한번 변환하는게 몇개 안되어서 아이디를 입력받아 함수를 실행하도록 했지만, 만약 많은 양을 한꺼번에 변환해야할 경우에는 함수를 변경해서 사용하시기 바랍니다. ^^ 

위 스크립트를 HTML문서에 포함하고(당연히...), 

roundTable(테이블의 아이디문자열); 

처럼 함수를 실행시키시면 됩니다. 

단, 이 때 원래의 테이블에서 raidus(둥근 정도) 값과 테두리와 배경색의 색상값을 지정하도록 되어있습니다. 

int radius : 둥근 정도입니다. 가능한 값은 1 <= radius<= 6 입니다. radius 를 계산하는 부분의 규칙을 잘 몰라서 우선은 한정시켜놨습니다. 나중에 모서리 픽셀을 제대로 구할 수 있게 되면 범위를 수정하겠습니다. 

string rborder : 테두리의 색상값. #FFFFFF 와 같은 16진수 색상값과 white 와 같은 색상지시문자열 모두 사용가능. 

string rbgcolor : 라운드테이블의 배경색. 배경색은 라운드 테이블 테두리 선 안쪽의 색상을 말하는 것입니다. rborder와 마찬가지로 16진수 색상값과 색상지시문자열 모두 사용가능합니다. 

------------------------------------------------------------>

<table id="ta" width="300" height="150" border="0" radius="3" rborder="#999999" rbgcolor="#F8F8F8"> 

<tr> 

<td>1</td> 

<td>1</td> 

</tr> 

<tr> 

<td colspan="2">테스트</td> 

</tr> 

</table> 

<script>roundTable("ta");</script>