모서리가 둥근 테이블 간단하게만들기 정보
모서리가 둥근 테이블 간단하게만들기
본문
1. head에 다음 스크립트를 입력합니다.
---------------------------------------------------------------------------------------------------------------------------------
<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>
---------------------------------------------------------------------------------------------------------------------------------
2. 적용할 테이블에
id(테이블아이디), radius(둥근정도), rborder(테두리색), rbgcolor(배경색) 값을 아래의 예처럼 넣습니다.
그리고 <script>roundTable("테이블id");</script>를 호출합니다.
---------------------------------------------------------------------------------------------------------------------------------
<table id="table01" radius="3" rborder="#000000" rbgcolor="#e1e1e1" width="300" border="0">
<tr>
<td>모서리가 둥근 테이블 예</td>
</tr>
</table>
<script>roundTable("table01");</script>
---------------------------------------------------------------------------------------------------------------------------------
세티즌 소스보기를 하다가...
---------------------------------------------------------------------------------------------------------------------------------
<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>
---------------------------------------------------------------------------------------------------------------------------------
2. 적용할 테이블에
id(테이블아이디), radius(둥근정도), rborder(테두리색), rbgcolor(배경색) 값을 아래의 예처럼 넣습니다.
그리고 <script>roundTable("테이블id");</script>를 호출합니다.
---------------------------------------------------------------------------------------------------------------------------------
<table id="table01" radius="3" rborder="#000000" rbgcolor="#e1e1e1" width="300" border="0">
<tr>
<td>모서리가 둥근 테이블 예</td>
</tr>
</table>
<script>roundTable("table01");</script>
---------------------------------------------------------------------------------------------------------------------------------
세티즌 소스보기를 하다가...
추천
2
2
댓글 10개
감사합니다.
초보라서 몰랐었는데 좋은 소스 감사합니다.
ㅎㅎ
초보라서 몰랐었는데 좋은 소스 감사합니다.
ㅎㅎ
IE만 가능 합니다...
그리고 이건 그누 팁은 아닌거 같아요오~~
그리고 이건 그누 팁은 아닌거 같아요오~~

IE에서만 가능한지 확인해 보셨어요?
파이어폭스에서도 직접 확인하고 글 올렸습니다.
그누팁이 아닌걸 올려서 죄송합니다. 제가 필요했던 정보였기에
다른분들도 그럴줄로만 알고ㅋ ^^
파이어폭스에서도 직접 확인하고 글 올렸습니다.
그누팁이 아닌걸 올려서 죄송합니다. 제가 필요했던 정보였기에
다른분들도 그럴줄로만 알고ㅋ ^^
디자이너의 고통을 덜어줄 팁이군요....^^
굿입니다.. 혹시 호색사자님? ..
좋은 팁 감사합니다
팁 감사합니다.^^
좋은팁 잘봤습니다.
간단하면서 좋은 팁 감사합니다.