HTMLのtableで空白のセルを表示する方法を解説!

HTMLのtableで空白のセルを表示する方法を解説します。図表を制作している際、空白のセルはどのように表示しているでしょうか。今回はHTMLのtableで空白のセルを表示する方法を解説します。見落としがちな内容ですのでしっかりとマスターしましょう!

コンテンツ [表示]

  1. 1HTMLのtableで空白のセルを表示したい
  2. 2HTMLのtableで空白のセルを表示する方法
  3. 2.1empty-cellsプロパティを用いる方法
  4. 3tdタグの中にテキストを入れる方法

HTMLのtableで空白のセルを表示したい

上記のような右上、左下の空白のセルをtable上で表示したい場合どのような実装を行えばいいでしょうか。適切な選択ができるようにそれぞれの方法について理解しましょう。

HTMLのtableで空白のセルを表示する方法

empty-cellsプロパティを用いる方法

まずempty-cellsプロパティを用いる方法を紹介します。

empty-cellsプロパティとは、空のセルを表示するかどうかを選ぶためのプロパティです。empty-cellsプロパティはshowhideのどちらかを選択することができます。

あわせて読みたい
empty-cells
CSSのempty-cellsプロパティは表の中の空白のセルの枠線や背景を表示するか、表示しないかを制御するプロパティです。empty-cellsプロパティの構文や使い方をサンプルコード付きで解説します。

また、empty-cellsプロパティの初期値はshowです。つまり最初から空欄のセルは表示されています。また、Internet Explorerではempty-cellsプロパティはshowのみ選択できます。

ここではempty-cellsプロパティがhideの時の表示と先ほどの表の違いを確認してみましょう。

このように空白のセルが表示されなくなりました。

tdタグの中にテキストを入れる方法

先ほども解説したように、empty-cellsプロパティは初期値でshowが設定されているため、ここではhideを対応させてから、tdタグの中にあるテキストを入れることで空白のセルを表示する方法を紹介します。

その方法は3種類です。
brタグ・全角空白・ のうちどれか一つをtdタグの中に入れると空のセルが表示されます。 とは半角スペースという意味です。

以下のサンプルコードですべて同じ表示されていることを確認してください。
 

このようにempty-cellsプロパティがhideにも関わらず、空白のセルが表示することができました。

また、この方法を用いれば以下のような実装をすることができます。まずサンプルコードで確認してください。

まず空のセルの横幅のみを指定します。

しかし、中身がないためにブランクの大きさが小さくなってしまっています。そこで、先ほどの方法を用いることで空のセルの中に文字があることを認識させています。下側のセルは正しく表示されていることが確認できました。

Qumeru[クメル]ではプログラミング学習が出来るカリキュラムを7月31日までの期間限定で無料で提供しています。

無料登録することで、すぐにプログラミング学習を始められます。ぜひカリキュラムをお試し下さい!

関連記事

【期間限定】全カリキュラム無料で提供中!

Qumeru[クメル]ではプログラミング学習の全カリキュラムを7月31日まで期間限定で無料で提供しています。

無料登録することで、すぐにプログラミング学習を始められます。ぜひお試し下さい!

目次

しまむ
ライター

しまむ

千葉県在住、都内の大学に通う大学1年生です。HTML/CSS/BootStrapに関する記事を執筆しています。