간단히 살펴보는 표 스타일

이제 테이블이라는 태그는 많이 사용하지 않지만, 자신이 만들어야 하는 웹 페이지에 테이블이 필요하다면 ul태그나 기타 다른 태그를 사용하는 것보단 테이블 태그를 사용하는 것이 훨씬 실용적이고, 또 웹 표준성에도 맞는 방법이다. 그렇기 때문에 오늘은 표 관련 css를 살펴보려고 한다.

• caption-side : 표 제목 위치

표 제목은 caption 태그를 이용하는 데 그 위치를 조정하는 css 속성은 caption-side이다. top은 기본 값이며 제목이 위에 설정되도록, bottom은 제목이 아래에 오도록 하는 속성값이다.

• border : 표 테두리

일반 컨텐츠와 마찬가지로 border는 테두리를 지정하는 속성이다. 하지만 주의할 점은 표는 바깥 테두리와 셀 테두리를 따로 설정해주어야 한다는 점이다.

• border-collapse : 테두리 통합, 분리

바깥 테두리와 셀의 각 테두리를 떨어트릴지 하나로 합칠 것인지를 정하는 속성이다. collapse는 테두리를 하나로 합치는 속성값이고, separate는 테두리를 따로 표시하는 속성값이다.(이래서 영어공부를 해야한다.)

• border-spacing : 인접한 셀 테두리 사이 거리 지정

border-collapse : separate를 지정했을 때 인접한 셀 테두리의 거리를 지정하는 속성이다.

• empty-cells : 빈 셀 표시 여부 지정.

빈 셀의 표시여부를 지정할 수 있다. 속성값으로는 show와 hide가 있다.

• table-layout : 콘텐츠에 맞는 셀 너비

width값으로 셀 너비를 지정할 수 있지만, 영문의 경우는 그걸 무시하고 한 줄로 표시된다. 이를 지정하는 속성이 table-layout 속성이다.

fixed는 너비 고정, auto는 셀의 너비가 달라진다.(기본값)