テーブルの「空っぽのセル」どうする？CSSの `empty-cells` プロパティと上手く付き合う方法
こんにちは！Web制作の世界へようこそ。
HTMLで表（テーブル）を作っているとき、「あれ、このセルの中身、今は空っぽなんだけど、枠線だけ残って見た目が少し寂しいな…」なんて感じたことはありませんか？
あるいは、「中身がないなら、いっそ消えてくれた方がスッキリするのに！」と思ったこともあるかもしれません。
今日はそんな、「テーブルの空のセル」をCSSでこっそり操る魔法、`empty-cells` プロパティについてお話しします。難しく考えすぎなくて大丈夫。一緒に紐解いていきましょう！
—
なぜ「空のセル」が気になるの？
例えば、お買い物リストやスケジュール表を想像してみてください。
「この時間帯は予定なし（空）」というセルがあるとき、その枠線がポツンと残っていると、少し間が抜けて見えることがありますよね。
そんなとき、CSSの `empty-cells` を使うと、その「空っぽの場所」の扱いを自由に変えることができるんです。
`empty-cells` の使い方はこれだけ！
使い方はとてもシンプルです。対象となる `table` 要素（または `td` 要素）に対して指定します。
table {
/ 空のセルを隠す（消してしまう）場合 /
empty-cells: hide;
/ 空のセルを表示する（初期設定）場合 /
empty-cells: show;
}
たったこれだけです。`hide` を選べば、中身のないセルはまるで最初から存在しなかったかのように、枠線ごとスッと消えてくれます。
—
注意！`border-collapse` との意外な関係
ここが少しだけ「つまずきポイント」なのですが、とても重要なお話です。
CSSでテーブルを整えるとき、よく `border-collapse: collapse;`（隣り合う枠線を一本にまとめる設定）を使いますよね？
実は、`border-collapse: collapse;` を指定している状態だと、この `empty-cells` は効かなくなってしまうんです。
「あれ？ CSSを書いたのに消えないよ！」と悩んだときは、まずこの設定を確認してみてください。`empty-cells` を効かせたい場合は、テーブルの枠線を一本にまとめず、あえて隙間を空ける `separate` モード（デフォルト）のままにしておく必要がある、という「仲良しのルール」があるんです。
—
実際に書いて試してみましょう
それでは、実際にコードを書いて動きを見てみましょう。コピーして、HTMLファイルとして保存してブラウザで開いてみてください。
| 項目 | 内容 |
|---|---|
| 朝食 | パンとコーヒー |
| 昼食 |
このコードでは、昼食のセルが空っぽなので、枠線ごと見えなくなります。もし `empty-cells: show;` に変えれば、枠線がちゃんと表示されるはずです。
—
最後に：完璧じゃなくても大丈夫
Web制作を始めたばかりの頃は、テーブルのレイアウトは少しとっつきにくいかもしれません。「枠線が消えない」「隙間が気になる」といった悩みは、誰もが一度は通る道です。
もしうまくいかないときは、`border-collapse` の指定を一度外してみたり、ブラウザのデベロッパーツールで「どの要素が効いていないのか」を覗いてみたりしてください。その「なぜ？」を繰り返すことが、一番の近道ですよ。
テーブルは情報を整理するための大切な道具です。少しずつ仲良くなって、あなたの思い描くきれいな表を作ってみてくださいね。応援しています！
コメント