MENU

HTMLのtableで表のセルを縦横に結合する方法

HTML/CSS
tableのセルを結合する方法

HTMLとCSSでtableタグを使って表を作成をするときに、隣接したセルを結合したい場合があります。
tableタグで作成した表は、HTML側で属性を設定することで、セルを結合することができます。
セルの結合に使うHTMLの属性が、「rowspan」と「colspan」です。

例として、HTMLとCSSで作成したこちらの表テーブルを題材に解説します。

項目 商品A 商品B 商品C 商品D
価格 無料 2,000円 5,000円 8,000円
在庫数 50個 50個 100個 150個
サポート × △ 〇 〇
クーポン × 〇 〇 〇

HTMLとCSSのサンプルコードはこちらになります。

<table>
    <tbody>
        <tr>
            <th>項目</th>
            <th>商品A</th>
            <th>商品B</th>
            <th>商品C</th>
            <th>商品D</th>
        </tr>
        <tr>
            <td>価格</td>
            <td>無料</td>
            <td>2,000円</td>
            <td>5,000円</td>
            <td>8,000円</td>
        </tr>
        <tr>
            <td>在庫数</td>
            <td>50個</td>
            <td>50個</td>
            <td>100個</td>
            <td>150個</td>
        </tr>
        <tr>
            <td>サポート</td>
            <td>×</td>
            <td>△</td>
            <td>〇</td>
            <td>〇</td>
        </tr>
        <tr>
            <td>クーポン</td>
            <td>×</td>
            <td>〇</td>
            <td>〇</td>
            <td>〇</td>
        </tr>
    </tbody>
</table>
table {
    border-collapse: collapse;
    table-layout: fixed;
    width: 100%;
    max-width: 600px;   
}
table th,
table td {
    font-size: 14px;
    border: 1px solid gray;
    padding: 8px;
    vertical-align: middle;
}
table th {
    text-align: center;
}
table tr td:nth-child(n+2) {
    text-align: center;
}
table tr th:first-child,
table tr td:first-child {
    width: 60px;
}
table tr th:nth-child(n+2),
table tr td:nth-child(n+2) {
    width: calc((100% - 60px) / 4);
}

この表の中で隣接したセルの内容が同じ箇所があります。

  • 商品AとBの在庫数の内容
  • 商品Aのサポートとクーポンの内容
  • 商品CとDのサポートとクーポンの内容

これらのセルをそれぞれ1つのセルに結合しながら解説します。
まずは、結合に必要なHTMLの属性について理解しましょう。

目次

tableタグでセルの結合に使う属性

セルの結合で使うHTMLの属性には、「rowspan」と「colspan」があります。
セルをつなげる方向によって、これらの属性を使い分けます。

表の中のセルを結合できるパターンは、次の3つです。

結合するセルの方向HTMLに付ける属性
縦方向rowspan
横方向colspan
縦横の両方向colspanとrowspan

結合したい方向によって、どの属性を使うべきか覚えておきましょう。
縦方向（テーブルの行）は、rowspanを使います。
横方向（テーブルの列）は、colspanを使います。

縦方向のセルの結合 rowspan

まずは、縦方向（テーブルの行）のセルをつなげる方法です。

縦方向に隣接する複数のセルを結合するときは、起点となるセル、つまりthタグまたはtdタグにrowspan属性を使います。

rowspanの場合は、結合するセルの中で一番上に位置するセルが起点となります。
上のセルが、下のセルを取り込むイメージです。

HTMLではこのように書きます。

<th rowspan="結合するセルの数">
<td rowspan="結合するセルの数">

そして、rowspanを使った起点のセルを残し、結合されたその他のセルは削除します。

題材の表において、「商品A」の「サポート」と「クーポン」が、同じ「×」という内容なので、縦方向のセルの結合で、2つのセルを1つのセルにまとめてみましょう。

起点のセルは、「商品A」の「サポート」の「×」の部分です。
tdタグに、rowspan属性を設定します。
rowspanの値は、結合するセルの数である2を入れます。

<td rowspan="2">×</td>

結合するその他のセルにあたる、「商品A」の「クーポン」の「×」の部分は、tdタグまるごと削除します。

<!-- <td>×</td> 削除するセル -->

全体のHTMLコードは、このようになります。
わかりやすいように、rowspanで結合したセルには、CSSで背景色をつけておきます。
また、参考までに、削除するセルはコメントアウトで残しておきます。

<table>
    <tbody>
        <tr>
            <th>項目</th>
            <th>商品A</th>
            <th>商品B</th>
            <th>商品C</th>
            <th>商品D</th>
        </tr>
        <tr>
            <td>価格</td>
            <td>無料</td>
            <td>2,000円</td>
            <td>5,000円</td>
            <td>8,000円</td>
        </tr>
        <tr>
            <td>在庫数</td>
            <td>50個</td>
            <td>50個</td>
            <td>100個</td>
            <td>150個</td>
        </tr>
        <tr>
            <td>サポート</td>
            <td rowspan="2" style="background: #fff100;">×</td>
            <td>△</td>
            <td>〇</td>
            <td>〇</td>
        </tr>
        <tr>
            <td>クーポン</td>
            <!-- <td>×</td> 削除するセル-->
            <td>〇</td>
            <td>〇</td>
            <td>〇</td>
        </tr>
    </tbody>
</table>

ブラウザではこのように表示されます。

項目 商品A 商品B 商品C 商品D
価格 無料 2,000円 5,000円 8,000円
在庫数 50個 50個 100個 150個
サポート × △ 〇 〇
クーポン 〇 〇 〇

縦方向の2つのセルを1つに結合することができました。

横方向のセルの結合 colspan

次は、横方向（テーブルの列）のセルをつなげる方法です。

横方向に隣接する複数のセルを結合するときは、起点となるセル（thタグまたはtdタグ）に、colspan属性を使います。

colspanの場合は、結合するセルの中で一番左に位置するセルが起点となります。
左のセルが、右のセルを取り込むイメージです。

HTMLではこのように書きます。

<th colspan="結合するセルの数">
<td colspan="結合するセルの数">

そして、colspanを使った起点のセルを残し、結合されたその他のセルは削除します。

題材の表において、「商品A」と「商品B」の「在庫数」が、同じ「50個」という内容なので、横方向のセルの結合で、2つのセルを1つのセルにまとめてみましょう。

起点のセルは、「商品A」の「在庫数」の「50個」の部分です。
tdタグに、rowspan属性を設定します。
rowspanの値は、結合するセルの数である2を入れます。

<td colspan="2">50個</td>

結合するその他のセルにあたる、「商品B」の「在庫数」の「50個」の部分は、tdタグまるごと削除します。

<!-- <td>50個</td> 削除するセル -->

全体のHTMLコードは、このようになります。
わかりやすいように、colspanで結合したセルには、CSSで背景色をつけておきます。

<table>
    <tbody>
        <tr>
            <th>項目</th>
            <th>商品A</th>
            <th>商品B</th>
            <th>商品C</th>
            <th>商品D</th>
        </tr>
        <tr>
            <td>価格</td>
            <td>無料</td>
            <td>2,000円</td>
            <td>5,000円</td>
            <td>8,000円</td>
        </tr>
        <tr>
            <td>在庫数</td>
            <td colspan="2" style="background: #fff100;">50個</td>
            <!-- <td>50個</td> 削除するセル-->
            <td>100個</td>
            <td>150個</td>
        </tr>
        <tr>
            <td>サポート</td>
            <td>×</td>
            <td>△</td>
            <td>〇</td>
            <td>〇</td>
        </tr>
        <tr>
            <td>クーポン</td>
            <td>×</td>
            <td>〇</td>
            <td>〇</td>
            <td>〇</td>
        </tr>
    </tbody>
</table>

ブラウザではこのように表示されます。

項目 商品A 商品B 商品C 商品D
価格 無料 2,000円 5,000円 8,000円
在庫数 50個 100個 150個
サポート × △ 〇 〇
クーポン × 〇 〇 〇

横方向の2つのセルを1つに結合することができました。

縦横両方向のセルの結合

最後に、縦方向と横方向の両方のセルをつなげる方法です。
結論から言うと、rowspanとcolspanの2つの属性を設定することで結合できます。
HTMLの書き方は、上記で説明した内容と同じです。

題材の表において、「商品C」と「商品D」の「サポート」と「クーポン」が、同じ「〇」という内容なので、縦・横方向のセルの結合で、4つのセルを1つのセルにまとめてみます。

起点のセルは、「商品C」の「サポート」の「〇」の部分です。
tdタグに、rowspanとcolspanを設定します。
rowspanの値は、結合するセルの数である2を入れます。
colspanの値にも、結合するセルの数である2を入れます。

<td rowspan="2" colspan="2">〇</td>

結合するその他のセルにあたる、「商品C」の「クーポン」の「〇」の部分と「商品D」の「サポート」と「クーポン」の「〇」の部分の3つのセルを削除します。

<!-- <td>〇</td> 削除するセル -->
<!-- <td>〇</td> 削除するセル -->
<!-- <td>〇</td> 削除するセル -->

全体のHTMLコードは、このようになります。
わかりやすいように、colspanで結合したセルには、背景色をつけておきます。

<table>
    <tbody>
        <tr>
            <th>項目</th>
            <th>商品A</th>
            <th>商品B</th>
            <th>商品C</th>
            <th>商品D</th>
        </tr>
        <tr>
            <td>価格</td>
            <td>無料</td>
            <td>2,000円</td>
            <td>5,000円</td>
            <td>8,000円</td>
        </tr>
        <tr>
            <td>在庫数</td>
            <td>50個</td>
            <td>50個</td>
            <td>100個</td>
            <td>150個</td>
        </tr>
        <tr>
            <td>サポート</td>
            <td>×</td>
            <td>△</td>
            <td rowspan="2" colspan="2" style="background: #fff100;">〇</td>
            <<!-- <td>〇</td> 削除するセル-->
        </tr>
        <tr>
            <td>クーポン</td>
            <td>×</td>
            <td>〇</td>
            <!-- <td>〇</td> 削除するセル-->
            <!-- <td>〇</td> 削除するセル-->
        </tr>
    </tbody>
</table>

ブラウザではこのように表示されます。

項目 商品A 商品B 商品C 商品D
価格 無料 2,000円 5,000円 8,000円
在庫数 50個 50個 100個 150個
サポート × △ 〇
クーポン × 〇

縦・横両方向の4つのセルを1つに結合することができました。

まとめ

このように、tableで作成したセルを結合するときは、HTML側でrowspanとcolspanを使います。CSSは使いませんので、シンプルな表の場合はとても簡単ですね。

反面、テーブルの構成が複雑になってくると、セルの量が増えるため、削除すべきセルを間違いやすくなります。
tableタグを使うときは、HTMLコードを見やすくインデントや段落をうまく取り入れながら書くようにしてください。

こちらが、すべてのセルを結合した完成版のHTMLコードです。
先程の背景色とコメントアウトしておいた部分は、完全に削除しています。

<table>
    <tbody>
        <tr>
            <th>項目</th>
            <th>商品A</th>
            <th>商品B</th>
            <th>商品C</th>
            <th>商品D</th>
        </tr>
        <tr>
            <td>価格</td>
            <td>無料</td>
            <td>2,000円</td>
            <td>5,000円</td>
            <td>8,000円</td>
        </tr>
        <tr>
            <td>在庫数</td>
            <td colspan="2">50個</td>
            <td>100個</td>
            <td>150個</td>
        </tr>
        <tr>
            <td>サポート</td>
            <td rowspan="2">×</td>
            <td>△</td>
            <td colspan="2" rowspan="2">〇</td>
        </tr>
        <tr>
            <td>クーポン</td>
            <td>〇</td>
        </tr>
    </tbody>
</table>

こちらがセルを結合した完成形の表になります。

項目 商品A 商品B 商品C 商品D
価格 無料 2,000円 5,000円 8,000円
在庫数 50個 100個 150個
サポート × △ 〇
クーポン 〇

tabelのセルの結合は、よく使う表レイアウトなので、HTMLの基本として覚えておきましょう。

HTML/CSS
よかったらシェアしてね！
  • URLをコピーしました！

この記事を書いた人

レクチャーズ編集部のアバター レクチャーズ編集部

LEQTUREZ Online

レクチャーズは、IT・Webのクリエイティブ人材育成、事業サポートの活動を行っています。初心者のためのスキルアップコンテンツやビジネスパーソンに役立つ情報を発信いたします。

関連記事

目次