HTML and CSS Table Border Style Wizard

TABLE
border-width (px)	1px 2px 3px 4px 5px thin medium thick 0px
border-spacing	2px 1px 3px 4px 5px 0px
border-style	outset none hidden dotted dashed solid double ridge groove inset
border-color	gray white blue green black red custom:
border-collapse	separate collapse
background-color	white #FFFFF0 #FAF0E6 #FFF5EE #FFFAFA custom:
TD/TH
border-width (px)	1px 2px 3px 4px 5px thin medium thick 0px
padding	1px 2px 3px 4px 5px 0px
border-style	inset none hidden dotted dashed solid double ridge groove outset
border-color	gray white blue green black red custom:
background-color	white #FFFFF0 #FAF0E6 #FFF5EE #FFFAFA custom:
-moz-border-radius	0px 3px 6px 9px 12px

<table class="sample">
<tr>
<th>Header</th>
<td>Content</td>
</tr>
</table>

================================================================================================

1. [border=0 cellpadding=0 cellspacing=0]인 테이블 만들기

TABLE { border-spacing:0px; padding:0px; border-collapse:collapse }
TD, TH { padding:0px }

2. 클래스가 정의된 엘리먼트의 하위 엘리먼트를 지시하기

TABLE.form { border:solid 1px #C0C0C0; background:#FFFFFF }
TABLE.form TH { border:solid 1px #C0C0C0; background:#E0E0E0 }
TABLE.form TD { border:solid 1px #FFFFFF }

이렇게 정의하고 <table class="form"> 식으로 사용하면, 그 하위 엘리먼트에서는 <td class="form"> 이렇게 일일이 정의하지 않아도 된다. class="form"인 table내의 td, th에 이러이러한 속성을 적용한다는 의미. 더 응용하면,

FORM TABLE { border:solid 1px #C0C0C0; background:#FFFFFF }
FORM TABLE TH { border:solid 1px #E0E0E0; background:#E0E0E0 }
FORM TABLE TD { border:solid 1px #FFFFFF }

폼 태그 하위에 있는 테이블은 자동으로 위 속성이 부여된다.

위의 예는 입력폼을 작성할 때, TH를 label처럼 보여준다. (TABLE.form은 TABLE의 기본 속성을 상속받으므로 필요한 속성 재정의(override) 가능). 폼 얘기가 나왔으니 INPUT 폼이 수직 얼라인이 안 맞아 삐뚤빼뚤할 경우 vertical-align:middle식으로 적용하면 원하는 결과를 얻을 수 있다.

3. 한 엘리먼트 내에서 여러 클래스 속성 사용하기 <-- 백만불짜리 팁!

<div class="head bg"> 식으로 공백문자로 분리. 해당 엘리먼트에 head와 bg 클래스를 모두 적용시킴.

이제 CSS 사용의 두려움에서 벗어나자.

출처 : Tong - 착한넘님의 [PL]♡ HTML&CSS통