問題

7
HTML

rowspanを使ってtableの行を結合しよう

この問題は、HTMLで作成した表のセル結合に関する問題です。 以下の問題を通して、行の結合方法を学習しましょう。

ポイント

rowspanとは

rowspanとは、tableタグで作成した表の行を結合する際に使用するHTMLの属性です。rowとは行を意味しているため、縦に結合させたい場合はrowを使用します。英単語で覚えておくことで間違いを防げるのでしっかり覚えておきましょう。

HTMLの問題に挑戦しよう!

問題

rowspanを使ってtableの行を結合しよう

rowspan属性を使って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>
  </tr>
</table>
¥HTML¥
                

期待する画面

解答の画像

解答と解説

解説

LINE登録して解答を見る

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

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

今回は縦3つ分のセルを結合すれば空白が埋まるので
rowspanの値は3で指定すればOKです。

補足

Rowは「行」という意味を持つ英単語なので、
rowspanは行の全長という意味になります。
「列の全長」だと分かりにくいので、「行の太さ(縦幅)」と覚えるといいです。
行の太さは縦幅のことになるので縦に広がります。

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

LINE登録して動画を視聴する
今なら豪華5大特典もらえる! LINE登録でGET