table borders collapse

border-collapse 속성은 테이블 테두리를 단일 테두리로 축소해야 하는지 여부를 설정합니다.

border-collapse:collapse;

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

> 흰 테두리 보임

border-collapse: collapse; 스타일은 HTML에서 테이블의 테두리를 설정할 때 사용됩니다. 이 속성은 테이블의 셀 테두리가 서로 분리되는 것이 아니라 하나로 합쳐지게 만드는 역할을 합니다. 예를 들어, 각 셀에 별도의 테두리가 있을 때 border-collapse: collapse; 속성을 적용하면 인접한 셀 사이의 테두리가 중복되어 두꺼워지는 것을 방지하고, 더 깔끔하고 일체감 있는 디자인을 만들 수 있습니다.

기본값은 border-collapse: separate;로, 셀의 테두리가 각각 독립적으로 표시됩니다. collapse 값으로 설정하면 테두리가 하나로 합쳐져 테이블 전체의 일관성을 높이며, 테두리가 중복되지 않아 전체적으로 더 단정하게 보이게 됩니다.

간단한 예시로, 테이블에 이 속성을 적용했을 때의 차이를 보여주는 HTML 코드는 다음과 같습니다:

예제1

예제2

예제3