HTML,CSSを使って「表」を作成する際には「tableタグ」を使用します。
しかし、「tableタグ」は「trタグ」「thタグ」「tdタグ」など複数のタグと一緒に使用するので、綺麗な表の構造を作るためには、きちんと使い方を理解しておく必要があります。
今回の記事では、最初は少しつまずきがちな、「tableタグ」の使い方について学んでいきましょう。
- tableタグと、関連するタグの使い方
- HTMLで表を作るときの構造
- 表の見た目の作り方
HTMLで表の構造を作る
まずは、HTMLで「表」を作成する際の基本構造を確認していきましょう。
tableタグ：「表全体」を形作る構造
trタグ：表の中の「行」を形作る構造（table row）
thタグ：表の「見出し」を形作る構造（table head）
tdタグ：表の「データ」を形作る構造（table data）
HTMLで「表」を作成する際には、以上の４つのタグを使います。
それぞれの役割を画像のように理解しておければ大丈夫です。
CSSで表にスタイルを当てる
次に、HTMLで作成した表に対してCSSでスタイルを当てていきましょう。
今回は、いくつかパターンに分けて紹介していきます。
表に枠線をつける
See the Pen Untitled by ZeroPlus (@zeroplus-programming) on CodePen.
参考コードのように「borderプロパティ」を記述することで、表に枠線をつけることができます。
表の枠線の間の隙間を設定する
See the Pen Untitled by ZeroPlus (@zeroplus-programming) on CodePen.
先ほどの例だと「tableタグ」「thタグ」「tdタグ」のそれぞれに対して「borderプロパティ」を適用していました。
そのため、枠線が２重になって見えてしまっています。
この枠線を１本にしたい場合は「tableタグ」に対し、border-collapse: collapse;を記述してあげましょう。
表の余白を整える
See the Pen Untitled by ZeroPlus (@zeroplus-programming) on CodePen.
表のセルの中の余白を整えたい場合は、「paddingプロパティ」を使用します。
表を縦方向に結合する
See the Pen Untitled by ZeroPlus (@zeroplus-programming) on CodePen.
表の項目を統合して表示したい場合は、「縦方向」か「横方向」に統合するかによって記述の方法が異なります。
こちらの例では「tdタグ」を「縦方向」に統合したいので、「rowspan属性」を記述しました。 ３つの項目を統合するので、値は「３」を記述します。
ポイントとしては、統合する箇所の「tdタグ」は記述しないことに注意しましょう。
表を横方向に統合する
See the Pen Untitled by ZeroPlus (@zeroplus-programming) on CodePen.
こちらの例では「tdタグ」を「横方向」に統合したいので、「colspan属性」を記述しました。 今回も３つの項目を統合するので、値は「３」を記述します。
表の横幅を調節する
See the Pen Untitled by ZeroPlus (@zeroplus-programming) on CodePen.
表の横幅を調節する際は、tableタグ（表全体）に対して横幅を指定してあげましょう。
thタグやtdタグなどの横幅は、tableタグの大きさによって自動で計算されます。
そのため、thタグやtdタグなどは、特に記述の必要ない場合は横幅の指定はしないでおきましょう。
表は作って覚えよう
ここまでで、HTML,CSSを用いた表の作り方を基本的なパターンを想定して説明しました。
- tableに関連する各タグの役割
- HTMLで表を作る時の構成
をこの記事で概要を理解することができればOKです。
表の作り方を覚えるときは、実際に作って覚えることが一番早いです！
この記事を読んだあとは、必ずアウトプットして知識を定着させましょう。
