こんにちは、ゆんつです。
HTMLに「table」という表を作るためのタグがあります。
表というと僕は真っ先にエクセルで作ったこんな表を連想します。
こんな感じの表を、tableタグとその関連のタグを使うことでWEBページ上で作成できるのです。
割と独特な書き方をするタグで、書き慣れていないといざ表を作る時に考えてしまうことが多いので、今日はtableタグによる表の作り方などについて書き残しておきます。
tableタグによる表の作り方
使うタグは4つです。
| table | 表全体を囲む |
| tr | 行を定義する |
| th | ヘッダーセル（見出し）を定義する |
| td | データセルを定義する |
表完成までのイメージとしては、tableタグでまず表を作ることを宣言して、そのtableタグの中にtrタグを入れて行を定義し、trタグの中に更にthタグ、tdタグを入れ子にしていく感じですね。
先ほどの表に各タグを当てはめてみると、以下のような感じになります。
実際にtableタグを使って表を作ってみます。
See the Pen
table by konpure (@yuntu)
on CodePen.
まだ線はついていません。
線がついていないのでtable要素、th要素、td要素にCSSのborderプロパティで線を付けます。
See the Pen
table-border by konpure (@yuntu)
on CodePen.
線を付けただけで背景色を付けたりセルの大きさを整えていませんが、一応表ができています。
でも見慣れた表とは決定的に違うものがあります。
それは線が2重であるということです。
あれ？
なぜ線が2重なのか？
tableだけにborderを設定してみます。
See the Pen
table-border1 by konpure (@yuntu)
on CodePen.
tableにborderを設定すると、表の周囲がぐるっと線で囲まれました。
次にthとtdだけに線を設定してみます。
See the Pen
table-border2 by konpure (@yuntu)
on CodePen.
thとtdにborderを設定すると、見出しとデータセルの周りに線が付きました。
つまりtable、ht、tdに線がつくと、ヘッダーセル、データセルを囲む線と、それらをまとめて囲むtableの線とで二重線になるのです。
See the Pen
table-border by konpure (@yuntu)
on CodePen.
表の線を１本にする
このような2重線ではなく1本の線にしたい場合は
します。
border-collapseは隣接するセルの境界線についての設定を行うプロパティで、その値には、隣接するセルで境界線を共有する「collapse」と、隣接するセルが個別に境界線を持つ「separate」があります。
初期値ではborder-collapseの値はseparateに設定されており、それぞれのセルが境界線を持つので線が2重になります。
よってborder-collapseの値を、境界線を共有するcollapseにすることで境界線が共有（1つ）になり、線も１つになります。
See the Pen
table-collapse by konpure (@yuntu)
on CodePen.
2本あった線は1本になり、すっきりとした表のスタイルになります。
セルを結合する
エクセルと同じようにセルを結合することもできます。
| 行の結合 | thタグ又はtdタグにrowspan="結合するセル数"を記入する |
| 列の結合 | thタグ又はtdタグにcolspan="結合するセル数"を記入する |
行の結合
See the Pen
rowspan by konpure (@yuntu)
on CodePen.
列の結合
See the Pen
colspan by konpure (@yuntu)
on CodePen.
このように、とても簡単にセルを結合することが出来ます。
サッと書けるようになりたいね
以上、基本的なtableの作り方について書きました。
あとは、それぞれの要素の幅を広げたり、背景色をつけたりすれば普段エクセルなどで作成する表と同じものがHTMLとCSSを使って作成することが出来ます。
See the Pen
table by konpure (@yuntu)
on CodePen.
tableはプロフィール欄や会社概要ページなど、表形式で情報を表示したほうが見やすい場面では良く用いられています。
自分のイメージする表を、あまり考えこまずにHTMLとCSSでサっとかけるようになりたいですね。
本日は以上です
それでは、またー。
コメント