[HTML5 & CSS3] 표 스타일

*caption-side 속성 - 표 제목 위치 정하기

​

기본형)

caption-side : top / bottom

속성 값	설명
top	캡션을 표의 윗부분에 표시한다.
bottom	캡션을 표의 아랫부분에 표시한다.

​

​

​​

*border 속성 - 표 테두리 스타일 결정하기

​

표 테두리 스타일 지정하기

 

​​

​

*border-collapse 속성 - 테두리 통합, 분리하기

​

기본형)

border-collapse : collapse / separate

속성 값	설명
collapse	테두리를 하나로 합쳐 표시한다.
separate	테두리를 따로 표시한다.

​

표 테두리 통합하기 및 분리하기

 

​

​

*border-spacing 속성 - 인접한 셀 테두리 사이 거리 지정하기

​

기본형)

border-spacing : <크기>

속성 값	설명
<크기>	px이나 em 등 크기와 단위를 직접 지정한다.

셀 사이에 여백 지정하기

 

​

 

*empty-cells 속성 - 빈 셀의 표시 여부 지정하기

​

기본형)

empty-cells : show / hide

속성 값	설명
show	빈 셀 주위에 테두리를 그려 빈 셀을 표시한다.
hide	빈 셀에 테두리를 그리지 않고 비워 둔다.

​

빈 셀 표시하기 및 감추기

 

​

​

*width, height 속성 - 표 너비와 높이 지정하기

​

표 너비 지정하기

 

 

​

*table-layout 속성 - 콘텐츠에 맞게 셀 너비 지정

​

기본형)

table-layout : fixed / auto

속성 값	설명
fixed	셀 너비를 고정한다. 즉, 셀 내용에 따라 셀의 너비가 달라지지 않는다.
auto	셀 내용에 따라 셀의 너비가 달라진다.

​

셀 너비 지정하기

 

 

​

*vertical-align 속성 - 셀 안에서 수직 정렬하기

​

기본형)

vertical-align : baseline / top / bottom / middle / sub / super / text-top / text-bottom / <길이 값> / <백분율 값>

속성 값	설명
baseline	인라인 요소의 기준선을 부모 요소의 기준선(baseline)에 맞춘다.
top	인라인 요소의 윗부분을 부모 요소의 윗부분에 맞춘다.
bottom	인라인 요소의 아랫부분을 부모 요소의 아랫부분에 맞춘다.
middle	인라인 요소의 중앙 부분을 부모 요소의 기준선에서 x-높이(소문자 x의 높이 값)의 반만큼 올려서 맞춘다.
sub	인라인 요소의 기준선을 부모 요소의 아래 첨자 위치에 맞춘다.
super	인라인 요소의 기준선을 부모 요소의 위 첨자 위치에 맞춘다.
text-top	인라인 요소의 윗부분을 부모 요소 글꼴의 윗부분에 맞춘다.
text-bottom	인라인 요소의 아랫부분을 부모 요소 글꼴의 아랫부분에 맞춘다.
<길이 값>	기준선을 0px로 생각하고 길이 값이 양수면 기준선 위로, 음수면 기준선 아래로 지정한 크기만큼 옮긴다.
<백분율 값>	기준선을 0%로 생각하고 line-height의 몇 %인지에 따라 양수면 위로, 음수면 아래로 옮긴다.

​

표의 셀에서 사용할 경우 기준선이나 위, 아래, 가운데 등으로 정렬할 수 있다.

속성 값	설명
baseline	셀의 기준선에 내용의 기준선을 맞춘다.
top	패딩의 위쪽 가장자리에 내용의 윗부분을 맞춘다.
middle	패딩 박스의 중앙에 내용을 맞춘다.
bottom	패딩의 아래쪽 가장자리에 내용의 아랫부분을 맞춘다.

​

​

셀 안에서 수직 정렬하기