[CSS] 테이블 셀 여백/간격 (table border, border-collapse)

 

 

 

<table border="0" cellpadding="0" cellspacing="0">

 

예전에는 테이블을 만들 때 셀의 여백(cellpadding)이나 간격(cellspacing)을 표현하기 위해 위와 같이 HTML로 작성했었으나,

요즘(HTML5)은 아래와 같이 CSS로 대체하여 값을 적용합니다.

 

border-collapse: separate; /* 기본값, 셀의 여백을 만들고 각 셀마다 테두리를 표시함 */
border-collapse: collapse; /* 셀의 여백을 없애고 테두리를 하나로 합쳐줌 */
border-collapse: initial;  /* 이 속성을 기본값으로 설정함 */
border-collapse: inherit;  /* 부모의 속성을 상속 받음*/

 

셀의 여백을 만들기 위해  border-collapse: separate 를 사용할 경우에는 아래와 같이  border-spacing  속성 값으로 셀 간격의 크기를 지정해주면 됩니다.

 

border-collapse: separate;
border-spacing: 1px;