今回はHTMLでテーブルを作成する方法を紹介します。

テーブル作成にあたり、覚えておくことがありますので、
先に必要なものを覚えておきましょう。

テーブルは
カラム、レコード、セルの3つで形成されます。

これは Excel でも使うことがあるのですが、
今回は まずは無料で使える LibreOffice でその概念を確認しましょう。

カラムは、列で縦の行を示します。
A とかBとか書かれているところが該当します。

Screenshot from 2016-05-25 23:22:23

レコードは、横の行を示します。
これは数字で1、2と書かれている横方向になります。

Screenshot from 2016-05-25 23:23:45

セルは1つの枠になります。

Screenshot from 2016-05-25 23:23:34

これらの概念を元に テーブルを作成していきます。

テーブルの作成は、他のHTMLタグと比べてわかりにくい構造ですが、
タグの意味がわかると比較的簡単なので、まずはタグの解説から行います。

まず、テーブルの領域そのものを

で囲みます。
なお、パラメータで border=1 と追加すると、枠線が表示されます。
今回は1ですが、ピクセル数の指定なので任意の数値を指定することができます。

そして次に行の設定をこの中へ行います。
行の設定は、tr タグで行います。

この tr 1つで横1行となります。

そして、ほとんどの場合は tr の1つめにテーブルの見出しをつけます。
見出しをつけるには th タグを使います

というようになります。

そして、それ以降ではテーブルの値を表示することになります。
値を表示するには、td タグを使います。
これにより、セルの中に表示するようになります。

概念だけではわかりにくいため、実際にコードを書いてみましょう。

実際にコードを書いたほうが理解しやすいので、Atom エディタで実践してみましょう。
なお、Emmet パッケージをいれれば簡略記法が使えるようになり、
Preview HTML パッケージをいれることで、エディタからサイトをみることができるようになります。

Emmet の記法については
Emmet チートシートで検索するとでてくるので、
調べてみると良いでしょう。

PreviewHTML は、ショートカットーで
ctrl + shit + h でエディタ右側にプレビューの表示ができます。

Atom パッケージ追加と検索することで、パッケージ追加方法はみつかりますので、
興味があれば試してみると面白いでしょう。

今回は、これらのパッケージをいれてあることを前提としてコードを書いていきます。

ゼロから作成する場合

として展開すると

というようにベースのコードが作成されます。

ubuntu の場合、tab キーで展開します。

それでは実際に Emmet 記法でテーブルを作成してみましょう。
Emmet で記述するメリットは、コードを簡略形式でかけることと
閉じタグを忘れるなどのミスを減らせることです。

として展開すると、テーブルを作成することができます。

Emmetでは内部構造にしたいのなら > を使い、
同じ階層に配置したいのなら + を使います。
パラメータ指定は [] の中に記述します。
*3 となっている部分は繰り返しの指定です。
今回は *3 なので、3回繰り返しています。

展開時のコードは以下のようになります。

それでは実際の画面をみるため、ctrl + shift + h でプレビューをみてみましょう。

Screenshot from 2016-05-25 23:56:09

このように枠付きのテーブルが作成されます。

ただし、これだけだと 、tr タグが見出しなのか、中身なのかわかりにくいため、
見出し部分には theadタグで囲み、
中身の部分には tbody タグで囲むようにします。
なお、これらのタグを使っても、テーブルには影響はありませんが、コードの可読性が良くなります。

今回は簡単なコードで実践してみましょう。

Emmet で領域ごとにまとめるときには() で囲むようにします。

これを展開すると

となります。

Screenshot from 2016-05-26 09:09:12

それでは、今回の要点のまとめをしてみましょう。

・テーブル領域の指定は table タグで行う。
・tr で行1つに該当する。
・th でテーブルの見出しを作成。
・td でテーブルの中身を作成。
・見出しとなる th の領域は thead で囲んで見やすくする。
・中身となる td の領域は tbody で囲んで見やすくする

となります。

また、今回使用した Emmet ですが、使い慣れてくると、複雑な構造のマークアップが容易にできるようになりますので
機会があれば練習していくと、コーディングがスムーズに進むようになります。