
問題28:テーブルのカラムを結合させよう
テーブルタグを使用してカラムを結合させましょう!
見本画像を参考にして実装してください。
※Chromeのバージョンが上がり、うまく機能しない場合があります。
お使いのリセットCSSを削除してから実装してみてください。
見本画像を参考にして実装してください。
※Chromeのバージョンが上がり、うまく機能しない場合があります。
お使いのリセットCSSを削除してから実装してみてください。
期待する画面

解答ソースコード
<table border="1">
<tr>
<th>名前</th>
<th>年齢</th>
<th>体重</th>
<th>身長</th>
</tr>
<tr>
<td colspan="4">ここを横に結合しよう</td>
</tr>
<tr>
<td rowspan="3">縦に結合</td>
<td>22歳</td>
<td>42kg</td>
<td>158cm</td>
</tr>
<tr>
<td>18歳</td>
<td>62kg</td>
<td>174cm</td>
</tr>
<tr>
<td>32歳</td>
<td>124kg</td>
<td>233cm</td>
</tr>
</table>
¥HTML¥
補足
テーブルはカラム(列)やレコード(行)を結合させたり、色分けをすることで分かり易い表に仕上がります。
作成する際に使用するタグについて簡単に復習しておきましょう。
タグ一覧
・tableタグ:このタグがないとテーブルは作成できない。th,tr,tdタグと組み合わせることでテーブルの作成ができる。
・thタグ:「table header」の略でテーブルの見出しやタイトルとなる部分を作成するタグのこと。
・trタグ:「table row」の略でテーブルの行部分(横方向)を指定するタグのこと。
・tdタグ:「table data」の略でテーブルセルの内容を指定するタグのこと。
属性一覧
・align:属性値にはcenter(中央寄せ)、left(左寄せ)、right(右寄せ)などが使用できる。
・border:テーブルタグに指定して使う。指定しなければ枠線なし、「border="1"」とすれば2本線の枠線が作れる。
(もし1本線にしたい場合はCSSでtableに対し「border-collapse:collapse;」を指定)
・width,height:縦幅や横幅も指定できる
作成する際に使用するタグについて簡単に復習しておきましょう。
タグ一覧
・tableタグ:このタグがないとテーブルは作成できない。th,tr,tdタグと組み合わせることでテーブルの作成ができる。
・thタグ:「table header」の略でテーブルの見出しやタイトルとなる部分を作成するタグのこと。
・trタグ:「table row」の略でテーブルの行部分(横方向)を指定するタグのこと。
・tdタグ:「table data」の略でテーブルセルの内容を指定するタグのこと。
属性一覧
・align:属性値にはcenter(中央寄せ)、left(左寄せ)、right(右寄せ)などが使用できる。
・border:テーブルタグに指定して使う。指定しなければ枠線なし、「border="1"」とすれば2本線の枠線が作れる。
(もし1本線にしたい場合はCSSでtableに対し「border-collapse:collapse;」を指定)
・width,height:縦幅や横幅も指定できる
完了にする!
活動記録をTweetする
1.HTMLの宣言をしてみよう
縦に付与したい時はrowspanを付与しましょう。