テーブルで表を作成していて、セルを結合したいときってありますよね。ここではその方法についてお話していきます。
th要素・td要素を横に結合させる方法
まずは、セルを横に結合させる方法です。セルの横の結合は、下記の属性を結合したいthタグまたはthタグに記入します。
colspan="結合するセルの数"
下記をご覧ください。
ボタンで表示を切り替えてご覧ください。
See the Pen table06 by ken (@ken81) on CodePen.
上記のテーブルの「１」と「２」を結合してみましょう。
See the Pen table07 by ken (@ken81) on CodePen.
２つのtd要素を結合する場合は、その行のtd要素をひとつ削除し、もうひとつのtdタグにcolspan="2"と記入します。
３つのtd要素を横に結合したい場合は、さらにtd要素をひとつ削除して残ったひとつのtdタグにcolspan="3"と記入します。
See the Pen table08 by ken (@ken81) on CodePen.
上記の方法は、td要素でもth要素でも変わりません。
th要素・td要素をタテに結合させる方法
次はテーブルのタテのセルを結合する方法です。これは基本的に横に結合する方法と原理は同じです。横の場合はcolspanでしたが、タテの場合はrowspanと記入する点が違います。
rowspan="結合するセルの数"
さっそくやってみましょう。
See the Pen table06 by ken (@ken81) on CodePen.
先ほどと同じ例で、今度は真ん中のセルを２つ（２番と５番）をタテに結合してみます。
この場合、上にある方（２番）のtd要素は残して下（５番）のtd要素を削除します。そして、２番のtdタグにrowspan="2"と記入します。先ほどと同じく「2」は結合するセルの数を表しています。
See the Pen table09 by ken (@ken81) on CodePen.
はい、これでタテのセルが２つ結合されました。さらに３つのセルを結合したい場合は、８番のtd要素も削除して２番のtdタグのrowspan="2"をrowspan="3"に変更するだけですね。
See the Pen table10 by ken (@ken81) on CodePen.
以上がセルの結合の仕方でした。
