
rowspanとは
rowspanとは、tableタグで作成した表の行を結合する際に使用するHTMLの属性です。rowとは行を意味しているため、縦に結合させたい場合はrowを使用します。英単語で覚えておくことで間違いを防げるのでしっかり覚えておきましょう。
HTMLの問題に挑戦しよう!
以下の問題に挑戦し、実際に手を動かして学習していきましょう。
無事に問題が解けて理解できれば、HTMLマスターへの道の第一歩となるでしょう。
問題7: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¥
期待する画面

解答ソースコード
<table border="1">
<tr>
<th>見出し部分</th>
<th>見出し部分</th>
<th>見出し部分</th>
</tr>
<tr>
<td>内容部分</td>
<td>内容部分</td>
<td rowspan="3">内容部分</td>
</tr>
<tr>
<td>内容部分</td>
<td>内容部分</td>
</tr>
<tr>
<td>内容部分</td>
<td>内容部分</td>
</tr>
</table>
¥HTML¥
補足
Rowは「行」という意味を持つ英単語なので、
rowspanは行の全長という意味になります。
「列の全長」だと分かりにくいので、「行の太さ(縦幅)」と覚えるといいです。
行の太さは縦幅のことになるので縦に広がります。
rowspanは行の全長という意味になります。
「列の全長」だと分かりにくいので、「行の太さ(縦幅)」と覚えるといいです。
行の太さは縦幅のことになるので縦に広がります。
完了にする!
活動記録をTweetする
rowspan属性は垂直方向に結合するセルの数を数字で指定します。
今回は縦3つ分のセルを結合すれば空白が埋まるので
rowspanの値は3で指定すればOKです。