border-spacing 속성

border-spacing 속성은 HTML 테이블의 td 셀 또는 th 셀 사이의 간격(그리고 셀 경계와 테이블 자체 사이의 간격)을 설정합니다. 속성 값으로는 백분율을 제외한 모든 크기 단위를 사용할 수 있습니다.

구문

선택자 {
	border-spacing: 하나 또는 두 개의 값;
}

값

값	설명
하나의 값	하나의 값은 셀 사이의 수평 및 수직 간격을 동일하게 설정합니다.
두 개의 값	첫 번째 값은 수평 간격을 설정하고, 두 번째 값은 수직 간격을 설정합니다.

기본값: 0. 그러나, 각 브라우저는 cellspacing 속성의 기본값이 0이 아니므로, 기본적으로 셀 사이에 간격이 보입니다.

참고 사항

이 속성은 테이블의 셀이 아닌 테이블 자체에 적용하세요 (셀에 적용하면 작동하지 않습니다).

margin을 사용해서는 동일한 효과를 얻을 수 없습니다. 왜냐하면 테이블 셀의 margin은 작동하지 않기 때문입니다.

border-collapse 속성이 collapse 값으로 설정되어 있으면 - border-spacing은 작동하지 않습니다.

예제 . 하나의 값

셀 사이(및 셀과 테이블 경계 사이)의 간격을 10px로 만들어 봅시다:

<table>
	<tr>
		<td>1</td>
		<td>2</td>
		<td>3</td>
	</tr>
	<tr>
		<td>4</td>
		<td>5</td>
		<td>6</td>
	</tr>
	<tr>
		<td>7</td>
		<td>8</td>
		<td>9</td>
	</tr>
</table>

table {
	border-spacing: 10px;
	border-collapse: separate;
	width: 400px;
	border: 1px solid red;
}
td {
	border: 1px solid red;
	text-align: center;
}

예제 . 두 개의 값

이제 수평 간격을 10px, 수직 간격을 30px로 만들어 봅시다:

<table>
	<tr>
		<td>1</td>
		<td>2</td>
		<td>3</td>
	</tr>
	<tr>
		<td>4</td>
		<td>5</td>
		<td>6</td>
	</tr>
	<tr>
		<td>7</td>
		<td>8</td>
		<td>9</td>
	</tr>
</table>

table {
	border-spacing: 10px 30px;
	border-collapse: separate;
	width: 400px;
	border: 1px solid red;
}
td {
	border: 1px solid red;
	text-align: center;
}

예제 . border-collapse: collapse 설정

이번에는 border-collapse 속성이 collapse 값으로 설정되어 있어서 border-spacing이 작동하지 않습니다:

<table>
	<tr>
		<td>1</td>
		<td>2</td>
		<td>3</td>
	</tr>
	<tr>
		<td>4</td>
		<td>5</td>
		<td>6</td>
	</tr>
	<tr>
		<td>7</td>
		<td>8</td>
		<td>9</td>
	</tr>
</table>

table {
	border-collapse: collapse;
	border-spacing: 10px 30px;
	width: 400px;
	border: 1px solid red;
}
td {
	border: 1px solid red;
	text-align: center;
}