 테이블 |
 border-collaspe
border-collaspe 속성은 셀 외곽선의 표시 형식을 설정하는 속성으로 인접한 외곽선들을 중복하여 표시하는 형식과 간격을 두고 각각 표시하는 형식이 있습니다.
| collapse | 테이블 전체의 주변 외곽선이나 각 셀의 외곽선을 그 경계에 중복하여 표시합니다. 너비나 형식이 다른 외곽선이 중복된 경우 표시되는 우선순위는 다음과 같습니다.
☞ border-style 속성값이 hidden 으로 설정되어 있는 외곽선이 있으면 그것이 최우선이 되고 다음에 다른것 보다 넓은 외곽선이 있으면 그것이 표시됩니다.
☞ 너비가 같은 경우에는 그 형식이 double, solid, dashed, dotted, ridge, outset, groove, inset 순서로 표시됩니다.
☞ 색만 다른 경우에는 셀, 가로열, 가로열 그룹, 세로열, 세로열 그룹, 테이블 순서로 표시됩니다. |
| separate | 테이블 전체의 주변 외곽선과 각 셀의 외곽선을 각각 표시합니다. 가로열, 가로열 그룹, 세로열, 세로열 그룹에 대해서는 외곽선 표시되지 않으며 table 요소에 대해서 배경이 지정되어 있는 경우에는 각 셀의 외곽선과 외곽선 사이의 공간 부분에 적용됩니다. |
|
| [예] | [소스] |
| <html>
<head>
<style type="text/css"><!--
table {border: solid 4px #000000; margin-bottom:20px}
table#sample1 { border-collapse:collapse }
table#sample2 { border-collapse:separate }
th,td { border:solid 2px #000000; padding:1em }
caption { color:#ff6600; background-color:#fffff; font-size:large}
--></style>
</head>
<body>
<table id=sample1>
<caption>collapse</caption>
<tr><th>th</th><th>th</th></tr>
<tr><td>td</td><td>td</td></tr>
</table>
<table id=sample2>
<caption>separate</caption> <tr><th>th</th><th>th</th></tr>
<tr><td>td</td><td>td</td></tr>
</table>
</body>
</html> |
|
border-spacing
border-spacing 속성은 border-collapse 속성값이 [seperate]로 설정되어 있는 경우 인접하는 각 셀의 외곽선과 외곽선 사이의 간격을 설정하는 속성입니다. 값은 공백으로 구별하여 2개를 지정할 수도 있지만 지정한 수에 따라서 다음과 같이 적용됩니다.
| 값이 1개인 경우 | 값1(상하좌우 간격) |
| 값이 2개인 경우 | 값1(좌우 간격) 값2(상하 간격) |
|
| [예] | [소스] |
| <html>
<head>
<style type="text/css"><!--
table{border:solid 4px #ff6600 separate; border-collapse:separate; border-spacing:15px}
th,td{border:solid 2px #ff6600 ; padding:1em}
--></style>
</head>
<body>
<table>
<tr><th>th</th><th>th</th></tr>
<tr><td>td</td><td>td</td></tr>
</table>
</body>
</html> |
|
empty-cells
이 속성은 border-collapsed 속성값이 [seperate] 로 설정되어 있는 경우 빈 셀의 외곽선을 표시잘 할지를 설정하는 속성이니다.
| show | 빈 셀에 대해서도 보통 셀과 같은 외곽선을 표시합니다. |
| hide | 빈 셀에 대해서는 외곽선을 표시하지 않습니다. |
|
| [예] | [소스] |
| <html>
<head>
<style type="text/css"><!--
table { border:solid 5px #000000; border-collapse: separate; border-spacing:6px}
th,td { border:solid 2px #000000; padding:1em}
.hide { empty-cells:hide}
.show { empty-cells:show; border-color:#ff6600}
-->t;</style>
</head>
<body>
<table>
<tr> <th>hide</th> <th class=hide></th> </tr>
<tr> <td class=show>.</td> <td>show</td> </tr>
</table>
</body>
</html> |
caption-side
이 속성은 표의 캡션 위치를 설정하는 속성입니다. 태그 아시지요. <caption> 는 html 태그에서 나오는 표의 제목을 달아주는 태그입니다. ^^;
| top | 캡션을 테이블 위에 표시합니다. |
| bottom | 캡션을 테이블 아래에 표시합니다. |
| left | 캡션을 테이블 왼쪽에 표시합니다. |
| right | 캡션을 테이블 오른쪽에 표시합니다. |
|
댓글 없음:
댓글 쓰기