HTML and CSS Table Border Style Wizard

http://www.somacon.com/p141.php 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 <style type="text/css"> table.sample {  border-width: 1px;  border-spacing: ;  border-style: outset;  border-color: gray;  border-collapse: separate;  background-color: white; } table.sample th {  border-width: 1px;  padding: 1px;  border-style: inset;  border-color: gray;  background-color: white;  -moz-border-radius: ; } table.sample td {  border-width: 1px;  padding: 1px;  border-style: inset;  border-color: gray;  background-color: white;  -moz-border-radius: ; } </style> <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통