table

 

-border-collapse

:테이블에서 사용되며 테이블 셀의 테두리를 하나로 표현할지 분리할지 여부 등을 지정한다.

 

{ border-collapse:collapse; }

collapse : 테두리를 하나로 합치게 지정(border-spacing 이나 빈 셀 속성은 무시)

separate : 기본값(default), 테두리를 분리(border-spacing 이나 빈 셀 속성이 무시되지 않는다)

inherit : 지정 요소의 테이블 테두리 속성을 부모(상위) 요소로부터 상속받음

 

사용 예)

table { border-collapse:collapse; }

 

 

-border-spacing

:테이블에서 인접한 셀의 테두리 사이의 간격을 지정한다. 테두리 사이의 간격을 지정하는 것이므로 border-collapse 속성이 separate 일 때 적용 가능하다.

 

{ border-spacing:10px; }

length length : 인접한 셀의 테두리끼리의 간격을 px, cm 단위로 지정하며 음수값은 허용되지 않는다.
- length 가 하나일 때 수직 수평 모두 동일하게 지정
- length 가 두 개일 때 앞의 값은 수평, 뒤의 값은 수직

inherit : 지정 요소의 테이블 테두리 간격 속성을 부모(상위) 요소로부터 상속받음

 

사용 예)

table { border-collapse:collapse; border-spacing:10px 15px; }

 

 

-caption-side

:table 에서 사용되는 caption 요소의 위치를 지정한다.

 

{ caption-side:bottom; }

top : 기본값(default), 캡션을 테이블 위쪽(상단)에 위치

bottom : 캡션을 테이블 아래쪽(하단)에 위치

inherit : 지정 요소의 캡션의 위치 속성을 부모(상위) 요소로부터 상속받음

 

사용 예)

caption { caption-side:bottom; }

 

 

-empty-cells

:테이블에서 빈 셀에 대해 그 셀의 테두리나 배경을 브라우저에 보여줄지 보여주지 않을지를 지정하며 border-collapse 속성의 값이 separate 일 때만 해당된다.

 

{ empty-cells:hide; }

hide : 비어있는 셀의 배경이나 테두리를 숨김

show : 기본값(default), 비어있는 셀의 배경이나 태두리를 보여줌

inherit : 지정 요소의 비어있는 셀 속성을 부모(상위) 요소로부터 상속받음

 

사용 예)

table { border-collapse:separate; empty-cells:hide; }

 

 

-table-layout

:테이블의 레이아웃 상태를 지정하기 위해 사용된다.

 

{ table-layout:fixed; }

auto : 기본값(default), 유동적인 테이블 레이아웃으로 지정
- column 의 너비는 셀 안의 고정적으로 가장 넓은 콘텐트에 의해 정해진다
- 이 값은 최종 레이아웃이 결정되기 전까지 테이블의 모든 내용을 읽어들인 다음 정해지므로 다소 렌더링이 늦어질 수 있다

fixed : 테이블 레이아웃을 고정으로 지정
- 수평레이아웃은 셀 안의 콘텐츠가 아니라 테이블의 너비와 컬럼의 너비에 의해 결정된다
- auto layout 보다 렌더링 속도는 빠르다

inherit : 지정 요소의 테이블 레이아웃 속성을 부모(상위) 요소로부터 상속받음

 

사용 예)

table { table-layout:fixed; }

 

 

출처 : http://htmlcss.kr/css/table/