thead01	thead02	thead03	thead04
セル01	セル02	セル03	セル04
セル05	セル06	セル07	セル08

● cssを使わず、htmlのみで細くてきれいな枠線の表組を作る場合、cellspacingを"1"にして、枠線の色になるbgclorをtableタグに設定します。

右の例の場合は#cccに、tdのbgcolorを#fffにしています。 thのbgcolorは、#efefef。paddingなどを設定するため、便宜上一部にcssを使っていますが、基本的にはhtmlのみで作ることができます。

tableタグのソース

 <table width="360" border="0" cellspacing="1" cellpadding="0">

thead01	thead02	thead03	thead04
セル01	セル02	セル03	セル04
セル05	セル06	セル07	セル08

● cellspacing、cellpaddingなどをcssに置き換えます。cellspacingはセルとセルの隙間を指定するプロパティなので、上の場合は、"1"を指定して、隙間からtable全体のbgcolorがのぞいている形で枠線（border）を実現していました。

cssで単にtdやthにborderを指定すると、となりあったtdやthのborderが二重になってしまい、細い罫線にはなりません。そこでtableタグにborder-collapse: collapseを指定して、境界線の重なりを一つにしてしまいます。次にtd、thに1ピクセルのborderを指定します。

tableタグのソース

 <table class="table08" width="360">

cssのソース

table.table08 { border-collapse: collapse;}

																table.table08 td { border: 1px solid #ccc; background:#fff; padding: 4px;}

																table.table08 th { border: 1px solid #ccc; background:#efefef; padding: 4px;}

thead01	thead02	thead03	thead04
セル01	セル02	セル03	セル04
セル05	セル06	セル07	セル08

● 隙間のある表組は、隙間の無い表組より簡単です。htmlを利用する場合は、cellspacing="3"などと隙間のサイズを指定してやります。borderはhtmlでborder="1"などとするとあまりきれいではないので、cssでtd、thに指定します。

thead01	thead02	thead03	thead04
セル01	セル02	セル03	セル04
セル05	セル06	セル07	セル08

● cssだけで作る場合は、tablenにセルとセルを重なり合わせない指定border-collapse:separate;と、隙間のサイズのborder-spacing:3pxを指定します。
ただし、古いバージョンのIEは、border-spacingに対応していないようなので、古いバージョンのIEに対応させる必要がある場合は、上のcellspacing="3"を使った方が無難かもしれません。

cssだけで作る場合のtableのソース

table.table10 {border-collapse: separate; border-spacing:3px;}

																	
																	table.table10 td { border: 1px solid #ccc; background:#fff; padding: 4px;}

																	table.table10 th { border: 1px solid #ccc; background:#efefef; padding: 4px;}