tableタグを使って表を作る

こんにちは、ゆんつです。

HTMLにtableという表を作るためのタグがあります。

表というと僕は真っ先にエクセルで作ったこんな表を連想します。

こんな感じの表がtableタグとその関連のタグを使うことでWEBページ上で作成できるのです。

割と独特な書き方をするタグで、書き慣れていないといざ表を作る時に考えてしまうことが多いので、今日はtableタグによる表の作り方などについて書き残しておきます。

tableタグによる表の作り方

使うタグは4つです。

表完成までのイメージとしては、tableタグでまず表を作ることを宣言して、そのtableタグの中にtrタグを入れて行を定義し、trタグの中に更にthタグ、tdタグを入れ子にしていく感じですね。

先ほどの表に当てはめてみるとこんな感じになります。

実際にtableタグを使って表を作ってみます。

See the Pen MxwovE by konpure (@yuntu) on CodePen.0

こんな感じになりました

まだ線はついていません。

線がついていないのでtable要素、th要素、td要素にCSSで線を付けます。

See the Pen table-border by konpure (@yuntu) on CodePen.0

線を付けただけで背景色を付けたりセルの大きさを整えていませんが、一応表ができています。

でも見慣れた表とは決定的に違うものがあります。

それは線が2重であるということです。

ゆんつ

あれ？

なぜ線が2重なのか？

tableだけに線を設定してみます。

See the Pen table-border1 by konpure (@yuntu) on CodePen.0

ぐるっと表の周囲が線で囲まれました。

次にthとtdだけに線を設定してみます。

See the Pen table-border2 by konpure (@yuntu) on CodePen.0

見出しとデータセルの周りに線が付きました。

そしてtableを構成する要素全て、つまりtable、ht、tdに線がつくと

See the Pen table-border by konpure (@yuntu) on CodePen.0

ヘッダーセル、データセルを囲む線と、それらをまとめて囲むtableの線とで二重線になるのです。

表の線を１本にする

このような2重線ではなく1本の線にしたい場合はCSSでtable要素に対し

を指定します。

その結果

See the Pen table-collapse by konpure (@yuntu) on CodePen.0

2本あった線は1本になり、すっきりとした表のスタイルになります。

セルを結合する

エクセルと同じようにセルを結合することもできます。

行の結合

See the Pen rowspan by konpure (@yuntu) on CodePen.0

列の結合

See the Pen VRvzPY by konpure (@yuntu) on CodePen.0

とても簡単に結合することが出来ます。

サッと書けるようになりたい

以上基本的なtableの作り方について書きました。

あとはそれぞれの要素の幅を広げたり、背景色をつけたりすれば普段エクセルなどで作成する表と同じものがHTMLとCSSを使って作成することが出来ます。

See the Pen table by konpure (@yuntu) on CodePen.0

tableはプロフィール欄や会社概要ページなど、表形式で情報を表示したほうが見やすい場面では良く用いられています。

自分のイメージする表をあまり考えこまずにHTMLとCSSでサっとかけるようになりたいですね。

ゆんつ

本日は以上です

それでは、またですー。