스타일시트 예제
▶ table border 1px로 표현하기
<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>
아래는 관련 댓글들입니다. 댓글수: 0
