CSS border-collapse

**border-collapse**는 CSS 속성으로, HTML 테이블 요소에서 인접한 셀들의 테두리를 어떻게 처리할지 결정하는 데 사용됩니다. 이 속성은 특히 테이블을 더 깔끔하게 표현하고, 셀 간의 경계를 관리하기 위해 사용됩니다.

border-collapse 속성의 역할

border-collapse는 테이블의 셀 테두리를 결합할지(collapse) 또는 분리할지(separate)를 설정합니다.

사용 가능한 값

1. collapse (기본값 없음, 대부분의 브라우저에서 초기값으로 설정됨)

   • 역할: 테이블 셀의 테두리를 결합하여 단일 테두리로 표시합니다.
   • 효과:
     • 인접한 셀 간의 테두리가 하나로 합쳐집니다.
     • 셀과 셀 사이에 공백이 사라집니다.
   • 예시:

     table {
         border-collapse: collapse;
     }

   • 결과: 모든 셀의 테두리가 하나로 합쳐져 깔끔하게 표시됩니다. 각 셀의 테두리 두께가 두 배로 합쳐지지 않고, 하나의 선으로만 그려집니다.

2. separate (기본값)

   • 역할: 테이블 셀의 테두리를 분리하여 각 셀이 독립적인 테두리를 갖도록 합니다.
   • 효과:
     • 인접한 셀 간의 테두리가 분리되어 표시됩니다.
     • 셀과 셀 사이에 공백이 생깁니다. 이 공백은 border-spacing 속성을 사용하여 조정할 수 있습니다.
   • 예시:

     table {
         border-collapse: separate;
         border-spacing: 5px; /* 셀 간의 간격 조정 */
     }

   • 결과: 각 셀이 독립적인 테두리를 가지며, 셀 사이에 설정된 간격이 생깁니다.

예제 코드

HTML

<table>
    <tr>
        <td>Cell 1</td>
        <td>Cell 2</td>
    </tr>
    <tr>
        <td>Cell 3</td>
        <td>Cell 4</td>
    </tr>
</table>

CSS

1. border-collapse: collapse 사용 예시

    table {
        border-collapse: collapse;
        border: 2px solid black;
    }
    td {
        border: 2px solid black;
        padding: 10px;
    }

   • 결과: 테이블의 모든 셀이 단일 테두리로 결합되어 깔끔하게 보입니다.

2. border-collapse: separate 사용 예시

    table {
        border-collapse: separate;
        border-spacing: 5px; /* 셀 간의 간격 */
        border: 2px solid black;
    }
    td {
        border: 2px solid black;
        padding: 10px;
    }

   • 결과: 각 셀의 테두리가 개별적으로 보이며, 셀 간에 설정된 간격이 생깁니다.

요약

• border-collapse: collapse: 테이블 셀의 테두리를 하나로 합쳐서 깔끔하게 보이게 합니다.
• border-collapse: separate: 각 셀이 독립적인 테두리를 가지며, 셀 간에 공백을 둘 수 있습니다(border-spacing으로 조정).

이 속성을 사용하여 테이블의 스타일을 더 직관적이고 깔끔하게 만들 수 있습니다.