CSSでテーブルの枠線を引く方法とデザインのカスタマイズ方法

HTMLのtableタグで表を使ってみたものの、なぜか枠線が表示されない人はいませんか?逆に表の枠線を非表示にしたいけど、消し方がわからない人はいませんか?
本記事では、CSSを使ってHTMLのテーブルに枠線を引く方法について解説しています。また、枠線のカスタマイズ方法についても紹介していますよ。

CSSでテーブルの枠線を引く

HTMLで表を使いたいときには、tableタグを使用します。しかし、テーブル形式に出力されるものの枠線が表示されないなど、求めていたデザインにならない場合があります。そういった場合は、スタイルシート(CSS)を使ってtableタグの枠線のデザインを変更しましょう。
まず、tableタグを使った表に枠線が表示されない場合に、枠線を引く方法の例を紹介します。

See the Pen
GRqQgqp
by sho-go (@sho-go)
on CodePen.

テーブルの枠線の設定は、borderプロパティで設定します。
上記のサンプルコードでは、線の太さを1pxに設定し、線のスタイルをsolidにしています。
線のデザイン設定は、tableタグだけでなく、thタグとtdタグにも適用しましょう。tableタグのみに設定した場合、内側の罫線がないテーブルになってしまいます。

なお、線を消したい場合には、borderプロパティの線の太さを0にするか、線のスタイルをnoneかhiddenにします。

HTMLのみでテーブルの枠線を引く

CSSを使わずにHTMLのみでテーブルの枠線を引くこともできます。HTMLのみでテーブルに枠線を引きたいときは、tableタグ内で線の太さを指定しましょう。

See the Pen
yLJvyap
by sho-go (@sho-go)
on CodePen.

CSSでテーブルの枠線をカスタマイズする上記のコードのように書けば、HTMLのみでテーブルに枠線を引くことができます。しかし、テーブルのデザインは基本的に、サイト内で統一されているはずなので、CSS内でデザインを設定してしまった方が使いやすいでしょう。

CSSでテーブルの枠線をカスタマイズする

CSSで変更できるテーブルの設定は、枠線の有無だけではありません。枠線の種類や色、高さ、幅など、多くの項目を自由に設定できます。サイトデザインに合わせて、テーブルデザインにカスタマイズしてみましょう。
それでは、CSSでテーブルに設定できる項目は多岐にわたるので、代表的なものをいくつか紹介しますね。

枠線の種類を変更する

テーブルの枠線は、CSSで種類を設定できます。実線の枠線を破線や点線に変えたり、立体的に見える線などを設定できます。設定は、borderプロパティで変更します。
試しに、テーブルの線を点線に変えてみましょう。

See the Pen
eYzVmBK
by sho-go (@sho-go)
on CodePen.


枠線の存在感が薄くなったので、テーブル感が減りました。内容をわかりやすく伝えるためのテーブルであれば、点線もいいかもしれませんね。
逆に、データや数値を見せたいときには、実線の方が合っているでしょう。

枠線の色を変更する

テーブルの枠線は、CSSで色を変えることができます。同じページで何度もテーブルを使う場合、差別化するのに使えますね。もちろん、サイトデザインに合わせて、色を変えるのも良いでしょう。設定は、borderプロパティで変更します。
試しに、テーブルの線を赤色に変えてみましょう。

See the Pen
jOrZEyG
by sho-go (@sho-go)
on CodePen.

また、文字の色や背景色を変えることもできます。ここでは、thタグの文字色と背景色を変えてみましょう。

See the Pen
BazYyWQ
by sho-go (@sho-go)
on CodePen.

どこが見出しがわかりやすくなりましたね。テーブルを使っているサイトでは、よくみかける設定です。

枠線の高さや幅を変更する

テーブルの枠線の高さや幅は、文字数などに合わせて自動で設定されますが、CSSで任意の大きさに設定することもできます。設定は、widthプロパティとheightプロパティで行います。
試しに、thタグの高さと幅を指定してみましょう。

See the Pen
MWeQYmG
by sho-go (@sho-go)
on CodePen.

自動的に設定したテーブルだと、文章が崩れて読みにくくなることが頻繁にあるので、使い方を覚えておきたい設定ですね。

セルを結合する

セルの結合は、テーブルの枠線の設定とは少し違いますが、知っておかないとテーブルの見た目が悪くなってしまうので、使えるようになっておきましょう。
セルの結合には、結合したいセルのthタグかtdタグで「rowspan」か「colspan」を使用します。それぞれの違いと使い方は次の通りです。

  • 縦にセルを結合:rowspan=”つなげるセル数”
  • 横にセルを結合:colspan=”つなげるセル数”

参考としてセルを結合したテーブルのコードを紹介します。

See the Pen
GRqQgvZ
by sho-go (@sho-go)
on CodePen.

セルを結合することで、テーブルの見た目をきれいに保つことができていますね。

CSSでテーブルの一部の枠線の消す

CSSのクラスを使って、特定のセルの枠線だけを消すことができます。
テーブルの一部の枠線を消す方法は次のコードの通りです。

See the Pen
LYZQEjK
by sho-go (@sho-go)
on CodePen.

表ではなくなりましたが、一部の枠線を消せることによって、テーブルのデザイン機能を活用の幅が広がりそうです。

まとめ

今回は、CSSでテーブルの枠線を変更する方法について紹介してきました。
見やすくするために表を使っているのに、デフォルト設定のままでは逆に見づらくなることもあります。紹介した内容を実践して、見やすく、伝わりやすいサイトになるように、枠線をカスタマイズしてみましょう。

BLOGコンテンツをパーソナライズします

あなたは現在「プログラミング学習者」ですか?