【HTML初心者入門】テーブルのセルを結合する方法を解説! | WEBCAMP NAVI
【12月の受講枠も残りわずか】

【HTML初心者入門】テーブルのセルを結合する方法を解説!

みなさんはHTMLの学習をしていませんか?

今回の記事ではHTML内でセルを結合する時に必須なcolspan属性rowspan属性の使い方や注意点について紹介していきます!

HTMLの”表を結合する”とは?

セルの横だったり縦だったりを繋ぐ事が”結合”です。

HTMLのtable要素でテーブルを作る際などに利用することができます。

HTMLテーブルは下記の通りtd要素で複数のセルを作り出しているので、td要素に何かを付け加える事によって”結合”することができるのです!(見出しタグのth要素でもセルを作り出す事ができます。)

 <table frame="box" border="1">
        <tr>
            <!-- td要素がセル1つ1つになる! -->
            <td>セル1</td>
            <td>セル2</td>
            <td>セル3</td>
        </tr>
        <tr>
            <td>セル4</td>
            <td>セル5</td>
            <td>セル6</td>
        </tr>
    </table>

・HTMLのtable要素について確認したい方はHTML tableで表作成する方法【レイアウトの方法まで完全網羅】」の記事を参考にしてください。

HTMLで横と縦のセルを結合させる方法

それではいよいよセルを結合する方法を伝えていきましょう!

セルを横と縦に結合させるためには以下の属性をtd要素に付け加えます。

  • colspan属性・・・横方向にセルを結合させる
  • rowspan属性・・・縦方向にセルを結合させる

実際にテーブルを作って、それぞれセルを連結させてみましょう!

横方向にセルを連結させる

セルを横方向に連結させるためにcolspan属性を使ってましょう。

colspan属性は右方向に向けて結合していく形になります。

つまりテーブルを作成する際に、右方向で結合されたセルの分を数えずにHTML内で表を作成しないといけません。

少し分かりづらいので、実際に先ほどのHTMLで作った表を縦結合して、うまく調整した場合と調整しなかった場合で比較してみましょう!

うまく横方向を調整して表を作成できた場合

うまく調整できた場合は以下のようになります。

セル1ともともとセル2があった部分がいい感じに結合できているのがお分かりいただけると思います。

<table frame="box" border="1">
        <tr>
            <!-- 結合する数は指定可能 -->
            <td colspan="2">セル1</td>
            <!-- 消すことで調整。<td>セル2</td> -->
            <td>セル3</td>
        </tr>
        <tr>
            <td>セル4</td>
            <td>セル5</td>
            <td>セル6</td>
        </tr>
    </table>

調整しなかった場合

調整しなかった場合は以下のようになります。

セル2があるせいで、セル3がはみ出てしまう形になりました…。(セル4~6の行が3つ分あるのに対して、セル1~3の行が2+1+1で4になってしまったから)

<table frame="box" border="1">
        <tr>
            <!-- 結合する数は指定可能 -->
            <td colspan="2">セル1</td>
            <td>セル2</td>
            <td>セル3</td>
        </tr>
        <tr>
            <td>セル4</td>
            <td>セル5</td>
            <td>セル6</td>
        </tr>
    </table>

縦方向にセルを連結させる

セルを縦方向に連結させるためにrowspan属性を使ってましょう。

rowspan属性は下向に向けて結合していく形になります。

つまりテーブルを作成する際に、下方向で結合されたセルの分を数えずにHTML内で表を作成しないといけません。

先ほどと同じく比較してみましょう!

うまく縦方向を調整して表を作成できた場合

うまく調整できた場合は以下のようになります。

セル1ともともとセル4があった部分がいい感じに結合できているのがお分かりいただけると思います。

<table frame="box" border="1">
        <tr>
            <!-- 結合する数は指定可能 -->
            <td rowspan="2">セル1</td>
            <td>セル2</td>
            <td>セル3</td>
        </tr>
        <tr>
            <!-- 消すことで調整。<td>セル4</td> -->
            <td>セル5</td>
            <td>セル6</td>
        </tr>
    </table>

調整しなかった場合

調整しなかった場合は以下のようになります。

セル4があるせいで、セル6がはみ出てしまう形になりました…。(縦が2つ分で設定しているためセル1が最初の縦の部分を占領してしまいセル4が次の列に行ってしまっている。そして余ったセル6がはみ出してしまった…)

<table frame="box" border="1">
        <tr>
            <!-- 結合する数は指定可能 -->
            <td rowspan="2">セル1</td>
            <td>セル2</td>
            <td>セル3</td>
        </tr>
        <tr>
            <td>セル4</td>
            <td>セル5</td>
            <td>セル6</td>
        </tr>
    </table>

【HTML初心者入門】セルの結合をrowspan 属性を使って行う方法を解説

縦横同時にセルを連結させる

最後は縦横同時にセルを連結させた場合です。

つまりrowspan属性colspan属性を同時に使うという事です。

下記のように、縦と横にどれくらいのセルが入るのかを把握しておけば、さほど難しくないと思います!

<table frame="box" border="1"%>
        <tr>
            <td colspan="2" rowspan="2">セル1</td>
            <td>セル2</td>
            </tr>
            <tr>
            <td>セル3</td>
            </tr>
            <tr>
            <td>セル4</td>
            <td>セル5</td>
            <td>セル6</td>
    </table>

セル結合する上での注意点

上記で比較していただいた事で分かったと思いますが、セルを結合する上で注意しなければいけない事があります。

以下のようなtable要素での指定があった場合、1行目の列数は「5列」ではなく「4列」になります。1行目はセルA,B,C,Dの4つの列しかありませんので、セルBでcolspanを2に指定しても、あくまでテーブルの列の数は1行目の列の数できまりますので、無視されます。

<table frame="box" border="1"%>
  <tr>
    <td>A</td>
    <td colspan=2>B</td>
    <td>C</td>
    <td>D</td>
  </tr>
</table>

以下のように先頭が「5列」で明確なら、先ほどのcolspan指定は有効になります。

<table frame="box" border="1"%>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
    <td>5</td>
  </tr>
  <tr>
    <td>A</td>
    <td colspan=2>B</td>
    <td>C</td>
    <td>D</td>
  </tr>
</table>

・学習ステップを確認したい方は、【入門者向け】プログラミング初心者がHTMLを学ぶ6つのステップ」の記事を参考にしてください。

まとめ

初心者の方向けにcolspan属性やrowspan属性を紹介していきましたが、いかがでしたか?

headタグはWebサイトを作成する上で基本となるタグですので、しっかり基本を抑えてくださいね!

自宅にいながら、プロのキャリアアドバイザーに無料オンライン相談!

DMM WEBCAMPは転職成功率98%※1の全コースオンライン対応の転職保証型のプログラミングスクールです。短期間で確実にスキルを身につけて、ひとりひとりに寄り添った転職サポートで、未経験からのエンジニア転職を叶えます!

外出自粛期間中でも、自宅にいながらオンライン学習でスキルを高めることができます。

キャリアに迷ったら、まずはビデオ通話で無料キャリア相談を受けてみませんか?

自宅で過ごす時間が増えた今こそキャリアアップを目指しましょう!この機会を活用し、ぜひDMM  WEBCAMPの無料カウンセリングをご利用ください。

オンラインで実施中/
【無料】キャリア相談の日程を見る

※ 1 2020年4月時点