ログイン

問題24 簡易テーブルを作成しよう

HTML_CSSの問題

HTML_CSS

Webサイトではよく伝えたい内容をテーブル(表)にまとめて表示していることがあります。 HTMLでは、簡易的にテーブルを作成できるので覚えていきましょう。

簡易テーブルを作成しよう

問題

至ってシンプルなテーブルを作成します。

見本を参考に作成していきましょう。

期待する画面

コードのアイコン

解答ソースコード

              <table border="1">
  <tr>
    <th>名前</th>
    <th>年齢</th>
    <th>体重</th>
    <th>身長</th>
  </tr>
  <tr>
    <td>忍太郎</td>
    <td>16歳</td>
    <td>55kg</td>
    <td>168cm</td>
  </tr>
  <tr>
    <td>忍子</td>
    <td>22歳</td>
    <td>42kg</td>
    <td>158cm</td>
  </tr>
  <tr>
    <td>忍次郎</td>
    <td>18歳</td>
    <td>62kg</td>
    <td>174cm</td>
  </tr>
  <tr>
    <td>忍吉</td>
    <td>32歳</td>
    <td>124kg</td>
    <td>233cm</td>
  </tr>
</table>
¥HTML¥
            
答えのアイコン

解説

table,tr,th,tdタグを使用する事でテーブルを作成できます。

また、縦横のボーダーはtableタグにborder="1"を付与してあげます。

解答ソースを見ていただければ分かりますが、
CSSにstyleは何も付与しておりません。

実務でもテーブル展開する場面があると思いますので覚えておきましょう。
ログインして解答を見る
テーブル(表)を構成するには、解説に出てきた4種類のタグを使用します。
これらは、テーブル(表)を作成する場合にのみ使われるタグなので、テーブル(表)を作るとなったら真っ先に思い浮かぶようにしておきましょう。
テーブル作成に関しては、CSS(styleタグ含む)を使わずともある程度のデザインを行なうことが出来ます。
テーブル内の幅の変更やテキストの中央寄せ、テーブルカラムの結合など、Excelと同じような機能が備わっているので、非常に便利です。
それぞれ導入するための属性は異なるので、色々と調べてみるといいです。
twitterのアイコン
活動記録をTweetする
完了にする!
1.HTMLの宣言をしてみよう
続きの動画を見たい方は公式LINEから「HTML」と送信すると動画が見れます。
LINEの友達追加でお役立ち動画をGET!!