HTML

HTML|テーブルのセルを結合したい

テーブルで表を作成していて、セルを結合したいときってありますよね。ここではその方法についてお話していきます。

th要素・td要素を横に結合させる方法

まずは、セルを横に結合させる方法です。セルの横の結合は、下記の属性を結合したいthタグまたはthタグに記入します。

colspan="結合するセルの数"

下記をご覧ください。

ボタンで表示を切り替えてご覧ください。

See the Pen table06 by ken (@ken81) on CodePen.

上記のテーブルの「1」と「2」を結合してみましょう。

See the Pen table07 by ken (@ken81) on CodePen.

2つのtd要素を結合する場合は、その行のtd要素をひとつ削除し、もうひとつのtdタグにcolspan="2"と記入します。

3つの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.


先ほどと同じ例で、今度は真ん中のセルを2つ(2番と5番)をタテに結合してみます。

この場合、上にある方(2番)のtd要素は残して下(5番)のtd要素を削除します。そして、2番のtdタグにrowspan="2"と記入します。先ほどと同じく「2」は結合するセルの数を表しています。

See the Pen table09 by ken (@ken81) on CodePen.

はい、これでタテのセルが2つ結合されました。さらに3つのセルを結合したい場合は、8番のtd要素も削除して2番のtdタグのrowspan="2"rowspan="3"に変更するだけですね。

See the Pen table10 by ken (@ken81) on CodePen.

以上がセルの結合の仕方でした。

最近の記事

  1. CSS

    要素の配置が簡単に決まるFlexboxの使い方
  2. WordPress

    WordPressの立ち上げからサイト構築までの初期手順
  3. CSS

    レスポンシブウェブデザインの基本|メディアクリエリの設定
  4. CSS

    CSS|中央寄せが効かないときは・・・
  5. CSS

    擬似クラス「:first-child」「:last-child」はどうして効かな…
PAGE TOP