ログイン
問題6

colspanを使ってtableの列を結合しよう

この問題では、作成した表のセルを結合させるためのタグについて学習していきます。 表に関するタグはいくつかあります。混ぜこぜにならないようにするには英単語の意味を理解しておぼてることがポイントです。

アイコン画像

本のアイコンcolspanとは

colspanとは、tableタグで作成した表の列同士を結合する際に使用するHTMLの属性です。colはcolumnの略でcolumnは列を意味しています。列と行が分からなくなってしまわないように英単語の意味をしっかり覚えておきましょう。

HTMLの問題に挑戦しよう!

以下の問題に挑戦し、実際に手を動かして学習していきましょう。
無事に問題が解けて理解できれば、HTMLマスターへの第一歩となるでしょう。

問題6:colspanを使ってtableの列を結合しよう

colspan属性を使ってtableタグで定義した表のセルを結合してください。
結合箇所は見本画像を参考にしてください。

エディターのアイコンあらかじめエディタに書くコード

                <table border="1">
  <tr>
    <th>見出し部分</th>
    <th>見出し部分</th>
    <th>見出し部分</th>
  </tr>
  <tr>
    <td>内容部分</td>
    <td>内容部分</td>
    <td>内容部分</td>
  </tr>
  <tr>
    <td>内容部分</td>
    <td>内容部分</td>
  </tr>
  <tr>
    <td>内容部分</td>
    <td>内容部分</td>
    <td>内容部分</td>
  </tr>
</table>
¥HTML¥
              

ブラウザのアイコン期待する画面

解答の見本画像

タグアイコン解答ソースコード

              <table border="1">
  <tr>
    <th>見出し部分</th>
    <th>見出し部分</th>
    <th>見出し部分</th>
  </tr>
  <tr>
    <td>内容部分</td>
    <td>内容部分</td>
    <td>内容部分</td>
  </tr>
  <tr>
    <td>内容部分</td>
    <td colspan="2">内容部分</td>
  </tr>
  <tr>
    <td>内容部分</td>
    <td>内容部分</td>
    <td>内容部分</td>
  </tr>
</table>
¥HTML¥
            

コメントのアイコン解説

水平方向のセルを結合するにはcolspanを使用します。
colspan属性は水平方向に結合するセルの数を数字で指定します。

今回は横2つ分のセルを結合すれば空白が埋まるので
colspanの値は2で指定すればOKです。
ログインして解答を見る

コメントのアイコン補足

colspanとはColumn Spanの略でColumn(カラム)は縦の列のことを指し
Spanは全長という意味をもっています。
「列の全長」だと分かりにくいので、「列の太さ(横幅)」と覚えるといいです。
列の太さは横幅のことになるので横に広がります。

colspanで水平方向のセル結合ができるようになったので、次は
垂直方向のセルを結合する方法についても学習していきましょう。
HTMLを学ぶなら現役エンジニア監修「甲賀コース」
キャンペーン

閉じる