• WIN11
  • WIN10
  • TIPs
  • EXCEL
  • MAIL
  • CSS
  • HTML

【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;
Age28
height172cm

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;

Age28
Height172cm

관련 기사

table 요소의 기본적 구성 테이블 보더(table border)의 속성

스폰서 링크

스폰서 링크

Category

 Windows 11  Windows 10  컴퓨터 Tips  CSS  HTML  엑셀(EXCEL)  메일(MAIL)

TABMODE Copyright©All rights reserved