border-collapse는 테이블 또는 셀의 테두리선 표시방법을 지정하는 속성입니다.

속성값으로는 collapse와 separate를 사용할 수 있습니다.

• collapse : 서로 이웃하는 테이블이나 셀의 테두리선을 겹쳐서 표현 합니다.
• separate : 기본값으로 서로 이웃하는 테이블이나 셀의 테두리선을 분리시켜 표현 합니다.

<table width="90%" cellpadding="5" cellspacing="0" border="1" align="center" style="border-collapse:collapse; border:1px gray solid;"> <tr> <td>border-collapse:collapse;</td> </tr> </table>

 

위와 같이 border-collapse 속성갑을 collapse로 지정하고 border 속성을 추가적으로 지정하면 아래와 같이 깔끔한 테이블을 출력할 수 있습니다.

border-collapse:collapse;

 

border-collapse 속성은 테두리선의 표시방법만 지정하므로 반드시 border 속성으로 구체적인 테두리선의 스타일을 지정해 주어야 합니다.

테이블의 셀이 많을때는 IE와 Firefox에서 조금 다른 모습으로 출력됩니다. IE에서는 추가적으로 TD element에 border 속성을 추가적으로 지정하면 됩니다.

<table width="90%" cellpadding="5" cellspacing="0" border="1" align="center" style="border-collapse:collapse; border:1px gray solid;"> <tr> <td style="border:1px gray solid;">HTML</td> <td style="border:1px gray solid;">Hypertext Markup Language</td> </tr> <tr> <td style="border:1px gray solid;">CSS</td> <td style="border:1px gray solid;">Cascading Style Sheet</td> </tr> </table>

 

HTML Hypertext Markup Language CSS Cascading Style Sheet