もう悩まない！テーブル要素に使えるCSSプロパティ！

■ border-collapse

一番よく使うかもしれない。各セルのボーダーをくっつけて表示するか（collapse）、それぞれ表示する（separate）か選べます。デフォルトは、separateです。

border-collapse:collapse の場合

HTML

<table style="
	border-collapse:collapse;
	width:630px;
	border-spacing:3px;">
<tr>
<td>セルの</td>
<td>ボーダーに着目!</td>
<td>くっついています。</td>
</tr>
</table>

例

border-collapse:separate の場合

HTML

<table style="
	border-collapse:separate;
	width:630px;
	border-spacing:3px;">
<tr>
<td>セルの</td>
<td>ボーダーに着目!</td>
<td>離れています。</td>
</tr>
</table>

例

■ table-layout

表の幅を自動的に決める（auto）か、固定にする（fixed）かを選べます。デフォルトは、autoです。

table-layout:auto の場合

HTML

<table style="
	border-collapse:collapse;
	table-layout:auto;
	width:630px;">
<tr>
<td>セル幅が...</td>
<td>自動的に幅が決まります！！！！</td>
<td>こういう風に。</td>
</tr>
</table>

例

table-layout:fixed の場合

HTML

<table style="
	border-collapse:collapse;
	table-layout:fixed;
	width:630px;">
<tr>
<td>セル幅が...</td>
<td>固定の幅になりますよー！！！！</td>
<td>こういう風に。</td>
</tr>
</table>

例

これを知るまでは、ずっとwidthで一生懸命揃えてました。。。

■ empty-cells

空のセルのボーダーを表示する（show）かしない（hide）かを決めます。デフォルトでは、表示する設定になっています。

empty-cells:showの場合

HTML

<table style="border-collapse:separate;width:630px;">
<tr>
<td style="empty-cells:show;">n</td>
<td style="empty-cells:show;"></td>
<td style="empty-cells:show;">n</td>
</tr>
<tr>
<td style="empty-cells:show;">n</td>
<td style="empty-cells:show;"></td>
<td style="empty-cells:show;">n</td>
</tr>
</table>

例

empty-cells:hideの場合

HTML

<table style="border-collapse:separate;width:630px;">
<tr>
<td style="empty-cells:hide;">n</td>
<td style="empty-cells:hide;"></td>
<td style="empty-cells:hide;">n</td>
</tr>
<tr>
<td style="empty-cells:hide;">n</td>
<td style="empty-cells:hide;"></td>
<td style="empty-cells:hide;">n</td>
</tr>
</table>

例

おまけのコラム

vertical-alignも使えます

vertical-alignは、行のなかのテキストや画像など（要するにインライン要素で）の縦方向の揃え位置を指定する時に使うものですが、th・tdにも指定することができます！指定すると、中央ぞろえになるので、たとえば、縦横真ん中に何かを配置したいときに使ってみてください！thやtdのような見た目にするための「display:table-cell（古いブラウザでは使えません）」と一緒に使うと大変便利です！
> 上下中央配置に悩める初心者コーダーにおくる４つの解決法

テーブルレイアウトについて

テーブルレイアウトは、CSSの普及とともにだんだんと使われなくなってきました。テキストはHTML、デザインはCSSという原点に戻ったからです。

今ではSEO的にはあまり影響がないのではないか、と言われていますが、テーブルレイアウトにすると往々にしてサイトが重くなること、HTMLのみを見た場合にテキストの並び順が読んでほしい順とは違う順になってしまうことなどから、テーブルレイアウトはSEOに悪影響を与える！という説もあります。

※tableタグは、テーブル（表）で使う文にはSEOには特に影響はありません。逆にテーブル（表）なのにtableタグを使っていない方が評価が下がります。

しかし、テーブルレイアウトは、SEOへの悪影響とかHTMLのきちんとした使い方とかどうでもいい！受け取る人に確実に綺麗に見えてほしいんだ！CSSはあまり使いたくない！という方には、大変便利です。

CSSをほとんど使わずに、ブラウザに影響されにくい崩れにくい見た目を作ることができるからです。そのため、メルマガ等のデザインでよく使用されます。
※Excelを方眼紙のように使う感覚。

メルマガは、メールなので、メール閲覧ソフトを使って閲覧することが主流だと思います。メール閲覧ソフトは、多種多様！同じHTMLとCSSでも、ソフトによって違う見え方になってしまいます。しかも、メール閲覧ソフトだけではなく、GmailやYahooメールなどの普通のブラウザでチェックするメールにも、使えるHTML,CSS,JSが制限されているものがほとんどです。いかにCSSを使わずに相手方に崩れていないデザインのHTMLメールを送るか・・・？と考えたときにテーブルレイアウトが活躍します。

おまけのおまけ

ページを重くするためだけのテーブルで描いたモナリザ