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

問題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:縦幅や横幅も指定できる

完了にする！

BACK > floatを使おうへ

NEXT > 一覧画面にあるリスト形式の遷移タブを実装しようへ

コース一覧に戻る

活動記録をTweetする

プロのWeb制作者を本気で目指しているあなたに！未経験でも挫折させないプログラミングスクール「甲賀-Koga-」の詳細はコチラ

1.HTMLの宣言をしてみよう

続きの動画を見たい方は公式LINEから「HTML」と送信すると動画が見れます。