[CSS-웹표준 교과서]10. 표

@ CSS의 테이블 모델은 (X)HTML의 테이블 모델을 기초로 하며 표(table),캡션(caption),행(tr), 행 그룹(thead,tfoot, tbody),열(col),열 그룹(colgroup),셀(th,td)로 구성된다.

 - XML어플리케이션 등 표 관련 요소가 존재하지 않는 언어의 경우 무언가의 요소를 표 관련 요소에 할당해야 한다. display 속성으로 표현하고 이하의 값을 지정함으로써 임의 요소에 표 관련 요소로서의 역할을 할당할 수 있다.

- CSS2의 사양서에 게제된 'HTML 4.0 의 스타일스트 예'에서는 표 관련 요소에 대해서  display 속성의 값이 아래와 같다고 되어 있다.

 # 열의 스타일 지정

 - 구조상으로는 표의 셀(th,td)은 행과 열 양쪽에 속하지만 XHTML의 코드상에는 열이 아니라 행의 자식 요소가 된다. 따라서 열이 아니라 행의 내용물로서 존재하는 것이 되지만 이하의 속성은 열 또는 열 그룹(col 그룹, colgroup 요소)에 적용하면 셀의 스타일에 영향을 끼칠 수 있다.

# 테이블의 시각 정형 모델

- 시각 정형 모델에서 테이블(table 요소)은 블록 레벨 요소(또는 치환 요소)와 같은 방식으로 취급되며 내용, 패딩, 보더, 마진이 있다.
- 어떤 경우에도 테이블은 그 자체의 박스와 함께 캡션이 있는 때엔 캡션의 박스를 생성하여 익명박스에 포함된 구조가 된다. 테이블과 캡션의 박스는 각각 내용, 패딩, 보더, 마진이 있으며 익명박스의 폭과 높이는 두 개의 박스가 들어가기에 필요한 만큼의 최소한의 크기가 된다. 두 박스의 사이에서는 다른 요소와 마찬가지로 상하 마진은 겹쳐진다.
- 테이블의 박스와 캡션 박스를 분리하여 배치하는 것은 불가능하고 익명박스채로 배치되어야 한다. 예컨대 float 속성으로 table 요소에 'left', caption 요소에 'right'로 지정해도 분리되어 배치되지 않는다.

#테이블의 계층과 투과성
-CSS에서 표는 여섯 계층으로 구성된다. 가장 아래의 계층이 테이블(table)이며 그 위에 열 그룹(colgroup), 열(col), 행 그룹(thead, tfoot, tbody), 행(tr)가 겹쳐져, 가장 위의 계층이 셀(th,td)가 된다.
- 셀의 배경이 투명하면, 행의 배경이, 행의 배경이 투명하면 행 그룹의 배경이 표시된다.

1. 표의 캡션 위치(caption-side)

- top, bottom : 테이블 박스의 위 또는 아래에 캡션을 배치한다. 이 값을 지정하면 테이블의 앞 또는 뒤에 블록 레벨 요소처럼 표시되고, 테이블 박스와의 상하 마진은 상쇄된다.(다만 table 요소에서 display 속성의 값 'inline-table'을 상속한 경우나 콤팩트박스나 런인박스로 처리된 경우 등은 블록 레벨 요소와 같은 방식으로 처리되지 않는다). width 속성에 지정한 폭은 테이블 박스의 포함 블록의 폭을 참조하여 계산된다.
- left right (CSS 2.1 권고 후보에서는 삭제) : 테이블 박스의 좌측 또는 우측에 캡션을 배치한다. 이 값을 지정하면 vertical-align 속성으로 수직위치를 지정할 수 있지만 값은 'top' 'middle' 'bottom' 에 한정되어 다른 값을 지정해도 'top'으로 처리된다. width 속성에 폭을 지정할 수 있지만 값에 'auto'를 지정하면 '가능한 한 좁은 폭'이나 '한 행에 전부 넣기'는 전적으로 브라우저에 의존하기 때문에 'auto'는 지정하지 않는 것이 좋다.

2. 테이블 관련 요소의 레이아웃 방법(table-layout 속성)

- auto : 브라우저가 가진 임의의 자동 레이아웃 알고리즘을 사용한다.
- fixed : 고정된 레이아웃의 알고리즘을 사용한다. 고정 레이아웃 알고리즘은 각 열의 폭을 결정하여 첫 번째 행부터 순서대로 표시하는 방법이다. 고정 레이아웃 알고리즘을 사용하려면 width 속성에 테이블 전체의 폭을 지정해야 한다. width 속성을 지정하지 않은 경우나 값이 'auto'인 때에는 자동 레이아웃 알고리즘이 채용된다.

* 고정 레이아웃 알고리즘에서 각 열의 폭은 다음과 같이 결정된다.

1) width 속성에 'auto' 이외의 값이 지정된 경우 그 값으로 폭을 설정한다.
2) 그렇지 않으면 최초에 등장하는 행의 셀이 width 속성에 'auto'이외의 값이 지정된 경우 그 값으로 폭을 설정한다. 셀이 한 개 이상의 열에 걸친 때는 값은 복수의 열에 균등하게 분배된다.
3) 남은 열에는 테이블의 남은 공간이 균등하게 분배된다(다만, 보더나 셀 사이의 스페이스는 제외)
- 내용이 셀에서 튀어나오면 튀어나온 내용을 잘라내는 방법은 overflow속성으로 지정한다.

3. 테이블의 보더 표시모델(border-collapse 속성)

- separate : 분리보더 모델을 사용한다. 표 전체의 보더와 각 셀의 보더가 분리된다.
- collapse : 결합 보더 모델을 사용한다. 표 전체의 보더와 각 셀의 보더가 결합된다. 보더는 셀 사이의 그리드선을 중앙축으로 하여 표시된다.

# 결합 보더 모델에서 보더의 충돌
 * 보더가 충돌 할때 다음의 규칙을 근거로 어떤 보더가 우선될지 결정된다.
1) border-style 속성의 값이 'hidden'인 보더는 충돌하는 다른 모든 보더에 우선한다. 즉 그 값이 적용된 곳에는 보더가 표시되지 않는다.
2) border-style 속성의 값이 'none'인 보더는 우선순위가 최하위가 된다. 그 값이 적용된 곳에 관계된 모든 요소가 'none'인 경우에만 보더는 표시되지 않는다.(border-style 속성의 기본값은 'none'임에 주의)
3) border-style 속성의 값에 'hidden'이 지정되지 않은 경우(적어도 그 곳에 관계된 요소 중 한 개 이상이 'none'이외의 값인 경우) 더욱 폭이 넓은 보더가 우선된다. 복수의 후보가 border-width 속성에 같은 값인 경우 border-style 속성의 값에 따라 우선순위를 결정한다. 구체적으로는  'double' 'solid' 'dashed' 'dotted' ' ridge' 'outset' 'groove' 'inset'의 순서로 우선순위가 결정된다.
4) border-style 속성에도 border-width 속성에도 같은 값이 지정된 경우, 즉 border-color 속성에만 다른 값이 지정된 경우 셀에 대한 지정이 최우선되어 행,행 그룹, 열, 열그룹, 표의 순서로 우선된다. 즉 위에서 말한 '표의 계층'순으로 우선된다.

- 테두리는 2px로 두껍게 테이블 안의 선은 1px

- 계층상 상위에 있는 th,td 보더가 우선시된다.

4. 셀의 보더 사이의 공간(border-spacing 속성)

 - <길이값> <길이값>? : 인접한 두 셀의 보더 사이 공간을 길이로 지정한다. 값이 한 개이면 상하좌우의 공간, 값이 두 개이면 첫 번째 값이 좌우 공간, 두 번째 값이 상하 공간이 된다. 마이너스 값은 지정 불가이다. 셀 사이의 공간에는 table 요소의 배경이 표시된다. (Win IE에서는 지원 안함)

5. 빈 셀의 보더와 배경 표시방법(empty-cells 속성)

* 빈셀에 해당하는 것
1) 내용이 없는 셀
2) visibilty 속성, 즉 스페이스, tab키, 라인피드, 캐리지리턴, 폼피드만이 포함된 셀. 다만 문자 참조 '&nbsp;' '&ensp;' '&emsp;' 등이 포함된 셀은 빈 셀에 해당되지 않는다.

- show : 빈 셀의 보더와 배경이 표시된다.
- hide : 빈 셀의 보더와 배경이 표시되지 않고 부모 요소의 배경이 투과된다. 한 행에 포함된 모든 셀에 'hide'가 지정되어 있고 가시 내용이 없으면 그 행 전체 display속성에 'none'이 지정된 것과 같아진다.