페이지를 제작하다 보면 테이블에 선 스타일을 주고 싶을 때가 있다.
이곳 저곳 찾아보다가 정리하게 된다.
참고하고자 할때 도움이 될듯.
1) 선의 모양(border-style)
<html>
<head>
</head>
<body>
<table style="border-style:groove" width=400>
<tr>
<td align="center">
style="border-style:groove"
</td>
</tr>
</table>
<br>
<table style="border-style:solid" width=400>
<tr>
<td align="center">
style="border-style:solid"
</td>
</tr>
</table>
<br>
<table style="border-style:double" width=400>
<tr>
<td align="center">
style="border-style:double"
</td>
</tr>
</table>
<br>
<table style="border-style:dashed" width=400>
<tr>
<td align="center">
style="border-style:dashed"
</td>
</tr>
</table>
<br>
<table style="border-style:dotted" width=400>
<tr>
<td align="center">
style="border-style:dotted"
</td>
</tr>
</table>
<br>
<table style="border-style:ridge" width=400>
<tr>
<td align="center">
style="border-style:ridge"
</td>
</tr>
</table>
<br>
<table style="border-style:inset" width=400>
<tr>
<td align="center">
style="border-style:inset"
</td>
</tr>
</table>
<br>
<table style="border-style:outset" width=400>
<tr>
<td align="center">
style="border-style:outset"
</td>
</tr>
</table>
<br>
<table style="border-style:hidden" width=400>
<tr>
<td align="center">
style="border-style:hidden"
</td>
</tr>
</table>
<br>
</body>
</html>
2) 선을 단선으로 하는 border-collapse 지정
collapse : 서로 이웃하는 테이블이나 셀의 테투리선 겹쳐서 표현
separate : 기본값으로 서로 이웃하는 테이블이나 셀의 테두리선 분리시켜 표현
<html>
<head>
<style type"text/css">
table, td{
border: 1px solid green;
}
</style>
</head>
<body>
<table style="border-style:solid;border-collapse:collapse" width=400>
<tr border="1">
<td border="1" align="center">
style="border-collapse:collapse"
</td>
</tr>
</table>
<br>
<table style="border-style:solid;border-collapse:separate" width=400>
<tr border="1">
<td border="1" align="center">
style="border-collapse:separate"
</td>
</tr>
</table>
<br>
</body>
</html>
'web > html' 카테고리의 다른 글
| html 띄어쓰기 표현( 스페이스 표현 ) nbsp; ensp; emsp; (2) | 2014.06.12 |
|---|---|
| [HTML Number] " " 따옴표( double quotes ) (0) | 2014.05.22 |
