HTMLで表（テーブル）を使いたい場合、tableタグを利用します。しかし、タグの使い方が分からず諦めた人も多いでしょう。しかし、読者に上手く伝えるためには、文章よりも表を使う方が伝わりやすい場合が多々あります。
そこで本記事では、HTMLで表を書く方法についてわかりやすく解説しています。この機会にtableタグの使い方を理解して、サイトの質を向上できるようにしましょう。
目次
HTMLで表をつくる基本的な書き方
HTMLで表を作るには、tableタグを使います。そこで、まずはtableタグの基本構造について理解しましょう。
例として、簡単な表を作ってみます。
See the Pen
PozpVKb by sho-go (@sho-go)
on CodePen.
上記の通り、tableタグは基本的に次の4つのタグで構成されています。
- tableタグ（表全体を定義するタグ。）
- trタグ（表の行を定義するタグ。）
- thタグ（データの見出しタグ。項目名などで使用。）
- tdタグ（データの値タグ。thに対する値などで使用。）
次に、各タグの使い方について詳しく学んでいきましょう。また、使われる機会の多いセル同士を結合する方法についても、あわせて解説していきます。
tableタグで表を定義する
HTMLで表を使いたいときには、tableタグで表全体を囲みます。また、枠線の表示を指定することなどもできます。
See the Pen
yLJMZoj by sho-go (@sho-go)
on CodePen.
上記のコードでは、枠線の太さを2、色を緑で指定しています。
trタグで行を設定する
HTMLの表ではtrタグで囲まれた範囲を一つの行として認識します。そのため、行を追加するときには、trタグを追加し、trタグ内に各データを入力する必要があります。
See the Pen
XWKMOay by sho-go (@sho-go)
on CodePen.
上記のコードでは、新しく「ポテト（特大）」の行を追加しました。
thタグに見出しを書く
HTMLの表では、見出しとなるデータにはthタグを使用します。thタグは絶対に使わなければいけないわけではありません。ただし、thタグを使うことで表示結果がかわるため、ユーザーにとっては、表が見やすくなる効果があります。
See the Pen
oNLZmGv by sho-go (@sho-go)
on CodePen.
上記のコードでは、行を2列にし、最初のデータを見出しとしています。
thタグは、必ずしも行単位で使う必要はなく、表によっては列単位で使っても問題ありません。ユーザーにとってわかりやすい表現方法を探しましょう。
tdタグにデータを書く
HTMLの表で、各見出し（項目）に対するデータに使用するのがtdタグです。
ちなみに、trタグで囲まれたtdタグの数と順番は、各行で一致させる必要があります。もちろんthタグについても同様です。
See the Pen
BazWMwW by sho-go (@sho-go)
on CodePen.
上記のコードでは、thタグに「サイズ」を追加しました。項目の追加に伴い、各行にも追加でtdタグを記載しています。
rowspanタグで縦のセルをつなげる
HTMLの表でもExcelなどと同様にセルを結合することができます。縦のセルを結合させるときに使うのがrowspanタグです。
rowspanタグは、thタグかtdタグに対して「rowspan=”つなげたい数”」の属性を追記することで、任意の数のセルを縦につなげることができます。
See the Pen
BazWMwW by sho-go (@sho-go)
on CodePen.
上記のコードでは、一番左の列のデータを縦に3つ結合しています。
colspanタグで横のセルをつなげる
HTMLの表で、横のセルをつなげたい場合にはcolspanタグを使います。使い方はrowspanタグと同じで、thタグかtdタグに対して「colspan=”つなげたい数”」の属性を追記することで、任意の数のセルを横につなげることができます。
See the Pen
ExyWrwr by sho-go (@sho-go)
on CodePen.
上記のコードでは、1行目の項目（メニュー）を横に2つ結合しています。
HTMLで表のデザインを変更する書き方
HTMLでは表のデザインを変更できます。書き方は、スタイルシート（CSS）を使う方法がおすすめです。
CSSで各プロパティを変更することで、表の各デザインを変更することができます。
- 表全体やセルの幅
- セルまわりの余白
- 文字色や背景色
- 文字の位置（左寄せ、中央寄せなど）
- 枠線の見た目
上記であげたのは、設定できる項目の一例です。
なお、各項目を変更したサンプルコードを紹介します。
See the Pen
OJXpdOW by sho-go (@sho-go)
on CodePen.
全ての変更方法を覚える必要はありませんが、デザインを変更できるということは知っておきましょう。そして、サイトデザインに合わせた表をデザインしてみましょう。
まとめ
いかがでしたでしょうか？
HTMLで表を書く方法について紹介してきましたが、意外に簡単だと思えたのではないでしょうか？
tableタグで使用する各タグの意味さえ理解してしまえば、後は経験の問題です。
読者にわかりやすいサイトを作るためにも、HTMLの表を使えるようになりましょう。
