완성된 효과는 다음과 같습니다.
2. 테이블의 dark border(bordercolordark) 및 light border(bordercolorlight) 속성을 사용하여 가는 선 테이블을 만듭니다.
또는 Ctrl+Alt+T를 눌러 테이블을 삽입하고 대화 상자에 표시된 대로 설정합니다(빨간색 상자가 있는 항목은 고정되어 있으며 그렇지 않으면 아무런 효과가 없습니다).
테이블을 선택한 후 F9를 눌러 "Tag Inspector" 패널 그룹을 확장하고 아래와 같이 "속성" 패널에서 설정을 지정합니다.
완료되면 다음과 같습니다.
3. 표의 CSS 속성 border-collapse를 축소로 설정합니다. Ctrl+Alt+T를 눌러 표를 삽입하는 대화 상자 설정은 방법 2와 동일합니다. 표를 선택하고 속성 패널에서 표의 테두리 색상을 설정합니다.
F9를 눌러 "Tag Inspector" 패널을 확장하고 "Attributes" 패널의 "style"에 "border-collapse:collapse;"를 입력합니다.
완료되면 다음과 같습니다.
참고: 방법 3으로 만든 얇은 선 테이블은 IE5+에만 적합합니다. 가장 호환되는 방법은 방법 1입니다. 방법 2는 엄밀한 의미에서 얇은 선 테이블이 아닙니다.
팁: 방법 1에서는 CSS를 사용하여 테이블 셀의 배경색을 정의하여 코드 양을 줄일 수 있습니다.
<스타일>
.얇다{배경:#000000}
.얇은 td{배경:#FFFFFF}
</style>
<table width="200" border="0" cellpacing="1" cellpadding="0" class="thin">
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>