[ border="1"의 일반적인 테이블(표) ]

<table width="500" border="1" cellspacing="0" cellpadding="3" bordercolor="#999999">

위와 같이, 테이블 테두리값 1px로 설정한다 하더라도 실제 웹브라우저 상에서는 테두리가 2px로 보입니다.

그러한 까닭은, 이 각각의 1px셀 테두리가 서로 만나면서 2px(1px+1px)이 되기 때문입니다.

아래 테이블에서와 같이 "셀 간격"을 띄워놓고 보면 그 이유를 좀 더 분명하게 이해할 수 있습니다.

<table width="500" border="1" cellspacing="5" cellpadding="3" bordercolor="#999999">

border-collapse

셀 및 테이블 테두리를 포개는 설정에 관한 TABLE태그에 대한 CSS입니다. 먼저, 적용된 모습을 살펴봅니다.

<table width="500" border="1" cellspacing="0" cellpadding="3" bordercolor="#999999" style="border-collapse:collapse;">

- separate : 테이블 전체의 외곽선과 각 셀의 외곽선을 각각 표시합니다.
- collapse : 테이블 전체의 외곽 및, 각 셀의 외곽선을 경계에서 중복하여 표시합니다.
ex) TABLE { border-collapse: separate } 

위와 같이, 아주 간단하게, 1px 외곽선 테이블(표)를 만들 수 있습니다. 해당 CSS는 IE5이상부터 지원되는 기능이며, FireFox 2.0의 경우도 지원되고 있습니다. (단, border="1"이 아닌 경우, 즉 그 이상의 값을 설정한 경우, FireFox에서는 여유선이 표시됩니다)

참고)  너비나 형식이 다른 외곽선이 포개질 때는 다음과 같은 우선 순위를 가집니다.

border-style:hidden설정 외곽선이 최우선, 너비가 넓은 외곽선이 그 다음의 우선 순위를 가집니다.

너비가 같은 경우에는 double, solid, dashed, dotted, ridge, outset, groove, inset 순서로 표기되며,

색상만 다른 경우에는 셀, 가로열, 가로열 그룹, 세로열, 세로열 그룹, 테이블 순서로 표시됩니다.

Rules

표 내부 셀간의 구분선을 어떻게 표시할 지에 대한, TABLE태그의 속성입니다. 먼저, 적용된 모습을 살펴봅니다.

<table width="500" border="1" cellspacing="0" cellpadding="3" bordercolor="#999999" style="border-collapse:collapse;" rules="none">

- none : 선없음

- groups : thead, tbody, tfoot, colgroup요소의 경계 표시

- rows : 가로열의 경계 표시

- cols : 세로열의 경계 표시

- all : 모든 경계 표시

Frame

표 외곽 테두리를 어떻게 표시할 지에 대한, TABLE태그의 속성입니다. 먼저, 적용된 모습을 살펴봅니다.

<table width="500" border="1" cellspacing="0" cellpadding="3" bordercolor="#999999" style="border-collapse:collapse;" rules="none" frame="hsides">

- void : 테두리 없음

- above : 윗 부분만 테두리 표시

- below : 아래 부분만 테두리 표시

- hsides : 위, 아래 부분만 테두리 표시

- lhs : 왼쪽만 테두리 표시

- rhs : 오른쪽만 테두리 표시

- vsides : 좌/우 테두리만 표시

- box, border : 상하좌우 모든 테두리 표시

<table width="500" border="2" cellspacing="0" cellpadding="3" bordercolor="#999999" style="border-collapse:collapse;" rules="rows" frame="hsides">

이상의 HTML 태그 속성과 CSS를 이용하면, 위와 같은 테이블(표)를 손쉽게 제작할 수 있습니다.