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

[table] CSS - caption-side 속성 - 테이블표제위치 (= caption-side속성 = 캡션사이드속성)

목차
  1. caption-side 예제 - 테이블 표제 위치
  2. caption-side 정의
  3. caption-side 구문

 

caption-side 예제 - 테이블 표제 위치

 
<style>
table,th,td {border:1px solid silver; border-collapse:collapse;}

caption {caption-side:top;}

</style>

<table>
    <caption>필수 코딩언어 (Homzzang.com)</caption>
    <tr>
        <th>HTML</th><th>CSS</th><th>JS</th>
    </tr>
    <tr>
        <td>기본틀</td><td>디자인</td><td>기능동작</td>
    </tr>
</table>
 

caption-side 정의

 
<table> 표제 위치 지정. 

 


 
1.
테이블마다 표제위치 다르게 하려면, id나 class 선택자 이용.
 
2.
  • 기본값: top
  • 상속여부: O
  • 애니효과: X
  • CSS버전: CSS2
  • JS구문: object.style.captionSide="bottom";

 

3.

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

단, IE8 경우 DTD 선언된 경우만 작동.

 

4. MDN caption-side 예제보기
 
 

caption-side 구문

 
selector { caption-side:top|bottom|initial|inherit; }
 

[속성값]

 

top
테이블 위에 배치.
 
bottom
테이블 아래에 배치.
 
initial
이 속성의 기본값으로 설정.
 
inherit
부모요소 속성값 상속.


 

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

분류 제목
animation CSS - animation-direction 속성 - 애니방향 (= 움직임방향 = 애니메이션디렉션속성, I…
animation CSS - animation-duration 속성 - 애니지속시간 (= 애니완료소요시간 = 움직임완료소요시간…
animation CSS - animation-fill-mode 속성 - 애니미작동스타일 (= 움직임 작동안할때 스타일 = 애…
animation CSS - animation-iteration-count 속성 - 애니반복횟수 (= 움직임반복횟수, IE10…
animation CSS - animation-name 속성 - 키프레임명 (= 키프레임이름 = 애니이름 = 애니명 = 애니메…
animation CSS - animation-play-state 속성 - 애니재생상태 (= 애니작동상태설정 = 움직임 재생/…
animation CSS - animation-timing-function 속성 - 애니재생중속도변화 (= 움직임 중 속도변경…
image CSS - Rounded Images (둥근/동그란 이미지 만들기 = 이미지 테두리 둥글게/동그랗게) - I…
image CSS - Thumbnail Images - (썸네일 이미지 스타일)
image CSS - enter an Image (이미지 가운데정렬)
image CSS - Image Text - (이미지 위에 텍스트 배치/띄우기)
image CSS - Polaroid Images / Cards - (폴라로이드 이미지)
image CSS - Image Filter - (이미지 필터 - 흑백/흐림 효과)
image CSS - Image Hover Overlay - (이미지 마우스오버시 효과 = 이미지허버효과 = 이미지마우…
image CSS - Image Modal - (Advanced) - (이미지 모달 띄우기 효과)
button CSS - Button - 버튼스타일 (버튼크기, 버튼색깔, 버튼비활성화, 버튼그룹, 이미지위버튼)
pagination CSS - 페이징 - 기본 스타일 (Simple Pagination)
pagination CSS - 페이징 - 마우스오버 시 색깔 변경 (Active and Hoverable Pagination)
pagination CSS - 페이징 - 트랜지션 효과 (Hoverable Transition Effect)
pagination CSS - 페이징 - 테두리 추가 (Bordered Pagination)
9/25
목록
찾아주셔서 감사합니다. Since 2012