/*サーチコンソール*/ /*google adcense*/

初心者向けテーブル(表)の作成方法/【HTML】

2020年1月16日

こんにちは、Kosei(https://twitter.com/pompom_stk)です。

今回はテーブル(表)の作り方について解説していきます。

テーブル作成は使用する要素が多く難しく感じるかもしれません。できるだけわかりやすく解説しましたので、一緒に頑張って理解していきましょう!

テーブルの作り方
この記事の要点まとめ
テーブルって何?
HTMLにおいてテーブルとは、表を意味する。
テーブル作成に使用する要素
この記事で紹介するテーブル作成に使用する要素は8種類。
table要素
テーブルをつくる際に使用する要素。
caption要素
テーブルのタイトルを表示する要素。
tr要素
テーブルの行を表す要素。
th要素
テーブルの見出しセルを表す要素。
td要素
テーブルのセルを表す要素。
thead , tbody , tfoot要素
要素の行グループを表す要素。
セルを結合する属性
セルを結合するにはcolspan属性、もしくはrowspan属性を使用する。
しっかりと理解してテーブルを作ってみよう
テーブルは一度自分で実際に作ってみて、しっかりと理解することが大切。

テーブルって何?

ハリボー
ハリボー

テーブル?食卓かな?

間違いではないんだけど、IT用語でテーブルは「表」を意味する言葉として使われるよ。

ヒナ
ヒナ

HTMLを使いwebサイトやブログを作成したり、記事中でわかりやすくまとめたりするために、テーブルはよく使われます。テーブルのイメージがつかない人ももしかしたらいるかもしれませんので、先に例を載せておきます。

家計簿
1月 2月 3月 4月 5月 合計
食費 50,000 45,000 50,000 40,000 60,000 245,000
電気代 15,000 15,000 12,000 13,000 10,000 65,000
雑費 10,000 5,000 15,000 10,000 25,000 65,000
今年の合計出費 375,000

これが「テーブル」です。今回はこれを例にテーブルの作り方についてご紹介します。

この記事はHTMLに関する記事なので、CSSについての解説は割愛します。テーブル作成においてCSSは枠線を付けたり、枠のサイズの設定、背景色の設定などをすることができます。CSSについては別記事を用意しますので、少々お待ちください。

また、この記事では「要素」や「属性」といった用語を頻繁に使用しています。これらの用語についてよくわからないという方は「タグ中の要素、属性とは?HTMLの基本的な書式」の記事を先に読んだ方が、この記事をより理解できると思います。

テーブル作成に使用する要素

テーブルを作るのに使う要素は多いから、頑張ろうね!

ヒナ
ヒナ

今回解説していく「テーブルを作るのに使用する要素」は、8種類です。とても多いように思えますが、この中で絶対に使わないといけないものは4種類です。この4種類さえ理解できれば、一般的なテーブルは作成することができます。

その4種類は<table> , <tr> , <th> , <td>の4種類です。この4種類の要素は、テーブルを作るに当たって必要不可欠です。caption要素は必要であれば使用しますが、僕はあまり使いません。

<thead><tbody><tfoot>の3つについては、ほとんど使ったことがありません。使用しなくてもテーブルをつくることはできますが、一応紹介しておきます。この他にもcol要素やcolgroup要素がありますが、今回は省きます。

テーブルをつくる要素
クリックで拡大

table要素

table要素はテーブル(表、枠組み)を作る際に使用する要素です。読み方はそのまま「テーブル」で、IT用語では表を意味します。HTMLにおいてテーブルを作るとき、全てを囲む親要素となります。

HTML4(前のバージョン)では、枠線を表すborder属性、表示する位置を表すalign属性などが使用されていました。しかしHTML5(現在のバージョン)では、これらは非推奨となりました。使用できなくなったというわけではありませんが、これらを実現するにはHTMLではなくCSSを使用するようにしましょう。

table要素は、中に子要素を入れずにテーブルだけを記述しても何も表示されません。

※CodePenの使い方がわからない方はこちら

See the Pen table要素 by Kosei@SplaTech (@pompom_stk) on CodePen.

caption要素

caption要素は、テーブルのタイトルを表示します。読み方は「キャプション」で、説明文という意味を持っています。

caption要素はtableの中で最初の子要素として記述します。開始タグと終了タグで囲んだ文字がテーブルのタイトルとなり、表示されます。

See the Pen caption要素 by Kosei@SplaTech (@pompom_stk) on CodePen.

tr要素

tr要素は「table row(テーブル ロウ)の略称で、テーブルの行を表します。開始タグ(<tr>)から終了タグ(</tr>)までが横1行となり、その中にセルを表すth要素やtd要素を記述します。

tr要素もtable要素同様、子要素に何も持たないと何も表示されません。CodePenによる例は省略します。

th要素

ここからテーブルらしくなります。th要素は「table hrader(テーブルヘッダー)」の略称で、テーブルの見出しセルを表します。th要素は、一般的なブラウザでは文字がセンタリングされ、太字で表示されます。th要素は必ずtr要素の中に入れるようにしましょう。

開始タグと終了タグの間に入れた文字がテキストとして表示されます。下のテーブルではtr要素の子要素、table要素の孫要素になります。

See the Pen xxbpxGJ by Kosei@SplaTech (@pompom_stk) on CodePen.

td要素

td要素は「table date(テーブルデータ)」の略称で、テーブルのセルを表します。thと似ていますが、テーブル内で見出しを表す場合はth、内容やデータを表す場合はtdを使用しましょう。今回例にしたテーブルはCSSによって文字がセンタリングされていますが、基本的にtd要素を使用したセルは文字が左寄せで表示されます。td要素もth要素同様、tr要素の中に入れましょう。

下のテーブルではtr要素の子要素、table要素の孫要素になります。

今回例にしているテーブルでは緑色部分がth要素、灰色っぽい色部分がtd要素になっています。

See the Pen td要素 by Kosei@SplaTech (@pompom_stk) on CodePen.

thead , tbody , tfoot要素

それぞれ「table header」、「table body」、「table footer」の略称で、ヘッダ、ボディ、フッタ要素の行グループを表します。この3つを使うことで、テーブルの構造を明確にすることができます。ですが、この3つは使わなくてもテーブルを作成することはできるので、省略しても構いません。

今回の例でいくと1行目の月が書いてある部分がこのテーブルのヘッダ、2.3.4行目の使った出費が書かれた部分がボディ、5行目の合計出費が書かれた部分がフッタとなります。それぞれが始まる部分にコメントを書いていますので、参考にしてみてください。

また、どのコード部分がどの行かわからないかもしれないので、何行目を表しているコードかというのもコメントアウトしています。こちらも参考にしてみてください。

5行目の作り方は次項で解説します。

See the Pen テーブル by Kosei@SplaTech (@pompom_stk) on CodePen.

セルを結合する属性

前項のCodePenの5行目の「今年の合計出費」部分は6つのセルが結合されています。Excelでいうところの「セルを結合して中央揃え」になっています。

このようにセルを結合して中央揃えにするには、「colspan属性」もしくは「rowspan属性」を使用します。colspanは横方向にセルを結合し、rowspanは縦方向にセルを結合します。結合するセル数は、属性値に記述します。

今回の例では「今年の合計出費」部分は横方向に6つのセルが結合されているので、<th colcpan="6″>となっています。

セルの結合
クリックで拡大

しっかりと理解してテーブルを作ってみよう

ハリボー
ハリボー

テーブル、難しい、、

実際に作ってみた方がしっかりと理解できるよ!

ヒナ
ヒナ

テーブルを作成するのに使う要素は多く、難しかったと思います。ですが始めに言った通り、table要素、tr要素、td要素、th要素、この4つさえ理解できればテーブルを作成することができます。

この記事を見て例として出したコードをそのまま真似してでもいいので、実際に作ってみることをおすすめします。ただHTMLで作るだけだと、枠線のないわかりにくいものになってしまいます。今回CodePenで例にしているテーブルのCSSはこのブログで使っているテーブルのデザインに近付けています。もしCSSがよくわからないという方はCSSのコードをそのまま使っても大丈夫です。

テーブルは一度自分で実際に作ってみて、しっかりと理解することが大切です。