목차
- borderSpacing 예제 - 테이블의 셀 간 간격 설정
- borderSpacing 정의
- borderSpacing 구문
- borderSpacing 예제 - 테이블의 셀 간 간격 반환
borderSpacing 예제 - 테이블의 셀 간 간격 설정
<style>
table,th,td {border:1px solid silver; border-collapse:seperate;}
</style>
<table id="hz">
<tr>
<th>코딩언어</th>
<th>역할</th>
</tr>
<tr>
<td>HTML</td>
<td>기본틀</td>
</tr>
<tr>
<td>CSS</td>
<td>디자인</td>
</tr>
</table>
<br>
<button type="button" onclick="homzzang()">클릭</button>
<script>
function homzzang() {
document.getElementById("hz").style.borderSpacing = "30px";
}
</script>
결과보기
borderSpacing 정의
테이블의 셀 간 간격을 설정/반환.
1. 아래 경우엔 작동 안 함.
2.
3.
IE9 이상 모든 브라우저 지원.
borderSpacing 구문
반환 (※ 이 방식 경우, 인라인스타일 방식일 때만 정상 작동)
object.style.borderSpacing
설정
object.style.borderSpacing = "length length|initial|inherit"
[속성값]
CSS border-spacing 참고
[반환값]
테이블의 셀 간 간격을 나타내는 문자열 반환.
borderSpacing 예제 - 테이블의 셀 간 간격 반환
<style>
table,th,td {border:1px solid silver; border-collapse:seperate;}
</style>
<table id="hz" style="border-spacing:30px;">
<tr>
<th>코딩언어</th>
<th>역할</th>
</tr>
<tr>
<td>HTML</td>
<td>기본틀</td>
</tr>
<tr>
<td>CSS</td>
<td>디자인</td>
</tr>
</table>
<br>
<button type="button" onclick="homzzang()">클릭</button>
<script>
function homzzang() {
alert(document.getElementById("hz").style.borderSpacing);
}
</script>
결과보기