ログイン
問題28

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

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

アイコン画像

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

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

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

※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:縦幅や横幅も指定できる
1.HTMLの宣言をしてみよう
続きの動画を見たい方は公式LINEから「HTML」と送信すると動画が見れます。
HTML_CSSを学ぶなら現役エンジニア監修「甲賀コース」
キャンペーン

閉じる