htmlで表を作るときに使うtableタグ、
その存在は知っているけれどなかなか使いこなすことができない……
そんな風に考えている方は多いはずです。
今回は、そんな曖昧になりがちなhtmlのtableタグについて徹底的に解説していきたいと思います。
htmlのtableタグを使った表の作り方に加えて、デザインを整えていくCSSについても解説していきます。

表(テーブル)を作ることができるtableタグ

tableタグ(table要素)を使えば、表(テーブル)を作成することができます。
実際にこのような表をみたことがあるのではないでしょうか?

これらは全てtableタグを使って作られています。
では、このtableタグの構造と、中に含まれる3つの要素について説明していきたいと思います。

表の構成

tableタグを使って作られる表(テーブル)は、<table><tr><td><th>の4つの要素で構成されています。

・<table></table>:全体をこのtableタグで囲みます。囲まれている部分が表になります。
・<tr>:table rowの略で、表に行を1行作ります。
・<th>:table headerの略で、表の見出しとなるセルを作ります。
・<td>:table dateの略で、表の中身となるセルを作ります。

少し名前が紛らわしいですが、1つ1つが何を表しているのかを覚えてしまえばあとは見た目を整えていくだけです。
では、基本のコードを見ていきましょう。

tableタグを使った基本のコードの書き方

早速、この表を作っていきたいと思います。

対応しているコードはこちらになります。

 

 

①まず、全体を<table>タグで囲います。

 

この時、tableタグの横にborderがありますが、これは枠線の太さを指定するものです。
これを書かなければ、下のように枠線のない表になってしまいます。

 

しかし、枠線に関する指定はhtmlで行うよりもcssで行った方が後から変える際に便利なので、この後説明していきたいと思います。

 

 

②作りたい行の文だけ<tr></tr>を作ります。

 

 

③見出しの部分を<thead></thead>で囲ってから言葉を<th></th>、見出し以外の部分を<tbody></tbody>で囲ってからデータを<td></td>で囲って入れていきます。

 

これが基本のコードになります。ここまでで完成する表がこちらです。

 

しかし、最初にお見せした表と線が異なっていると思います。
これを調整するためのcssの指定がこちらです。htmlとcssの関係については後ほど説明します。

 

thとtdに対して枠線の指定をすることで、1つ1つのセルに枠線をつけているイメージです。
これだけだと隙間ができてしまうので、隣り合うセルの罫線を間を空けずに表示するtableに対するborder-collapse: collapse;を使って指定をしますが、このときに先ほど話したtableタグのborder属性は0に指定しておきます。
ここまでコードを書くと、最初の表が完成します。

 

 

作りたい表を作るデザインの方法

htmlで作った表の見た目を変えていくためには、cssを使います。

cssにはhtmlにデザインをつける役割があります。
htmlと同じファイルにコードを書くことも可能ですが、別々のファイルに書く方法が一般的!

htmlと別のファイルに書いたcssをhtmlに読み込むためには、html内で下記のコードを指定する必要があります。

 

では、ここからは主にCSSを変えていくので、htmlと混ざってしまわないように注意してください!
cssで見出しについて変えたい時は<th>、それ以外を変えたい時は<td>に対して指定していきます。

 

見出しを変えたい時

・見出し無しにするー<thead></thead>・<th>タグを抜く
見出しをなくしたい時は<thead></thead>タグと<th>タグを抜くだけで、見出しのない表にすることができます。
ただ情報を並べたいだけの時は、<table><tbody><td><th>だけを使います。

色が付いている部分の<thead>を抜いて、<th></th>を<td></td>に変えます。

 

そうすると下の画像のように、見出しをなくすことができます。

 

 

・見出しを縦に並べたいー<th><td>を1つの<tr>の中に
基本の通りコードを書くと、見出しは横に並んでいきます。

このように<tr>タグの中に見出しだけが並んでいたものを、

このように<tr>タグの中に横に並べたい見出しとデータを一緒に入れることによって、見出しを縦に並べることができます。
先程までのデータを書き換えたものがこちらです。

 

実際にこのように横並びの表にすることができました。

 

罫線を変えたい時

罫線のスタイルはborder属性を使ってまとめて線の種類・太さ・色を指定することができます。
線の種類・太さ・色の順番は、どのような順番になっても大丈夫です。
罫線は先ほども出てきましたが、それぞれのセルの周りに引かれているイメージなので、tableタグに対して指定するのではなく、thタグ・tdタグに指定を行ってください。

 

 

ここでは border : 線の種類 太さ 色の順番で指定がされています。
よく使われる線の種類としては、solid(実線)・dotted(点線)・dashed(破線)・double(二重線)none(なし)があります。用途に合わせて使い分けてください。

 

 

表のデザインを変えたい時

・背景の色を変えるーbackground-color属性
表の背景色を変えたい時は、色を変えたい行や列に対してbackground-color属性で指定します。

ここでは、先ほどまで白だった背景を変えてみました。

 

・余白を調節するーpadding属性
余白を取る時は、padding属性で指定していきます。


・幅を変えるーwidth属性

幅を変える時は、width属性で指定していきます。

この時、いつもと同じように px と %どちらで指定しても構いません。
ただし、スマホ対応のこと考えるとpxで指定する方が良いかもしれません。

 

・高さを変えるーheight属性
高さを変える時は、height属性で指定していきます。

このときに使うことができるのはpxです。

 

・結合させる(横)ーcolspan属性
横向きに結合させたい時は、colspan属性で指定していきます。
注意して欲しいのは、結合させる時はcssではなく、htmlで指定していくということです。
わかりやすくするために、cssで文字を中央寄せにしておきます。
繋げたいセルのはじまりの<th>(または<td>)にcolspan = "繋げたい数"を書き足します。

 

・結合させる(縦)ーrowspan属性
縦向きに結合させたい時は、rowspan属性で指定していきます。
ここでも、cssではなくhtmlで指定していきます。
繋げたいせるの始まり(繋げたいセルの中で一番上にあるもの)の<th>(または<td>)にrowspan="繋げたい数"を書き足します。

 

 

プラスαで知っておくと便利なこと

スマホの画面に対応させる

スマホに対応するやり方は大きく分けて大きく分けて2つあります。では1つずつ見ていくことにしましょう。

・横スクロールできるようにする
横スクロールができるようにするためには、htmlとcssの両方で指定します。

①htmlで、tableタグを囲むdivタグを作る

 

②cssで①に対して5つの指定を行う

 

指定した5つの意味は以下の通りです。
overflow: auto;  表をスクロールさせる
white-space: nowrap; セルの中の折り返しを禁止する
::-webkit-scrollbar スクロールバーを追加する
::-webkit-scrollbar-track スクロールバーを追加する
::-webkit-scrollbar-thumb スクロールバーを追加する

 

・横幅を100%にする
th・td共に横幅を100%に指定することによって、スマホの画面に収めていきます。

縦に並べることでスクロールで見ることができるようになります。

 

 

データ部分だけスクロールできるようにする

設定するにはテーブルヘッダ要素とテーブルボディ要素を定義し、各列にclassを振り分けて幅を設定する必要があります。テーブルヘッダをdisplayプロパティで固定し、テーブルボディは縦軸スクロールで高さを固定します

①htmlで、見出しの部分をテーブルヘッダ要素・データの部分をテーブルボディ要素として定義します。

 

②次にcssのコードを書いていきます。

増えたのは色がついている部分です。
display: block; で高さや幅を決められるようにします。
overflow-y: scroll; がスクロールを可能にする属性です。
height: 150px; の数字を変えると表のスクロール部分の高さを変更することができます。

 

 

表のデザイン例まとめ

元となる表のhtmlのコードはこちらです。

シンプルな表

シンプルで使いやすい表のコードを紹介します。

この表では、表自体の罫線は引かずにborder-bottom属性でアンダーラインを引きました。
border-bottom :線の太さ 線の種類 線の色 で指定できるので自分好みの色や太さに変更してみてください。

 

ビジネス向けの表

企業のHPで使えるような、少し堅めの表のコードを紹介します。

先ほど使ったborder-bottom属性をここでも使っています。前述の通り線の種類はsolid(実線)・dotted(点線)・dashed(破線)・double(二重線)none(なし)などがあるので使いたいものに合わせて使ってみてください。
色はもちろん覚える必要がなく、「css 色」などで検索してみるとたくさん出てくるので使ってみてください。

 

ポップな表

罫線を引かないことで、親しみやすい表に感じられます。
ここでは行ごとに色を変える方法をお伝えします。

table tr *:nth-child()とすることによって()の中にある数字の列について一気に指定することができます。

 

 

表を作るtableタグまとめ

いかがでしたでしょうか?
ここで押さえておいて欲しいことは、<tr> <th> <td>をそれぞれどんなときに使うのかが分かっているということです。基本がわかっていれば、あとは調べながらcssを調節していくだけなので、ぜひたくさん書いて基本を覚えていきましょう。

1ヶ月でHTML・CSSができる!「DMM WEBCAMP」とは?

ー今のプログラミング学習に不安を抱えていませんか?ー
自分にスキルを身につけるため、今の仕事を辞めるため、
様々な理由でプログラミングを学んでいる皆さん、お疲れ様です。
突然ですが、「この勉強法で大丈夫かな?」「モチベーションを保つのが難しい」こんな思いを抱えていませんか?
そんなあなたにオススメしたいのがDMM WEBCAMPという選択です!
短期集中型のスクールで、効率よくプログラミングのスキルを身につけることができます。
講師にわからないことをすぐ質問・自分のスケジュールに合わせてスクールに通い放題!
DMM WEBCAMPなら転職サポートもあります。
学習の疑問点やWebスキルのマスターの仕方がわかる無料説明会も開催しています。
ぜひ一度話を聞いてみませんか?
おすすめの記事