TABLE BORDER

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

?

1 2 3 4 5 6 7 8 9

table { display: table; } tr { display: table-row; } thead { display: table-header-group; } tabody { display: table-row-group; } tfoot { display: table-footer-group; } col { display: table-column; } colgroup { display: table-column-group; } td, th { display: table-cell; } caption { display: table-caption; }

CSS에서 표는 여섯 계층으로 구성된다. 가장 아래 table 요소, 그위 colgroup, 그위 col, 그위 thead tfoot tbody 요소, 그위 tr 요소, 그위 th td 요소

- 표의 캡션 위치 (caption-side 속성)

• 속성 : caption-side
  
• 값 : top | bottom | inherit
• 기본값 : top
• 적용대상 : 테이블 제목(table-caption)요소
  

이 속성은 요소 테이블 제목(caption)의 위치를 테이블을 기준으로 상대적으로 지정한다.
* IE8 이하 버젼에서는 지원을 안합니다.


속성 값에 대한 의미는 다음과 같다.

top : 테이블 박스 위에 캡션을 배치한다.

bottom : 테이블 박스 아래에 캡션을 배치한다.

?

1 2 3

caption { caption-side:bottom; }

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

• 속성 : table-layout
  
• 값 : auto | fixed | inherit
• 기본값 : auto
  
• 적용대상 : 테이블 요소, 인라인 테이블 요소
  

이 속성은 테이블 셀(cell), 행(row), 열(column) 요소의 배치를 지정한다.


속성 값에 대한 의미는 다음과 같다.

auto : 자동으로 계산되도록 지정한다.

fixed : 고정되도록 지정한다.

?

1 2 3 4 5 6

table.ex1 { table-layout:auto; } table.ex2 { table-layout:fixed; }

- 테이블 보더 표시 (border-collapse 속성)

• 속성 : border-collapse
  
• 값 : collapse | separate | inherit
• 기본값 : separate
• 적용대상 : 테이블 요소, 인라인 테이블 요소
  

이 속성은 테이블 셀(cell) 요소의 테두리 겹침을 지정한다.
DOCTYPE을 명시하지 않으면 예상치 못한 결과가 출력될수 있습니다.


속성 값에 대한 의미는 다음과 같다.

collapse : table의 보더와 각 셀의 보더가 결합된다.

separate : table의 보더와 각 셀의 보더가 분리된다.

?

1 2 3 4 5 6

table { border-collapse:collapse; } table, td, th { border:1px solid black; }

table { border-collapse:collapse; } table, td, th { border:1px solid black; }