테이블(table)와 관련된 스타일 시트
작성자 : 단국강토
등록날짜 : 2009.02.16 11:25
table border 1px로 표현하기
▶ table border 다양한게 표현하기
▶ table에 링크걸기
▶ table에 마우스 오버시 색바꾸기
▶ table을 스타일시트로 제어하기
▶ table로 아이프레임 효과만들기
<html> <head> <title>..</title> </head> <body> <table border="1" widht=200 height=200 style="border-collapse:collapse;"> <tr> <td>스타일이 적용됩니다. </td> </tr> </table> </body> </html> |
▶ table border 다양한게 표현하기
<html> <head> <title>..</title> </head> <body> 점선으로 표현 <table border="0" widht=20 height=20 style="border-width:1; border-color:#777777; border-style:dotted;"> <tr><td>점선으로</td> </tr> </table> 스티치선으로 표현 <table border="0" widht=20 height=20 style="border-width:1; border-color:#777777; border-style:dashed;"> <tr><td>스티치선으로</td> </tr> </table> 액자처럼으로 표현 <table border="0" widht=20 height=20 style="border-width:1; border-color:#777777; border-style:ridge;"> <tr><td>액자처럼</td> </tr> </table> 두가지 선으로 표현 <table border="0" widht=20 height=20 style="border-width:1; border-color:#777777; border-style:double;"> <tr><td>두가지 선섬으로</td> </tr> </table> </body> </html> |
▶ table에 링크걸기
<html> <head> <title>..</title> </head> <body> <table width=100 height=100 > <tr> <td style=cursor:hand; onClick="location.href='링크주소" onMouseOver="window.status='링크주소'" onMouseOut="window.status=''">링크 </td> </tr> </table> </body> </html> |
▶ table에 마우스 오버시 색바꾸기
<html> <head> <title>..</title> </head> <body> <table width=100 height=100 > <tr bgcolor="#FFFFFF" onMouseOver="this.style.backgroundColor='#EEF1F6'" onMouseOut="this.style.backgroundColor='#FFFFFF'"> <td>스타일이 적용됩니다. </td> </tr> </table> </body> </html> |
▶ table을 스타일시트로 제어하기
<html> <head> <title>..</title> <style type="text/css"> .table1 { border-top:solid 1px gray; border-right:solid 1px gray; border-left:solid 1px gray; border-left:solid 1px gray; border-bottom:solid 1px gray; BACKGROUND-COLOR: green; font-size : 9pt; font-family : "돋움", "Arial", "sans-serif"; COLOR: #ffffff; } </style> </head> <body> <table width=100 height=100 class="table1"> <tr> <td>스타일이 적용됩니다. </td> </tr> </table> </body> </html> |
▶ table로 아이프레임 효과만들기
<html> <head> <title>.. </title> <style type="text/css"> <!-- body,td {font-family:"굴림"; font-size: 9pt} #scrollbox {width:400; height:100; overflow:auto; padding:10px; border:1; border-style:solid; border-color:black} --> </style> </head> <body bgcolor="#FFFFFF"> <table width=400 height=100 border="0" cellspacing="0" cellpadding="0"> <tr> <td> <DIV id="scrollbox"> 모든사람이 나를 에워싸고 조여들며<br> 세상이 마치 작은 새장처럼 보일때<br> 좀 더 자라도록 <br> 내게 여유를 주십시오.<br> 내 주변세계가 <br> 나에게 변치말고 그냥 있으라고 할때<br> 좀 더 자라도록 <br> 내게 여유를 주십시오.<br> 당신이 가지고 있는 <br> 나에 대한 이미지에서 풀어주시어<br> 좀 더 자라도록 <br> 내게 여유를 주십시오.<br> 내안에 깊이 자리잡은 <br> 내모습 그대로 자랄수 있도록 <br> 좀 더 여유를 주십시오.<br> </DIV> </td> </tr> </table> </body> </html> |
"쇼핑몰·홈페이지·오픈마켓
블로그·페이스북·이메일 등의 각종 마케팅 글쓰기, 각종 광고, 영업, 판매, 제안서, 전단지 반응율 3배×10배 이상 높이는 마법의 8단계 공식" |
☞자세히보기 |
|
|