위의 이미지는 테이블의 border를 스타일시트를 이용해서 가늘게 보이게 한 화면 입니다.

소스는 다음과 같습니다. ^^

붉은 글씨를 유의해서 살펴보세요.

== source ===================================================

<table border="1" cellpadding="0" cellspacing="0" bordercolor="#000000" style="border-collapse:collapse">
 <tr>
  <td width="50" height="25"> ^^</td>
  <td width="150"> my nick name is dazzi</td>
 </tr>
 <tr>
  <td width="50" height="25"> ^0^</td>
  <td width="150"> It's wonderful day!</td>
 </tr>
</table>

===========================================================

※ border-collapse

테이블 또는 셀의 테두리선 표시방법을 지정하는 스타일시트

 1. 옵션

    1) border-collapse:collapse ;

    서로 이웃하는 테이블이나, 셀의 테두리선을 겹쳐서 표현한다.

    2) border-collapse:separate;

    서로 이웃하는 테이블이나, 셀의 테두리선을 분리시켜 표현한다.

 2. border-collapse:collapse;로 지정된 경우 테두리가 겹쳤을 때 나타나는 테두리의 순서는 다음과 같다

    1) border-style:hidden;이 지정된 것이 가장 우선된다.

    2) border-style:none;이 지정된 것이 우선순위가 가장 낮다.

    3) hidden과 none이외의 값이 지정되어 있는 경우는 폭이 두꺼운 테두리선이 우선순위로 나타나게 된다.

    4) 굵기가 같은 경우 테두리선의 종류에 따라 아래와 같은 우선순위를 가지게 된다.

    double > solid > dashed > dotted > ridge > autoset > groove > inset

    5) 굵기가 같고, 테두리 종류가 동일하고 색상만(border-color) 다른 경우 아래의 순서로 우선순위를 가지게 된다.

    th요소 > td요소 > tr요소 > thead요소, tbody요소, tfoot요소 > col요소 > colgroup요소 > table요소

* 클래스로 맹글어서 써먹기

.boardList01    { border-collapse:collapse; border-color:red; border-style:solid; }
.boardList01 td { border-color:red; }