[CSS] 표 스타일

#  관련 포스팅

  - 표 태그 : https://young0105.tistory.com/17

 

 

---

캡션 표시 위치 지정

선택자 { caption-side : top | bottom ; }

 

  - top (기본값) : 캡션이 표 위쪽에 표시됨

  - bottom : 캡션이 표 아래쪽에 표시됨

 

 

---

표 테두리

/* 표 바깥 테두리 */
테이블선택자 { border : 선두께 선유형 선색상 ; }

/* 셀 테두리 */
테이블선택자 셀선택자 { border : 선두께 선유형 선색상 ; }

 

표 바깥 테두리와 셀 테두리의 겹치는 부분을 합쳐서 표현

선택자 { border-collapse : collapse | separate ; }

 

  - separate (기본값) : 테두리를 따로 표시함 (셀들을 분리함)

  - collapse : 테두리를 하나로 합쳐 표시함

 

셀 사이의 여백

/* border-collapse : sepatate인 경우에만 적용 가능함 */

선택자 { border-spacing : 크기1 [크기2] ; }

 

  - 속성 값이 1개인 경우 : 수평 거리, 수직 거리를 같게 함

  - 속성 값이 2개인 경우 : 첫 번째 값은 수평 거리, 두 번째 값은 수직 거리

 

빈 셀 표시 여부 지정

/* border-collapse : sepatate인 경우에만 적용 가능함 */

선택자 { empty-cells : show | hide ; }

 

 

반응형

728x90

---

셀 크기 지정

선택자 { width : 너비px ; }
선택자 { height : 높이px ; }
선택자 { padding : 여백px ; }

 

셀의 내용 길이와 상관없이 셀 너비 고정

선택자 { 
		/* 셀 너비 고정 여부 */
		table-layout : fixed | auto ; 
		/* fixed 시 튀어나간 글자를 셀 내부로 넣음 */
		word-break : break-all ; 
}

 

  - fixed : 셀 너비 고정

      → 셀 너비가 내용보다 짧으면 테두리 밖으로 글자가 튀어나옴

      → word-break : break-all을 설정하면 튀어나간 글자를 셀 내부로 넣을 수 있음

 

 

---

셀 내 수평 정렬

선택자 { text-align : left | center | right ; }

 

셀 내 수직 정렬

선택자 { vertical-align : top | bottom | middle ; }

 

  - top : 위쪽 패딩 가장자리에 내용의 윗 부분을 맞춤

  - bottom : 아래쪽 패딩 가장자리에 내용의 아랫 부분을 맞춤

  - middle : 패딩의 중앙에 내용의 중앙을 맞춤