HTMLでテーブルのセルを結合する方法を解説！
HTMLでテーブルのセルを結合する方法を解説します。セルを縦または横につなげることを結合と呼びます。セルを結合することでより複雑なテーブルを作成することができます。ここではHTMLを用いてテーブルを結合する方法について解説します。
HTMLでテーブルのセルを結合したい
HTMLで縦、もしくは横方向にテーブルを結合してより見やすいテーブルを作成したい時があります。
そんな時にどのようにすればいいのかHTMLのサンプルコードを用いて解説します。
今回は以下のような3×3のテーブルを用いて、テーブルを結合する方法について解説します。
HTMLでテーブルのセルを結合する方法
ここでは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[クメル]ではプログラミング学習が出来るカリキュラムを期間限定で無料で提供しています。
無料登録することで、すぐにプログラミング学習を始められます。ぜひカリキュラムをお試し下さい！
