【CSS/table】테이블 보더(table border)의 속성～ border-collapse

인접한 테이블 셀의 테두리선을 표시하는 방법을 지정합니다.

속성 값(Value)

collapse	셀의 테두리 선 간격을 벌려 표시합니다. 초기 값입니다.
separate	셀 테두리를 겹쳐서 표시합니다.

border-collapse:separate;

<head>
 <style type="test/css">
.separate{
border-collapse: separate;
border-spacing: 3px;
border: 1px solid #ccc;
margin-left:10px;
}
.separate th{
width: 30%;
padding: 5px;
background-color: #ccc;
border: 1px solid #ccc;
}
.separate td{
padding: 5px;
background-color: #fafafa;
border: 1px solid #ccc;
}
 </style>
</head>

<body>
 <table class="separate">
 <tr><th>Age</th><td>28</td></tr>
 <tr><th>height</th><td>172cm</td></tr>
 </table>
</body>

스폰서 링크

border-spacing;

셀 테두리와 테두리의 간격(거리)을 지정하는 속성입니다. "separate" 값이 지정되어 있을 때만 유효합니다. 초기 값은 "0" 입니다.

▼　결과, 아래와 같이 표시됩니다.

border-collapse:separate;

Age	28
height	172cm

border-collapse:collapse;

 <head>
 <style type="test/css">
.collapse{
border-collapse: collapse;
border: 1px solid #ccc;
margin-left:10px;
}
.collapse th{
width: 30%;
padding: 5px;
background-color: #d8f550;
border: 1px solid #ccc;
}
.collapse td{
padding: 5px;
background-color: #fafafa;
border: 1px solid #ccc;
}
 </style>
 </head>

<body>
 <table class="collapse">
 <tr><th>Age</th><td>28</td></tr>
 <tr><th>height</th><td>172cm</td></tr>
 </table>
</body>

▼　결과, 아래와 같이 표시되어집니다.

border-collapse:collapse;

Age	28
Height	172cm