実録！ホームページ制作者の声

まず、テーブルタグ本来の目的である表組みの用途とレイアウト用途とのどちらに当てはまるかを考えます。その用途を理解した上で次のようにHTMLを記述します。

HTMLサンプル（表組みが目的の場合） ===============================
<table>

HTMLサンプル（レイアウトが目的の場合） ===========================
<table border="0" cellpadding="0" cellspacing="0">

表組み目的の場合は、スタイルシートでborderを設定するのでHTML側には属性を記述しません。これによって、スタイルシートがオフになってもデフォルトのborderが表示され、表組みとしての役割を果たせます。
逆にレイアウト目的の場合は、スタイルシートでborderを消すよりもHTML側の属性で制御したほうがいいというわけです。

そして、次にスタイルシートでの設定です。今回は表組みとして説明します。

CSSサンプル =========================================
table {
   width:100%;
   border-collapse:collapse;
   border-spacing:0;
   empty-cells:show;
   table-layout:fixed;
}

順に説明すると、border-collapse:collapse;で隣接したborderを重ねて表示させます。この指定によって、セルとセルの間だけボーダーが太くなることもなくなり、「thには上と左にボーダーを、tdには下と右にボーダーを…」なんて七面倒なことも不要になります。
ちなみに、値をseparateとすると間隔が開きます。

border-spacingは、border-collapse:separate;の場合のみ有効となります。私は用心深いので0の値を入れていますが不要ですね、はい。

empty-cells:show;はIEには対応していな要素ですが、空白セルの場合でもboederを表示させるための記述です。逆に表示させたくない場合はhideの値を入れます。

table-layout:fixed;はセルの幅を均等にするためのものです。強制的に均等になるため半角英数の長い文字の場合は隠れてしまうことがあるので使い方には注意が必要です。IEなどのブラウザではfixedにすると自動的にテーブルの幅が最大になりますが、Safariでは掲載文字に依存するのでwidth指定もした方が間違いありません。また、セル幅を均等にしたくない場合は、table-layout:auto;にするか、もしくはtable-layoutを取ってしまうだけでＯＫです。

テーブル関連のプロパティは多くて大変ですが、使えるようになれば画像を使わなくとも見栄えのいい表を作れるようになるので、是非チャレンジしてみてください。