ログイン

問題28 テーブルのカラムを結合させよう

HTML_CSSの問題

HTML_CSS

初級弐拾四で行ったテーブルの作成問題、第2弾です。 テーブルのカラム(列)やレコード(行)の結合ができるようになれば、ユーザーにとって分かりやすいテーブルを作ることができます。 操作方法自体は非常にシンプルなのでこの際に覚えていきましょう。

テーブルのカラムを結合させよう

問題

テーブルタグを使用してカラムを結合させましょう!

見本画像を参考にして実装してください。

※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¥
            
答えのアイコン

解説

横に結合したい時は、colspanを付与し、
縦に付与したい時はrowspanを付与しましょう。
ログインして解答を見る
テーブルはカラム(列)やレコード(行)を結合させたり、色分けをすることで分かり易い表に仕上がります。
作成する際に使用するタグについて簡単に復習しておきましょう。
タグ一覧
・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:縦幅や横幅も指定できる
twitterのアイコン
活動記録をTweetする
完了にする!
1.HTMLの宣言をしてみよう
続きの動画を見たい方は公式LINEから「HTML」と送信すると動画が見れます。
LINEの友達追加でお役立ち動画をGET!!