tableタグを使って表を作る

HTML&CSS

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

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

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

エクセルで作った表

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

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

スポンサーリンク

tableタグによる表の作り方

使うタグは4つです。

table表全体を囲む
tr行を定義する
thヘッダーセル(見出し)を定義する
tdデータセルを定義する

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

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

HTMLで表を作成するイメージ

実際に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の線とで二重線になるのです。

表の線を1本にする

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

border-collapse: collapse;

を指定します。

その結果

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

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

セルを結合する

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

行の結合thタグ又はtdタグにrowspan=”結合するセル数”を記入する
列の結合thタグ又はtdタグにcolspan=”結合するセル数”を記入する

行の結合

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でサっとかけるようになりたいですね。

ゆんつ
ゆんつ

本日は以上です

それでは、またですー。

HTML&CSS
ゆんつをフォローする
スポンサーリンク
スポンサーリンク
こんぷれ

コメント

タイトルとURLをコピーしました