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