HTMLでtableタグのセルを結合する方法

HTMLで表を作成するためにtableタグを使用する機会は結構あると思います。
実はtableタグで作成した表も、エクセルのようにセルを結合することができるのです！
今回は簡単にセルを結合する方法をご紹介いたします！

縦方向に結合する方法

セルを縦方向に結合する場合はrowspan属性を使います。
記述する内容はとても簡単で、結合したいセルの一番最初のth / tdタグにrowspan属性を記述し、数値で何個分縦方向に結合をするかを指定します。

結合する場合、rowspan属性に書いた数の行分th / tdタグの数を調整する必要があります。
下記の例のようにrowspan属性に3を指定し3行分を結合する場合、1行目にrowspan属性を指定し、2〜3行目を結合させます。
この時、結合させる2〜3行目に当たるtrタグ内にはth / tdタグを書かないようにします。（結合させないセルの数分だけ記述します。）

セルを結合させているのにth / tdタグを同じ数だけ書いてしまうと、間違った記述の例のようにテーブルが崩れてしまいます。

See the Pen 縦に結合 by spiqa design (@spiqa_design) on CodePen.

横方向に結合する方法

セルを横方向に結合する場合はcolspan属性を使います。
使い方はrowspan属性と同じく、結合したいセルの一番最初のth / tdタグにcolspan属性を記述し、数値で何個分横方向に結合をするかを指定します。

注意点もrowspan属性と同じで、結合させる列のtrタグ内にはth / tdタグを書かないようにします。

See the Pen 横方向に結合 by spiqa design (@spiqa_design) on CodePen.

組み合わせて使用する方法

rowspan属性とcolspan属性は一緒に書くことができるため、様々な形でセルを結合させることができます。
組み合わせていくとどこを消せば良いのか分かりにくくなってしまうため、慣れるまではコメントアウトを活用しながら作成するのをおすすめします！

See the Pen Untitled by spiqa design (@spiqa_design) on CodePen.

まとめ

th / tdタグの数には注意が必要ですが、色々な組み合わせの表を作成できると表現の幅が広がりますね！
簡単に複雑なテーブルのHTMLタグを作成できるツールもあるため、複雑なセルの結合をしたい場合はツールを活用するのもおすすめです！

こちらもおすすめ

[card url=”https://note.spiqa.design/wp/html5-all/”]