HTMLのtableで空白のセルを表示する方法を解説！
HTMLのtableで空白のセルを表示する方法を解説します。図表を制作している際、空白のセルはどのように表示しているでしょうか。今回はHTMLのtableで空白のセルを表示する方法を解説します。見落としがちな内容ですのでしっかりとマスターしましょう！
HTMLのtableで空白のセルを表示したい
上記のような右上、左下の空白のセルをtable上で表示したい場合どのような実装を行えばいいでしょうか。適切な選択ができるようにそれぞれの方法について理解しましょう。
HTMLのtableで空白のセルを表示する方法
empty-cellsプロパティを用いる方法
まずempty-cellsプロパティを用いる方法を紹介します。
empty-cellsプロパティとは、空のセルを表示するかどうかを選ぶためのプロパティです。empty-cellsプロパティはshowかhideのどちらかを選択することができます。
また、empty-cellsプロパティの初期値はshowです。つまり最初から空欄のセルは表示されています。また、Internet Explorerではempty-cellsプロパティはshowのみ選択できます。
ここではempty-cellsプロパティがhideの時の表示と先ほどの表の違いを確認してみましょう。
このように空白のセルが表示されなくなりました。
tdタグの中にテキストを入れる方法
先ほども解説したように、empty-cellsプロパティは初期値でshowが設定されているため、ここではhideを対応させてから、tdタグの中にあるテキストを入れることで空白のセルを表示する方法を紹介します。
その方法は3種類です。
brタグ・全角空白・ のうちどれか一つをtdタグの中に入れると空のセルが表示されます。 とは半角スペースという意味です。
以下のサンプルコードですべて同じ表示されていることを確認してください。
このようにempty-cellsプロパティがhideにも関わらず、空白のセルが表示することができました。
また、この方法を用いれば以下のような実装をすることができます。まずサンプルコードで確認してください。
まず空のセルの横幅のみを指定します。
しかし、中身がないためにブランクの大きさが小さくなってしまっています。そこで、先ほどの方法を用いることで空のセルの中に文字があることを認識させています。下側のセルは正しく表示されていることが確認できました。
