テーブルの活用自体についてイロイロとオブジェクションされていますが、 ”レイアウト目的で table を使うな” だとか、 なんやかんやと批判の対象になるようです。 まあ、外野の声は一切無視したとしても、テーブルを体よく表示する為には 多角的な角度からレイアウト破綻の可能性を検討する視野の広さが必要となります。
CSS の適用によってこれらの問題を一掃できるわけでもありませんが、 レイアウト関係は HTML で管理すべきではありません。 現在の優勢ブラウザにしても、テーブルレイアウトを CSS でやらせようとする露骨な意図が出現してきています。 マージンを生成する vspace 、 hspace 等は NN4 、 NN4.7 では有効でしたが、 Netscape6 では未対応になりました。 IE では IE4 の時代から未対応となっています。 img に関する vspace 、 hspace については最新ブラウザでも対応しているコトから考えると不思議な感じもしますが......。 IE6 の次のブラウザではさらに W3C 寄りの見解を示してくる可能性もありますので注意が必要です。 NN にせよ IE にせよ、勝手に独自拡張でオリジナルHTMLタグを作って流通させた挙句、 最新バージョンでそれらを未対応にさせる整合性の無さには腹が立ちます。 巨大企業のクソクダラナイさじ加減に踊らされない為にも、スタイルシートへの移行は徹底すべきでしょう（まあ、余裕があれば......）。
少し整理して考えてみましょう。 table の構成にはいくつも要素が存在します。
| 市民税（円） | 県民税（円） | |
|---|---|---|
| 所得割額 | 18100 | 12000 |
| 均等割額 | 3000 | 1000 |
| 合計年税額 | 34100 | |
それでは、この見本テーブルをベースとして解説させてもらおうと思います。 ちなみにテーブルのスタイルに関するデフォルト値はちょっといただけない設定になっているので、 独自スタイルを適用したいというウェブマスターは多いかと察します。
<table>
<caption>市民税・県民税（数値に意味はありません）</caption>
<tr>
<th></th><th>市民税（円）</th><th>県民税（円）</th>
</tr>
<tr>
<th>所得割額</th><td>18100</td><td>12000</td>
</tr>
<tr>
<th>均等割額</th><td>3000</td><td1000</td>
</tr>
<tr>
<th>合計年税額</th><td colspan="2">34100</td>
</tr>
</table>
テーブル自体にマージンを作ればテキストとの間隔を自在に設定できます。 また、テキストに対しての左寄せ（float: left;）も<table>で設定してやります。 また、<table>にボーダーライン（枠線）を設定すると外枠の設定となります。 テーブル全体のフォント関係（文字の体裁）をここで指定してやるのも良いでしょう。
<table>の背景色は若干分かりにくい。 例えばテーブル自体の背景色を白にしてもセル（<td><th>）の背景色を灰色にすれば上書きされて灰色の背景になります。 ただし、セルとセルの間隔には若干のデフォルトマージンがある為、セルとセルの隙間に<table>の背景色が見えます。 この隙間に見える<table>の背景色が内部の仕切り線の役割を果たすわけです。 ですからテーブルの内側罫線は<table>の背景色と、セルのマージンによってできあがるわけです。 ただし、（おそらくブラウザの機能によって）<tr><td><th>のマージンは固定されてしまうようなので、 マージンを指定し直しても画面上に反映されません（少なくとも IE6 では）。
<table cellspacing="20">
ただし上記のように、cellspacing属性を指定してやればセルとセルの間隔をピクセル単位で指定するコトができます。 いずれにせよ、セルとセルの間隔を 0 にするコトはできないようですが...。 以下に上述したサンプルテーブルのソースを記します。
table {
margin: 1em;
float: left;
background-color: transparent;
border: solid 0.5em gray;
font: 12pt '平成明朝',serif;
color: navy
}
<tr>はテーブルの横一列を管理する要素ですが、 特に指定を行う必要はないかと思われます。 と、いうのもセルで背景色やパディング、枠線の指定を行えばいいからです。
18100
サンプルテーブルの場合、セルには税額を記入しますので文字を右寄せにするのが妥当です。 あとはパディング（内側余白）、背景色（うすいグレー）と文字色（黒）を指定するだけでした。
td {
padding: 0.5em 1em;
background-color: #dcdcdc;
text-align: right;
color: black
}
所得割額
<th>は別段、必要ないんですが表にも見出しが必要でしょう。 デフォルト値で中寄せ（センタリング）、太字での表示となります。 サンプルテーブルでは<td>と同様のパディング指定を行っています。 背景色はやや濃い目にして外枠の指定も行っています。 文字の色は<table>要素でネイビーに設定しているので、これを引き継ぎます（スタイルの継承）。
th {
padding: 0.5em 1em;
background-color: silver;
border: solid 1px blue
}
<caption>も別段、必要ないんですが表にも説明文が必要でしょう。 デフォルト値で中寄せ、テーブルの上に表示されます（IE6 では）。 多種多様のブラウザに対する配慮として、中央寄せ（text-align: center;）を記述した方が いいかもしれません。 文字の色は<table>要素でネイビーに設定しているので、これを引き継ぎます（スタイルの継承）。
世の中には慣習というヤツがあり、何となく皆でそれに合わせているというトコロがあります。 リンクを表す表示がどのブラウザでも、未見なら青（既読なら紫に）文字が塗られて下線が付くという共通性は慣習のなせる技です。 <h1> などの見出し部分が大きなサイズで表示されるのも、「見出しは普通、大きいもんだろ」 という一般的な慣習を受け継いでのコトです。 しかし、CSS で好きなように指定できるのですから、<h1> のデフォルト・フォントサイズが 通常の文字と同じ大きさのブラウザがあったとしても、不便ですが間違ってはいないワケです。
例えば、<th> でテーブルの見出しであると定義された部分は、 センタリングされ太字で表示されます（IE6 では）。 ただし、これが他のブラウザでも同様の体裁であると思い込むのは早合点というヤツです。 IE6 で表示させると th要素がセンタリングされるコトについて、作り手の見解は分かれるでしょう。
センタリングして欲しくないというヒトならば、th要素の text-align: を left なり right に指定し直すでしょう。 どちらか気にしないヒトはブラウザ任せにするでしょう。 どうしてもセンタリングして欲しいというヒトは、例えデフォルト値が text-align: center; だったとしても ソレをあえて指定すべきです。 そうするコトで他のブラウザで見たときにも製作者の意図が伝わります。