[HTML] 디자인 테이블 소스

2012. 4. 25. 12:39NOTE/IT

bordercolorlight 에는 그림자 부분 색상을 
bordercolordark 에는 밝은 부분 색상을 집어 넣어주시면 됩니다. 
아래 예에서 보시면 입체 테이블은 바로
bordercolorlight, bordercolordark, bgcolor
이 세가지 색상을 어떻게 지정해주느냐에 따라 변한답니다. ^^* 
잘 응용해보시구요 ^^*

참고로 테이블의 bordercolor=white로 설정해주시면 훨씬 깔끔한 테이블이 된답니다.


소스 내용  

☞ 입체 테이블 [orange]
<table border=1 bordercolor=white cellpadding=10 cellspacing=5 bgcolor=#FF8A19>
<tr>
<td width=200 height=35 bordercolorlight=#813E00 bordercolordark=#FFFDFA align=center style="color:#FFFFFF
;">▒<b> 입체 테이블</b> ▒ [orange]</td></tr>
<tr><td bgcolor=white height=150 style="line-height:20px;color:#FF8A19;">
입체테이블 <br>
bordercolordark 와 bordercolorlight에<br>
각각 색상을 집어 넣어주면 <br>
간단한 입체 테이블 완성 ^^*<br>
테이블의 bordercolor는 <br>
white로 해주면 더욱 깔끔합니다 ^^*
</td></tr></table>



☞ 입체 테이블 [green]
<table border=1 bordercolor=white cellpadding=10 cellspacing=5 bgcolor=#52A34C>
<tr>
<td width=200 height=35 bordercolorlight=#065400 bordercolordark=#F7FAF6 align=center style="color:#FFFFFF
;">▒<b> 입체 테이블</b> ▒ [green]</td></tr>
<tr><td bgcolor=white height=150 style="line-height:20px;color:#087B00;">
입체테이블 <br>
bordercolordark 와 bordercolorlight에<br>
각각 색상을 집어 넣어주면 <br>
간단한 입체 테이블 완성 ^^*<br>
테이블의 bordercolor는 <br>
white로 해주면 더욱 깔끔합니다 ^^*
</td></tr></table>



☞ 입체 테이블 [blue]
<table border=1 bordercolor=white cellpadding=10 cellspacing=5 bgcolor=#0060FF>
<tr>
<td width=200 height=35 bordercolorlight=#001F53 bordercolordark=#F7FAFF align=center style="color:#FFFFFF
;">▒<b> 입체 테이블</b> ▒ [blue]</td></tr>
<tr><td bgcolor=white height=150 style="line-height:20px;color:#0060FF;">
입체테이블 <br>
bordercolordark 와 bordercolorlight에<br>
각각 색상을 집어 넣어주면 <br>
간단한 입체 테이블 완성 ^^*<br>
테이블의 bordercolor는 <br>
white로 해주면 더욱 깔끔합니다 ^^*
</td></tr></table>



☞ 입체 테이블 [pink]
<table border=1 bordercolor=white cellpadding=10 cellspacing=5 bgcolor=#FF00F6>
<tr>
<td width=200 height=35 bordercolorlight=#590054 bordercolordark=#FFF6FE align=center style="color:#FFFFFF
;">▒<b> 입체 테이블</b> ▒ [pink]</td></tr>
<tr><td bgcolor=white height=150 style="line-height:20px;color:#FF00F6;">
입체테이블 <br>
bordercolordark 와 bordercolorlight에<br>
각각 색상을 집어 넣어주면 <br>
간단한 입체 테이블 완성 ^^*<br>
테이블의 bordercolor는 <br>
white로 해주면 더욱 깔끔합니다 ^^*
</td></tr></table>



☞ 입체 테이블 [pastel #1]
<table border=1 bordercolor=white cellpadding=10 cellspacing=5 bgcolor=#C8BCDD>
<tr>
<td width=200 height=35 bordercolorlight=#382060 bordercolordark=#FAFAFC align=center style="color:#FFFFFF
;">▒<b> 입체 테이블</b> ▒ [pastel #1]</td></tr>
<tr><td bgcolor=white height=150 style="line-height:20px;color:#C8BCDD;">
입체테이블 <br>
bordercolordark 와 bordercolorlight에<br>
각각 색상을 집어 넣어주면 <br>
간단한 입체 테이블 완성 ^^*<br>
테이블의 bordercolor는 <br>
white로 해주면 더욱 깔끔합니다 ^^*
</td></tr></table>




☞ 입체 테이블 [pastel #2]
<table border=1 bordercolor=white cellpadding=10 cellspacing=5 bgcolor=#B2B2DF>
<tr>
<td width=200 height=35 bordercolorlight=#2A2A81 bordercolordark=#F8F8FC align=center style="color:#FFFFFF
;">▒<b> 입체 테이블</b> ▒ [pastel #2]</td></tr>
<tr><td bgcolor=white height=150 style="line-height:20px;color:#B2B2DF;">
입체테이블 <br>
bordercolordark 와 bordercolorlight에<br>
각각 색상을 집어 넣어주면 <br>
간단한 입체 테이블 완성 ^^*<br>
테이블의 bordercolor는 <br>
white로 해주면 더욱 깔끔합니다 ^^*
</td></tr></table>



☞ 입체 테이블 [pastel #3]
<table border=1 bordercolor=white cellpadding=10 cellspacing=5 bgcolor=#9DB0B2>
<tr>
<td width=200 height=35 bordercolorlight=#2A2A81 bordercolordark=#F1F3F3 align=center style="color:#FFFFFF
;">▒<b> 입체 테이블</b> ▒ [pastel #3]</td></tr>
<tr><td bgcolor=white height=150 style="line-height:20px;color:#9DB0B2;">
입체테이블 <br>
bordercolordark 와 bordercolorlight에<br>
각각 색상을 집어 넣어주면 <br>
간단한 입체 테이블 완성 ^^*<br>
테이블의 bordercolor는 <br>
white로 해주면 더욱 깔끔합니다 ^^*
</td></tr></table>



☞ 입체 테이블 [pastel #4]
<table border=1 bordercolor=white cellpadding=10 cellspacing=5 bgcolor=#DEAA9E>
<tr>
<td width=200 height=35 bordercolorlight=#2A2A81 bordercolordark=#FEFCFC align=center style="color:#FFFFFF
;">▒<b> 입체 테이블</b> ▒ [pastel #4]</td></tr>
<tr><td bgcolor=white height=150 style="line-height:20px;color:#DEAA9E;">
입체테이블 <br>
bordercolordark 와 bordercolorlight에<br>
각각 색상을 집어 넣어주면 <br>
간단한 입체 테이블 완성 ^^*<br>
테이블의 bordercolor는 <br>
white로 해주면 더욱 깔끔합니다 ^^*
</td></tr></table>


http://otti.com.ne.kr/otti02/sam08.html

'NOTE > IT' 카테고리의 다른 글

[PHP]파일 업로드 예제(Class 활용)  (0) 2012.04.25
[PHP] 기초 문법 정리  (0) 2012.04.25
엑셀(EXCEL) 메크로  (0) 2012.04.25
자바스크립트  (0) 2012.04.25
오라클 함수 모음  (0) 2012.04.25