HTMLでテーブルのセルを結合する方法を解説！

HTMLで縦、もしくは横方向にテーブルを結合してより見やすいテーブルを作成したい時があります。

そんな時にどのようにすればいいのかHTMLのサンプルコードを用いて解説します。

今回は以下のような3×3のテーブルを用いて、テーブルを結合する方法について解説します。

ここではHTMLのみを用いてテーブルを縦方向、もしくは横方向に結合する方法についてそれぞれ解説します。

まず縦方向に結合する方法について解説します。縦方向に結合したい場合、rowspan属性を用います。

結合したいと思う要素にrowspan="結合したい数"属性を追記します。

ここでは1×1と1×2を結合したいと思います。結合する数は2つなので、rowspan="2"となります。

では実際にサンプルコードを用いて挙動を見てみましょう。

このようにセルが縦方向に結合されていて、まとまっていて見やすいテーブルを作成することが出来ます。

では次に横方向に結合したいと思います。横方向に結合する場合にはcolspan属性を用います。

使い方はrowspanと同じくcolspan="結合したい数"を属性として結合したい要素に追記となります。

ここでは1×1と1×2を結合したいと思います。結合する数は2つなのでcolspan="2"属性を結合したい要素に追記します。

では実際にサンプルコードを用いて挙動を見てみましょう。

このようにセルが横方向に結合され、まとまっていることが分かります。

テーブルのセルの結合は横方向と縦方向を組み合わせることも可能です。

横方向と縦方向に組み合わせて結合するには、結合したい要素にrowspanとcolspanを追記します。

今回は2×1、2×2、3×1、3×2を結合したいと思います。

では実際にサンプルコードを用いて挙動を見てみましょう。

このようにセルが横方向と縦方向が組み合わされて結合していることが分かります。

いかがでしたでしょうか？

セルを結合することでよりまとまった見やすいテーブルを作成することが出来ます。

ただし場合によってはrowspan、colspan属性が効かないときがあります。

その時の対処法は以下の記事で解説しているので、以下の記事とセットでぜひテーブルのセル結合を試してみてください。

Qumeru[クメル]ではプログラミング学習が出来るカリキュラムを7月31日までの期間限定で無料で提供しています。