[기초 잊지말자]테이블 border 두줄, 두겹 나오는 현상

안녕하세요.

오랜만에 web, html, css관련 포스팅을합니다.

사실 css 사용법은 외우면 참 좋지만...

제 기억력이 딸려서 거의 항상 검색해보곤 하네요.

그렇게 사용하던 css 이더라도 기초는 알아야 검색하는데도 좋습니다.

제가 이번에 간과하게된...테이블 border!

간단하게 text에서 코딩할 일이 있어 무심코 코딩하였습니다.

<style type="text/css">

table, th, td {

    border: 1px solid black;

}

</style>

<table>

<tr>

<td colspan="2" >Menu</td>

<td >contents</td>

  <td >one</td>

<td >two</td>

</tr>

<tr >

<td colspan="2" >1111</td>

<td >222</td>

<td >333</td>

<td >4444</td>

</tr>

      </table>

테이블에 border를 주고자 막 코딩한 결과....

테이블 줄이 2줄이 나와서 당황했습니다.

그래서 ....약간 당황했습니다.

border가 한줄로 나오기위해서 다음처럼 css를 추가해줍니다.

<style type="text/css">

table, th, td {

    border: 1px solid black;

}

table {

    border-collapse: collapse;

}

</style>

결과는 1줄로 제대로 나왔습니다.

collapse 속성 간단히 소개하겠습니다.

collapse : 서로 이웃하는 테이블이나 셀의 테두리선을 겹쳐서 표현 합니다.

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

간단한 내용이지만 모르면 당황스럽습니다.

즐거운 하루 보내세요.