HTML Web制作

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

※ 当サイトではアフィリエイト広告を利用しています

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

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

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

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

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

累計1100部突破!レビュー570件!

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>

まとめ

今回はtableタグでセルを結合する方法について解説しました。

どこに何を書いていいのか分かりにくいので、慌てず落ち着いて確認して書きましょう。

以上になります。

 

コーディングの時給と作業効率を上げる!
2年間の実務で実際に使ったコードをまとめた『コーディング&WordPressメモまとめ集』をBrainで公開しています。
  • コピペで使えるWordPressの各テンプレート
  • 実務でよく使う見出し一覧
  • 実務でよく使うテキストのhoverアニメーション
  • 実務でよく使うボタン内の矢印9種類
  • Contact Form 7の色々・・・
などなど、他にもコピペで使えるコードがたくさん載せてあるので、時短=時給アップに繋がります。
さらに『コードのまとめ方が参考になった』というレビューも多数頂いているので、これを元に自分なりの"メモまとめ集"を作るという使い方も出来ます。
1100部以上販売し、レビューは570件以上あるので、気になる方は以下のボタンからチェックしてみて下さい👇

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

販売ページとレビューを見てみる

-HTML, Web制作