ログイン
問題2

複雑な表の作り方を学ぼう

シンプルな表の作り方はこれまでの中級問題を通して身についているはずです。 ここでは少し複雑にした表の作成にチャレンジします。表の作り方をマスターしましょう。

アイコン画像

問題2:複雑な表の作り方を学ぼう

期待する画面と同じテーブルを作成してください。

ブラウザのアイコン期待する画面

解答の見本画像

タグアイコン解答ソースコード

              <table border="1">
  <caption>複雑な表を作ってみよう!</caption>
  <thead>
    <tr>
      <th>---セル---</th>
      <th>---セル---</th>
      <th>---セル---</th>
      <th>---セル---</th>
      <th>---セル---</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td rowspan="3">---セル---</td>
      <td colspan="2">---セル---</td>
      <td>---セル---</td>
      <td rowspan="2">---セル---</td>
    </tr>
    <tr>
      <td>---セル---</td>
      <td colspan="2" rowspan="2">---セル---</td>
    </tr>
    <tr>
      <td>---セル---</td>
      <td rowspan="2">---セル---</td>
    </tr>
    <tr>
      <td colspan="4">---セル---</td>
    </tr>
  </tbody>
</table>
¥HTML¥
            

コメントのアイコン解説

表の枠線を表示させるにはtableタグのborder属性に「1」を指定します。

一見複雑な表に見えますが、要素の回り込み方が理解できれば
短時間で作成することができます。
スムーズに作成できるまで繰り返し行なってみましょう。
ログインして解答を見る

コメントのアイコン補足

表の中のそれぞれのセルは、属性を使用して結合ができましたが
それ以外にも実は色をつけたり、幅を指定する属性が存在します。

しかし、それらの属性は公式リファレンスで非推奨とされているので
基本的にはこれから学ぶであろうCSSを使ってスタイルを指定します。
覚えておきましょう。
HTMLを学ぶなら現役エンジニア監修「甲賀コース」
キャンペーン

閉じる