관리 메뉴

IT 쟁이

테이블 테두리 만들기(border-collapse) 본문

HTML/CSS

테이블 테두리 만들기(border-collapse)

클라인STR 2008. 1. 16. 12:44

border-collapse : 테이블 또는 셀의 테두리선 표시방법을 지정하는 스타일시트



옵션


 - border-collapse:collapse

  : 서로 이웃하는 테이블이나 셀의 테두리션을 겹쳐서 표현한다.


 - border-collapse:separate

  : 서로 이웃하는 테이블이나 셀의 테두리션을 분리시켜 표현한다.

   (이스타일을 사용하지 않으면 모든 테이블이나 셀의 경계선은 분리되어 나온다. 기본값)



테두리가 겹쳤을때 나타나는 순서


1. border-style:hidden이 지정된것이 가장 우선한다.


2. border-style:none이 지정된 것은 우선순위가 가장 낮다.


3. hidden과 none이외의 값이 지정되어 있는 경우는 폭이 두꺼운 테두리선이 우선순위로

   나타나게 된다.


4. 굵기가 같은 경우 테두리선의 종류에 따라 아래와 같은 우선 순위를 가지게 된다.


  double > solid > dashed > dotted > ridge > autoset > groove > inset



5. 굵기가 같고 테두리종류가 동일하고 색상(border-color) 만 다른경우


  TH > TD > TR > thead = tbody = tfoot > col > colgroup > table




ex)


<TABLE WIDTH="950" border="1" CELLSPACING="0" CELLPADDING="0"

  style="border-collapse:collapse;" bordercolor="#E1E1EC">

출처 CowBoyJS님의 블로그  http://blog.naver.com/cowboyjs/120046080086

Comments