テーブルタグでセルを結合するにはある属性を使えば可能です。
今回は例を見ながらそのやり方をご紹介します。
効率よくコーディングしたい人はこちら
テーブルタグでセルを結合する方法
テーブルタグでセルを結合するには、cssではなくhtml側をいじる必要があります。
また縦方向と横方向で書き方が違うので、今回はその方法もご紹介します。
基本となるテーブルタグ
まずは基本となるコードを見てみます。
See the Pen
テーブルタグ by junpei (@junpei-sugiyama)
on CodePen.
セルを結合する際、行（横方向）か列（縦方向）で使う属性が異なる為、分かりやすくしました。
またCSSに以下のあまり見慣れないかも知れないプロパティがあります。
table {
border-collapse: collapse;
}これが無いとどうなるかというと・・・
See the Pen
テーブルタグ（隙間あり） by junpei (@junpei-sugiyama)
on CodePen.
このようにborderの間に隙間が出来てしまいます。
この隙間をなくすには先ほどの border-collapse: collapse; の1行を書けばOKです。
縦方向のセルを結合する
まずは縦方向のセルを結合する方法についてみていきます。
縦方向のセルを結合するためには、td要素やth要素に rowspan="" を追記します。
"" の中には結合したい数を入れます。
実際に見てみます。
See the Pen
テーブルタグ（縦方向） by junpei (@junpei-sugiyama)
on CodePen.
HTMLをクリックしてコードを見て頂きたいのですが、結合させたい1行2列の tdタグに rowspan="2" を追記しています。
縦方向に2つ分結合するという意味です。
ここで重要なのは結合させたい箇所と隣接する箇所は削除する必要があるという事です（上記では分かりやすくするために削除する箇所をコメントアウトしています）
上記の場合は2行2列の部分ですね。
もし削除する場所が3行2列だったり、rowspan="3" であったり、削除をしなかったりすると以下のように崩れます（以下は削除しなかった場合です）
See the Pen
テーブルタグ（失敗） by junpei (@junpei-sugiyama)
on CodePen.
もし rowspan="3" の場合は最初の例で言えば3行2列も削除すれば大丈夫です（縦3マス分が結合されます）
横方向のセルを結合する
続いて横方向です。
横方向の場合は colspan="" を追記します。
考え方は縦方向の時と同じなので早速見てみましょう。
See the Pen
テーブルタグ（横方向） by junpei (@junpei-sugiyama)
on CodePen.
縦横両方のセルを結合する
また縦横両方のセルを結合させることも可能です。
See the Pen
テーブルタグ（縦横結合） by junpei (@junpei-sugiyama)
on CodePen.
これも基本となるコードからどこを削除するかを間違えないように気を付けましょう。
以上です。
Brainランキング1位獲得 ＆ 3日で500部突破 クチコミ約300件 今だけ！5つの無料特典あり🎁 👇画像をクリック
コーディング案件の単価と作業効率を上げる！
（平均スコア）
