HtmlにおけるTableタグの色に関する設定項目では、以下のように複雑である。
・テーブル　┬境界色
＜table＞　├背景色
＜/table＞ └ボーダーサイズ
・行　　　 ┬境界色
＜tr＞　 ├背景色
＜/tr＞ └ボーダーサイズ
・セル 　┬境界色　　　　※見出しのセルの場合はtd⇒thに変わる。
＜ｔd＞　├背景色
＜/td＞└ボーダーサイズ
これらの属性は、タグ内で、以下のように設定される。
・境界色：bordercolor="色"
・背景色：bgcolor="色"
・ボーダーサイズ：border="ドット数"
セルの結合にも注意しなければならない。
・縦のセルの結合：＜td rowspan=2＞値＜/td＞　※rowspan数は結合個数
・横のセルの結合：＜td colspan=2＞値＜/td＞　※colspan数は結合個数
しかも、画面の背景色との組み合わせで、色を考慮しなければならない。
このサイトでは、背景色を紺色にして、文字色薄黄色にしてあるので、この
条件に対するTableの設定値の雛形を決めておけばあれこれ悩む必要が無くなる。
以下は、Tableタグのサンプル
　※PREタグでテキストを書いて見たが、IEでは＜＞を認識するので大文字化した。
　　　または＆lt；、＆ｇｔ；に変換する必要がある。
　※PREタグ内の文字色が設定できかったが、PREタグで指定できた。
　⇒○：＜pre＞
　　　　　　＜font color="white"＞ ※白のほうが見やすい。
　　　　　　・・・・
　　　　　　＜/font＞
　　　　＜/pre＞
　※PREタグ内の背景色が設定できない。⇒仕様上無理のようだ。
　 　※PREタグのフォントがみっともない（MS 明朝？）ので修正。
　⇒○：スタイルシートで設定する。「ＭＳ ゴシック」がいいようだ。
　　＜style type="text/css"＞
　　　　＜!--
　　　　PRE{font-family:"ＭＳ ゴシック";font-size="12pt";}
　　　　--＞
　　＜/style＞

＜table border=4 width=250 align=center＞
  ＜caption＞【テーブルの例】＜/caption＞＜br＞
  ＜tr bgcolor="#cccccc"＞＜br＞
  ＜th＞＜br＞＜/th＞＜th＞列-A＜/th＞＜th＞列-B＜/th＞＜th＞列-C＜/th＞＜br＞
  ＜/tr＞＜br＞
  ＜tr align=center＞
　＜td＞行-1＜/td＞＜td＞A1＜/td＞＜td＞B1＜/td＞＜br＞
　＜td rowspan=2＞C1-C2＜/td＞＜/tr＞＜br＞
　＜tr align=center＞
　＜td＞行-2＜/td＞＜td＞A2＜/td＞＜td＞B2＜/td＞＜/tr＞
　＜tr align=center＞＜td＞行-3＜/td＞＜td＞A3＜/td＞＜br＞
　＜td colspan=2＞A3-B3＜/td＞＜/tr＞＜br＞
＜/table＞＜br＞

【テーブルの例】

	列-A	列-B	列-C
行-1	A1	B1	C1-C2
行-2	A2	B2
行-3	A3	A3-B3

■本題に戻る。　テーブルの雛形

【テーブルの例】

	列-A	列-B	列-C
行-1	A1	B1	C1-C2
行-2	A2	B2
行-3	A3	A3-B3

【ルール】

＜table border="1" cellspacing="0"bordercolor="cyan"＞
 ＜caption＞【テーブルの例】＜/caption＞
 ＜tr bgcolor="#000000"＞
  ＜th＞＜br＞＜/th＞
  ＜th＞列-A＜/th＞
  ＜th＞列-B＜/th＞
  ＜th＞列-C＜/th＞
 ＜/tr＞
 ＜tr＞
  ＜td＞行-1＜/td＞
  ＜td＞A1＜/td＞
  ＜td＞B1＜/td＞
  ＜td rowspan=2＞C1-C2＜/td＞
 ＜/tr＞
 ＜tr＞
  ＜td＞行-2＜/td＞
  ＜td＞A2＜/td＞
  ＜td＞B2＜/td＞
 ＜/tr＞
 ＜tr＞
  ＜td＞行-3＜/td＞
  ＜td＞A3＜/td＞
  ＜td colspan=2＞A3-B3＜/td＞
 ＜/tr＞
＜/table＞

①＜table border="1" cellspacing="0"bordercolor="cyan"＞
　⇒境界線は二重にならないようシアン色で統一する。
②＜tr bgcolor="#000000"＞＜ｔｈ＞....＜/ｔｈ＞＜/ｔｒ＞
　⇒見出し部分は黒色とする。
■枠線が太いのが気にかかる。
IE専用ではあるが、枠の色を以下の属性で指定可能。
・bordercolordark "色"　←外枠の右と下の枠線、内枠の左と上の線の色
・bordercolorlight "色"　←外枠の左と上の枠線、内枠の右と下の枠線の色

あいうえお	かきくけこ
さしすせそ	たちつてと

これを利用して、何れかを背景に近い色に設定すると、以下のような表になる。
＜table border="1" cellspacing="0" bordercolordark="black" bordercolorlight="white"＞

あいうえお	かきくけこ
さしすせそ	たちつてと

通常の指定（下表）との比較をすると見やすい事が判る。
＜table border="1" cellspacing="0" bordercolor="white"＞

あいうえお	かきくけこ
さしすせそ	たちつてと

しかし、FireFoxで表示すると上の表も下の表と同じ太い線になる。
※汎用的に使える枠線を細くする方法を探す。
・固定：border="1",bordercolor="white"
・cellpadding=n 枠線とセルの内容の間の隙間をピクセル単位で指定。
・cellspacing=n 内枠の太さを指定。0 は立体感の無い枠線を表示。

cellspacing	celladding	結果
未指定	2	同じ
未指定	0	同じ
2	未指定	同じ
0	未指定	同じ
2	2	同じ
0	0	同じ

あいうえお	かきくけこ
さしすせそ	たちつてと

だめ.....