Reference/CSS

border-collapse 속성은 표의 테두리 분리 여부를 설정합니다.

by @webs 2022. 12. 7.

border-collapse

테이블은 테이터를 포함하는 셀의 행과 열로 구성된 정보표입니다. 예전에는 테이블을 이용해서 레이아웃을 표현한 적도 있지만, 웹표준을 준수해야 하는 현재는 테이블을 이용해서 레이아웃을 만드는 것은 적절하지 않습니다. 테이블을 쓰기 위해서는 즉 표를 만들기 위해서는 제목, 설명, 셀, 셀합치기, 표 구조, 셀 그룹 등 여러가지를 신경써야 합니다.

테이블은 제목을 표시하기 위해 <caption>을 사용하고, 셀 요소를 그룹화하기 위해 <colgroup>과 <col>을 사용합니다. 테이블 전체 구조를 분리하기 위해 <thead>, <tbody>, <tfoot>를 사용하며, 행과 열을 나타내는 <tr>, <td>, <th> 등을 사용합니다. 여기에 접근성을 위해 scope 속성을 사용하고 셀의 병합을 위해 colspan과 rowspan을 사용하게 됩니다.

특징	설명
기본값	border-collapse : separate
적용	table
버전	CSS2
사용성	★★★★☆

정의(Definition)

border-collapse 속성은 표의 테두리 분리 여부를 설정합니다.

표와 관련된 속성 및 태그

border-collapse 속성은 표의 테두리 분리 여부를 설정합니다.
border-spacing 속성은 표의 테두리 간격을 설정합니다.
<table> 태그는 표를 설정합니다.
<thead> 태그는 표의 헤더 영역 그룹을 설정합니다.
<tbody> 태그는 표의 본문 영역 그룹을 설정합니다.
<tfoot> 태그는 표의 푸터 영역 그룹을 설정합니다.
<caption> 태그는 표의 제목을 설정합니다.
<colgroup> 태그는 표의 열을 묶는 그룹을 설정합니다.
<col> 태그는 <colgroup> 요소에 속하는 각 열의 속성을 설정합니다.
<tr> 태그는 표의 행을 설정합니다.
<td> 태그는 표의 열(셀)을 설정합니다.
<th> 태그는 행이나 열에 타이틀을 설정합니다.

문법(Syntax)

border-collapse : collapse | separate

/* 기본 속성 */
border-collapse : collapse;
border-collapse : separate;

/* 전역 속성 */
border-collapse : inherit;   /* 상속 */
border-collapse : initial;   /* 초기화 */
border-collapse : revert;    /* 원래대로 돌리기 */
border-collapse : unset;     /* 설정 해제 */

속성(Property)

속성값	값(예)	설명
separate	border-collapse: separate;	테이블의 보더 간격을 분리합니다.(기본값)
collapse	border-collapse: collapse;	테이블의 보더 간격을 합칩니다.

예제1(Sample)

테이블 기본 예제입니다.

표 제목 설정
제목1	제목2	제목3	제목4
내용1	내용1	내용1	내용1
내용2	내용2	내용2	내용2
내용3	내용3	내용3	내용3
내용4	내용4	내용4	내용4
푸터1	푸터1	푸터1	푸터1

border-collapse: separate; border-collapse: collapse;

HTML

CSS

SCRIPT

<div class="table-box">
    <table>
        <caption>표 제목 설정</caption>
        <thead>
            <tr>
                <th>표 제목1</th>
                <th>표 제목2</th>
                <th>표 제목3</th>
                <th>표 제목4</th>
                <th>표 제목5</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>표 내용1</td>
                <td>표 내용1</td>
                <td>표 내용1</td>
                <td>표 내용1</td>
                <td>표 내용1</td>
            </tr>
            <tr>
                <td>표 내용2</td>
                <td>표 내용2</td>
                <td>표 내용2</td>
                <td>표 내용2</td>
                <td>표 내용2</td>
            </tr>
            <tr>
                <td>표 내용3</td>
                <td>표 내용3</td>
                <td>표 내용3</td>
                <td>표 내용3</td>
                <td>표 내용3</td>
            </tr>
            <tr>
                <td>표 내용4</td>
                <td>표 내용4</td>
                <td>표 내용4</td>
                <td>표 내용4</td>
                <td>표 내용4</td>
            </tr>
            <tr>
                <td>표 내용5</td>
                <td>표 내용5</td>
                <td>표 내용5</td>
                <td>표 내용5</td>
                <td>표 내용5</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td>푸터1</td>
                <td>푸터1</td>
                <td>푸터1</td>
                <td>푸터1</td>
                <td>푸터1</td>
            </tr>
        </tfoot>
    </table>
</div>

.table-box table {
    width: 100%;
    border-spacing: 2px;
}
.table-box table th {
    background: #eef6ff;
    font-weight: normal;
}
.table-box table th, 
.table-box table td {
    border: 1px solid #ccc;
    padding: 10px;
    color: #666;
    text-align: center;
}
.table-box table tfoot td {
    background: #ffeded;
}