• 회원가입
  • 로그인
  • 구글아이디로 로그인

[table] CSS - border-spacing 속성 - 테이블셀 테두리간격 (= border-spacing속성 = 보더스페이싱속성, IE8) ★

목차

  1. border-spacing 예제 - 셀간의 거리 가로/세로 각각 지정
  2. border-spacing 정의
  3. border-spacing 구문
  4. border-spacing 예제 - 셀간의 거리 가로/세로 동시 지정
  5. border-spacing 예제 - 테이블헤드 스크롤 고정 시 0 설정

 

border-spacing 예제 - 셀간의 거리 가로/세로 각각 지정

 
<style>
table, td, th {
  border: 1px solid gray;
}

table {
  border-collapse: separate;
  border-spacing: 15px 30px;
}
</style>
 
<table>
    <tr>
      <td><h1>홈짱닷컴 (homzzang.com)</h1></td>
   </tr>
    <tr>
      <td><h1>HTML CSS 무료 강의 홈피</h1></td>
   </tr>
</table>

결과보기


border-spacing 정의

 

테이블 셀 테두리 간의 간격 지정.

 


 

1.

  • <table> 요소에만 사용 가능.
  • border-collapse:seperate 일 때 작동. (즉, border-collapse:collapse 일 땐, 작동 X)

 

2. 

  • 기본값: 2px
  • 상속여부: O
  • 애니효과: O
  • CSS버전: CSS2
  • JS구문: object.style.borderSpacing="15px"

 

3.

IE8 이상 주요 최신 브라우저 지원.

 

4. MDN border-spacing 예제보기

https://developer.mozilla.org/en-US/docs/Web/CSS/border-spacing

 

 

border-spacing 구문

 
selector {border-spacing: length [length] |initial|inherit;}
 

[속성값]
 
length [length]
px, cm 등 길이 단위. (0이나 양수만 가능. 음수는 불가.)
  • 값이 1개인 경우: 가로 세로 동일. (예) border-spacing: 5px;
  • 값이 2개인 경우: 가로 세로 개별. (예) border-spacing: 5px 10px;
  • 스크롤헤드 고정 시, table 요소에 border-collapse: separate; border-spacing: 0; 설정.
  
initial
이 속성의 기본값으로 설정.
 
inherit
부모 요소의 속성을 상속


PS. 속성값 2개 시 의미 차이
  • border-spacing 경우:   (앞:수평 / 뒤:수직)
  • margin, padding 경우: (앞:수직 / 뒤:수평)
 
 

border-spacing 예제 - 셀간의 거리 가로/세로 동시 지정

 

<style>

table, td, th {

  border: 1px solid gray;

}


table {

  border-collapse: separate;

  border-spacing: 15px;

}

</style>

 

<table>

    <tr>

      <td><h1>홈짱닷컴 (homzzang.com)</h1></td>

   </tr>

    <tr>

      <td><h1>HTML CSS 무료 강의 홈피</h1></td>

   </tr>

</table>

 

결과보기 


방문 감사합니다. (즐겨찾기 등록: Ctrl + D)

분류 제목
position CSS - clear 속성 ★ - float 해제후 줄바꿈 (= 클리어속성, clear속성, 상속 X)
position CSS - display 속성 ★★★★★ - 요소유형지정 (= 요소성격변 = 요소노출방식 = display속…
position CSS - position 속성 ★★★ - 위치기준대상지정 (= 위치속성 = 포지션속성 = 위치조정 = po…
position CSS - top 속성 ★ - 기준상단 (= 위기준 상단거리 = top속성 = 탑속성/톱속성)
position CSS - right 속성 ★ - 오른쪽기준(= 우측기준) 위치 지정 (= right속성 = 라이트속성) ※…
position CSS - bottom 속성 ★ - 기준하단 (= bottom속성 = 하단기준 = 아래기준 = 바텀속성 = …
position CSS - left 속성 ★ - 왼쪽기준 (= left속성 = 좌측기준 = 레프트속성, 상속 X)
position CSS - z-index 속성 ★ - 요소층수지정 (= 요소상하지정 = 요소상하결정 = 위아래지정 = z-…
position CSS - visibility 속성 ★ - 보임설정 (= 노출설정 = visibility속성 = 비저빌러티속…
position CSS - overflow 속성 ★★ - 범위이탈요소처리 (= 범위넘는요소처리 = 스크롤바 생성 = over…
position CSS - clip 속성 (폐기예고) - 이미지 자르기 (= 일부만 노출 = clip속성 = 클립속성)
css CSS - cursor 속성 - 커서 모양 (= cursor속성 = 커서속성)
intro CSS - !important 키워드 - 당해 속성값 강제 우선적용 (= 우선순위표시 = 느낌표임포턴트)
css CSS - opacity 속성 - 불투명도 (= opacity속성 = 오패서티속성/오페서티속성) ※ 있는데 …
table CSS - border-collapse 속성★ - 테두리겹침설정 (= 테두리중첩설정 = 테두리이중방지 = b…
table CSS - border-spacing 속성 - 테이블셀 테두리간격 (= border-spacing속성 = 보…
table CSS - caption-side 속성 - 테이블표제위치 (= caption-side속성 = 캡션사이드속성)
css CSS - 글자자르기 (= 문자열자르기 = 문자열줄이기= 글자길이자르기 = 문자열자르기 = 글자수자르기 = …
css CSS - zoom 속성 - 요소 확대 (= zoom속성 = 줌속성) ※ IE 하위 브라우저(예: IE6, …
intro CSS - CSS3 입문
6/25
목록
찾아주셔서 감사합니다. Since 2012