border-collapse Property

Home > Document > CSS > Table > border-collapse

border-collapse Property

Table element를 사용하여 만드는 테이블의 Cell들은 Cellspacing 속성을 사용하지 않으면 2pixel의 Cellspacing을 가지게 됩니다. 그리고 style을 사용하여 Cell border에 solid 같은 border-style을 지정하지 않는 이상 입체감을 가지는 Table이 되져... 그래서 그게 머 어쨌냐구요? 물론 아무런 문제도 없습니다만, 프린터로 출력했을 때 별로 깔끔하지않은 모양이 된다는 거져. 아래의 표를 보면 Cellspacing="0" 으로 지정하고, style을 사용하여 border:1px solid #000000을 지정한 Table입니다.

R1 C1 R1 C2 R1 C3 R1 C4 R1 C5 R1 C6
R2 C1 R2 C2 R2 C3 R2 C4 R2 C5 R2 C6
R3 C1 R3 C2 R3 C3 R3 C4 R3 C5 R3 C6
R4 C1 R4 C2 R4 C3 R4 C4 R4 C5 R4 C6

이 표를 보면 외곽 테두리보다 Cell과 Cell이 만나는 부분이 두꺼워 보이져. Cell과 Cell의 border 두께가 1pixel 씩 합쳐져서 2pixel이 되어서 그런거져. 그러니까 지금까지 우리가 아는 방법을 총동원한다고 해도 요런 식으로 밖에는 할 수 없다는 뜻입니다. 프린터로 출력한다면 지금 보이는데로 테이블 내부는 2pixel로 나오겠죠.

이 페이지에서 다루는 border-collapse Property는 바로 이런 문제를 해결해 주는 CSS Property 입니다. 값은 Cell과 Cell이 만나는 경계선을 포개어 주는 'collapse'와 사이를 띄우는 'separate' 가 있습니다.

  [표 보는 방법]
border-collapse Property
Value collapse | separate | Inherit
Initial separate
Applies to 'table' and 'inline-table' elements (table Tag 에 지정한다.)
Inherited yes
Percentages N/A
Media Visual
HTML Syntax { border-collapse: sCollapse }
Scripting object.style.borderCollapse [ = sCollaspe ]

* W3C의 border-collapse reference menual 에는 초기값이 collapse로 되어있지만 실제로는 separate 이므로 위 표의 초기값을 separate 로 표기했습니다.




CSS Scripting
onClick="table_1.style.borderCollapse='collapse';"


border-collapse DHTML
R1 C1 R1 C2 R1 C3 R1 C4 R1 C5 R1 C6
R2 C1 R2 C2 R2 C3 R2 C4 R2 C5 R2 C6
R3 C1 R3 C2 R3 C3 R3 C4 R3 C5 R3 C6
R4 C1 R4 C2 R4 C3 R4 C4 R4 C5 R4 C6

separate collapse

이 상태로 프린트 하면 균일한 두께의 border를 가진 테이블을 출력할 수 있습니다. 그리고 아래의 source 중에 table-layout : fixed 라는 Property를 눈여겨 봐 주시져. 다음 페이지에 나오는 CSS Property 입니다.

소스 보기



이 문서의 저작권은 www.cadvance.org 에 있습니다.

Top
Back
New
검색