[CSS] 테이블 스타일

CSS 테이블 스타일

 

속성:  border-collapse, table-layout, caption-side

 

border-collapse:

테이블 테두리 설정, 표 테두리를 병합할지 또는 통합할지 여부를 표시
value: separate (기본값, 셀 분리),  collapse (셀 합쳐서 사이의 공백 없앰)


*
각각의 td는 하나의 block요소이기 때문에 4방향의 border를 가진다. 맞닿아 있는 부분이 각각의 border로 2줄로 표현된다. 맞닿아 있는 부분의 border를 collapse 하면 한줄로 깔끔하게 만들 수 있다.

*
thead, tbody, tfoot로 묶는 이유는 다 같은 td를 구분 짓기 위해

 

table-layout:

표의 너비와 일치하도록 셀의 너비를 균일하게 표시
value: auto(기본값), fixed

caption-side:

캡션이 있는 테이블 제목 표시
value: top(기본값) bottom

vertical-align:

표의 너비와 일치하도록 셀의 너비를 균일하게 표시
value: middle(기본값) top bottom

empty-cell:

내용이 없는 빈 셀을 표시할지 여부
value: show(기본값) hide