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

tableタグのセルってエクセルみたいに結合出来ない？

tableタグでセルを結合するには、ある属性を使えば可能です。

今回は例を見ながらその方法を解説していきます。

今だけ！5大無料特典あり🎁

コーディングの時給アップにはこちら！

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

テーブルタグでセルを結合するには、CSSではなくHTML側をいじる必要があります。

また縦方向と横方向で書き方が違うので、今回はその方法もご紹介します。

まずは基本となるコードを見てみます。

See the Pen
テーブルタグ by junpei (@junpei-sugiyama)
on CodePen.

セルを結合する際、行（横方向）か列（縦方向）で使う属性が異なるので分かりやすくしました。

またCSSにあまり見慣れないかも知れないプロパティがあります。

table {
  border-collapse: collapse;
}

これが無いと以下のようにborderの間に隙間が出来てしまいます。

See the Pen
テーブルタグ（隙間あり） by junpei (@junpei-sugiyama)
on CodePen.

この隙間をなくすには先ほどのborder-collapse: collapse;の1行を書けばOKです。

縦方向のセルを結合する

縦方向のセルを結合するためには、td要素やth要素にrowspan=""を追記します。

"" の中には結合したい数を入れます。

実際に見てみます。

See the Pen
テーブルタグ（縦方向） by junpei (@junpei-sugiyama)
on CodePen.

CodePenのHTMLをクリックすればコードは確認できますが、結合させたい1行2列の tdタグにrowspan="2"を追記しています。

<table>
  <tr>
    <th>見出し</th>
    <th>見出し</th>
    <th>見出し</th>
    <th>見出し</th>
  </tr>
  <tr>
    <td>1行1列</td>
    <td rowspan="2">1行2列</td>
    <td>1行3列</td>
    <td>1行4列</td>
  </tr>
  <tr>
    <td>2行1列</td>
　　<!-- <td>2行2列</td> -->
    <td>2行3列</td>
    <td>2行4列</td>
  </tr>
  <tr>
    <td>3行1列</td>
    <td>3行2列</td>
    <td>3行3列</td>
    <td>3行4列</td>
  </tr>
</table>

縦方向に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.

<table>
  <tr>
    <th>見出し</th>
    <th>見出し</th>
    <th>見出し</th>
    <th>見出し</th>
  </tr>
  <tr>
    <td>1行1列</td>
    <td colspan="2">1行2列</td>
    <!-- <td>1行3列</td> -->
    <td>1行4列</td>
  </tr>
  <tr>
    <td>2行1列</td>
    <td>2行2列</td>
    <td>2行3列</td>
    <td>2行4列</td>
  </tr>
  <tr>
    <td>3行1列</td>
    <td>3行2列</td>
    <td>3行3列</td>
    <td>3行4列</td>
  </tr>
</table>

縦横両方のセルを結合する

また縦横両方のセルを結合させることも可能です。

See the Pen
テーブルタグ（縦横結合） by junpei (@junpei-sugiyama)
on CodePen.

これも基本となるコードからどこを削除するかを間違えないように気を付けましょう。

<table>
  <tr>
    <th>見出し</th>
    <th>見出し</th>
    <th>見出し</th>
    <th>見出し</th>
  </tr>
  <tr>
    <td>1行1列</td>
    <td>1行2列</td>
    <td>1行3列</td>
    <td>1行4列</td>
  </tr>
  <tr>
    <td colspan="2" rowspan="2">2行1列</td>
    <!-- <td>2行2列</td> -->
    <td>2行3列</td>
    <td>2行4列</td>
  </tr>
  <tr>
    <!-- <td>3行1列</td> -->
    <!-- <td>3行2列</td> -->
    <td>3行3列</td>
    <td>3行4列</td>
  </tr>
</table>

以上になります。

コーディングの時給と作業効率を上げる！

2年間の実務で実際に使ったコードをまとめた『コーディング&WordPressメモまとめ集』をBrainで公開しています。