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

この問題では、HTMLのtableタグで作成した表のセルを横方向に結合する「colspan属性」について学習します。
colspanとは何か・どう使うかをコードを書きながら理解していきましょう。
表に関するタグはいくつかありますが、英単語の意味を理解して覚えるのがポイントです。

HTMLの問題に挑戦しよう！

問題

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

HTMLで表を作るとき、セルを横方向に結合したい場面はよく出てきます。
colspan属性を使って、実際にセルを結合してみましょう！
結合箇所は見本画像を参考にしてください。

あらかじめエディタに書くコード

                    <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¥

期待する画面

解答と解説（colspanを使ってtableの列を結合しよう）

解説

LINE登録して解答を見る

※ご登録後トークルーム下部にあるメニュー内
「無料問題集※解答付き」を押すと
解答閲覧用URLが届きます

colspanは、tableタグで作った表のセルを水平方向（横）に結合するための属性です。
colspan="2" と指定すると、そのセルが横2列分の幅を占めるようになります。

結合したいセルに colspan="結合する列数" を追加するだけです。
今回は3列ある表の2列目と3列目を結合するため、<td colspan="2">内容部分</td> と記述します。
このとき結合された側のセルは削除する必要があります。
削除しないとセルが余分に増えてしまい、表のレイアウトが崩れます。

colspanの値は「何列分に広げるか」を数値で指定します。
2列結合なら colspan="2"、3列結合なら colspan="3" です。
値を間違えると表示が崩れるため、見本画像と見比べながら確認するクセをつけましょう。

水平方向の結合に対し、垂直方向（縦）の結合には rowspan を使います。
colspanとrowspanはセットで覚えておくと、表の実装がスムーズになります。

補足

colspanとはColumn Spanの略です。Column（カラム）は「縦の列」、Spanは「全長・幅」を意味します。「列の横幅を広げる」属性と覚えると直感的に理解しやすいです。

縦方向のセル結合には rowspan を使います。colspanとrowspanはセットで登場することが多いので、次の問題もあわせて確認しましょう。

・rowspanも学びたい方：rowspanを使ってtableの行を結合しよう
・HTMLの基礎から学びたい方：HTML入門講座
・学習の進め方に迷ったら：無料メンター相談

HTML学習のコース一覧へ戻る

ポイント

colspanとは？意味と使い方をわかりやすく解説

colspanとはHTMLのtableタグで、セルを横方向に結合するための属性です。colspan="数値" で何列分結合するかを指定します。

初心者がよく混乱する「列と行の違い」も整理しておきましょう。列は縦方向・行は横方向です。colspanは列をまたいで横に広げる属性なので、「横結合＝colspan」と覚えると迷いにくくなります。

colspanで詰まったら？基礎から学び直そう

tableやcolspanでつまずいたときは、一人で悩まず相談するのが一番の近道です。
忍者CODEでは現役エンジニアのメンターに無料で質問できます。
「何から学べばいいかわからない」という段階でも大丈夫です。まずは気軽に話してみましょう。
→無料メンター相談はこちら

さらにスキルアップしたい方は公式LINEから「HTML」と送信すると動画が見れます。

LINE登録して動画を視聴する

HTML学習におすすめのコース