HTML
LINEでログイン
Googleでログイン
Twitterでログイン
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とはColumn Spanの略でColumn(カラム)は縦の列のことを指し
Spanは全長という意味をもっています。
「列の全長」だと分かりにくいので、「列の太さ(横幅)」と覚えるといいです。
列の太さは横幅のことになるので横に広がります。
colspanで水平方向のセル結合ができるようになったので、次は
垂直方向のセルを結合する方法についても学習していきましょう。
Spanは全長という意味をもっています。
「列の全長」だと分かりにくいので、「列の太さ(横幅)」と覚えるといいです。
列の太さは横幅のことになるので横に広がります。
colspanで水平方向のセル結合ができるようになったので、次は
垂直方向のセルを結合する方法についても学習していきましょう。
完了にする！
活動記録をTweetする
colspan属性は水平方向に結合するセルの数を数字で指定します。
今回は横2つ分のセルを結合すれば空白が埋まるので
colspanの値は2で指定すればOKです。