Border - Spacing
개요 : 이 속성은 테이블 셀(cell) 요소의 테두리 간격을 지정한다.
정의
|
border-spacing |
설명 |
|
값 |
<길이> <길이>? | inherit |
|
기본값 |
0 |
|
적용대상 |
테이블(table) 요소와 인라인 테이블(inline table) 요소 |
|
상속 |
됨 |
|
백분율 |
사용 불가 |
|
미디어 |
visual |
값
|
값 |
설명 |
|
<길이> |
크기를 지정한다. |
|
inherit |
부모 요소의 값을 상속하도록 지정한다. |
- <길이>는 인접한 셀의 테두리와의 간격을 지정한다.
- 두개의 <길이> <길이>를 지정하면, 각각 수평(x축)과 수직(y축)의 간격을 지정한다.
- 한개의 <길이>를 지정하면, 수평(x축)과 수직(y축)의 간격을 같게 지정한다.
- 테이블의 줄(row), 컬럼(column), 줄 그룹(row group), 컬럼 그룹(column group)은 테두리를 지정할 수 없다.
View Source :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Insert title here</title>
<style type="text/css">
table {
border-spacing: 10px 30px;
border: 1px solid black;
}
th, td {
border: 1px dotted gray;
}
</style>
<body>
<caption>
<Strong>border-spacing</Strong>컬럼들 좌우 및 상하 테두리 간격, <a target="_blank" href="http://hooney.net/docs/css/Border-collapse">border-collapse</a>와 비교 참조
</caption>
<table>
<tr>
<th>컬럼들 좌우 간격</th>
<td>10</td>
<td>px</td>
</tr>
<tr>
<th>컬럼들 상하 간격</th>
<td>30</td>
<td>px</td>
</tr>
</table>
</body>
Result :
border-spacing 컬럼들 좌우 및 상하테두리 간격, border-collapse 와 비교 참조
''.' Programs > CSS' 카테고리의 다른 글
| Table - Layout (0) | 2012.03.20 |
|---|---|
| Border-Collapse (0) | 2012.03.20 |
| Empty - Cells (0) | 2012.03.20 |
| Caption-Side (0) | 2012.03.20 |
| Content (0) | 2012.03.20 |