Html 테그
다양한 테이블 기교들....
디자인인스
2010. 10. 27. 10:50
예제는 조기 위에 문서링크 눌러보기^^
1. 보더값이나 스페이싱 패팅 값을 조절하면...더 이쁘게 나오죠
bordercolordark='white' bordercolorlight='black'
2. 얇은 테이블 선을 만드는 다른 방법
<table border=0 cellspacing=1 cellpadding=0 bgcolor="#000000">
<tr bgcolor="#FFFFFF">
<td></td>
</tr>
</table>
3. 셀위로 마우스가 오버했을경우에 색을 변하게 하자.
[안내]태그제한으로등록되지않습니다-onMouseOver=this.style.backgroundColor="#BCBCBC" nMouseOut=this.style.backgroundColor=""
4. 양쪽 세로만 찐허게..
<table width="500" cellspacing="0" cellpadding="4" bordercolor=#999999 frame=vsides><tr><td bgcolor="#efefef" align=center> 출처는 tiptech</td></tr></table>
5. 위아래 가로만 찐허게..
<table width="500" cellspacing="0" cellpadding="4" bordercolor=#999999 frame=hsides><tr><td bgcolor="#efefef" align=center> 출처는 tiptech</td></tr></table>
6. 위아래 가로만 얇게나타나게..
<table border="0" cellpadding="3" cellspacing="0" bgcolor="" width=500 style="border-width:1; border-style:solid; border-top-color:gray; border-right-color:white; border-bottom-color:gray; border-left-color:white;"><tr><td align=center> 출처는 내머리속</td></tr></table>
7. 위아래 가로만 두줄로 얇게 나타나게..
<table width="500" cellspacing="1" cellpadding="4" bordercolor=#999999 frame=hsides><tr><td bgcolor="#efefef" align=center> 출처는 tiptech</td></tr></table>
8. 점선테이블
<table border="0" cellspacing="1" cellpadding="4" background="dot.gif" width="500"><tr><td bgcolor="#FFFFFF" align="center">출처는 ttp://www.neostream.co.kr</td></tr></table>
9. 움직이는 점선테이블
<table border="0" cellspacing="1" cellpadding="4" background="dot-ani.gif" width="500"><tr><td bgcolor="#FFFFFF" align="center">출처는 http://www.neostream.co.kr</td></tr></table>
10. 셀을 버튼으로 활용하자.
<table border="0" cellspacing="1" cellpadding="4" background="dot.gif" width="500"><tr><td bgcolor="#FFFFFF" align="center" [안내]태그제한으로등록되지않습니다-onMouseOver="this.style.background='#eeeeee'; this.style.cursor='hand'" [안내]태그제한으로등록되지않습니다-onMouseOut=this.style.backgroundColor="" 예제는 조기 위에 문서링크 눌러보기^^ http://www.daum.net';">셀을 버튼으로 <font color="#FF0000">go http://www.daum.net</font></td></tr></table>
1. 보더값이나 스페이싱 패팅 값을 조절하면...더 이쁘게 나오죠
bordercolordark='white' bordercolorlight='black'
2. 얇은 테이블 선을 만드는 다른 방법
<table border=0 cellspacing=1 cellpadding=0 bgcolor="#000000">
<tr bgcolor="#FFFFFF">
<td></td>
</tr>
</table>
3. 셀위로 마우스가 오버했을경우에 색을 변하게 하자.
[안내]태그제한으로등록되지않습니다-onMouseOver=this.style.backgroundColor="#BCBCBC" nMouseOut=this.style.backgroundColor=""
4. 양쪽 세로만 찐허게..
<table width="500" cellspacing="0" cellpadding="4" bordercolor=#999999 frame=vsides><tr><td bgcolor="#efefef" align=center> 출처는 tiptech</td></tr></table>
5. 위아래 가로만 찐허게..
<table width="500" cellspacing="0" cellpadding="4" bordercolor=#999999 frame=hsides><tr><td bgcolor="#efefef" align=center> 출처는 tiptech</td></tr></table>
6. 위아래 가로만 얇게나타나게..
<table border="0" cellpadding="3" cellspacing="0" bgcolor="" width=500 style="border-width:1; border-style:solid; border-top-color:gray; border-right-color:white; border-bottom-color:gray; border-left-color:white;"><tr><td align=center> 출처는 내머리속</td></tr></table>
7. 위아래 가로만 두줄로 얇게 나타나게..
<table width="500" cellspacing="1" cellpadding="4" bordercolor=#999999 frame=hsides><tr><td bgcolor="#efefef" align=center> 출처는 tiptech</td></tr></table>
8. 점선테이블
<table border="0" cellspacing="1" cellpadding="4" background="dot.gif" width="500"><tr><td bgcolor="#FFFFFF" align="center">출처는 ttp://www.neostream.co.kr</td></tr></table>
9. 움직이는 점선테이블
<table border="0" cellspacing="1" cellpadding="4" background="dot-ani.gif" width="500"><tr><td bgcolor="#FFFFFF" align="center">출처는 http://www.neostream.co.kr</td></tr></table>
10. 셀을 버튼으로 활용하자.
<table border="0" cellspacing="1" cellpadding="4" background="dot.gif" width="500"><tr><td bgcolor="#FFFFFF" align="center" [안내]태그제한으로등록되지않습니다-onMouseOver="this.style.background='#eeeeee'; this.style.cursor='hand'" [안내]태그제한으로등록되지않습니다-onMouseOut=this.style.backgroundColor="" 예제는 조기 위에 문서링크 눌러보기^^ http://www.daum.net';">셀을 버튼으로 <font color="#FF0000">go http://www.daum.net</font></td></tr></table>