ログイン
問題5

tableタグを使って表を作成しよう

アイコン画像

本のアイコンtableタグとは

tableタグとは、Webページ内に表を作成したい場合に使用するHTMLのタグです。
一般的に表のことをテーブルと呼ばれることが多いので、大体同じ意味だと認識しておけば大丈夫です。
tableで表を作るには、tableタグの中にtr・th・tdという3つのタグを使って表の情報を定義していきます。

本のアイコンtr・th・tdとは

tr・th・tdとは、HTMLで表を作成する際に使用するHTMLのタグです。
trタグ:Table Row(表の行)
thタグ:Table Header(表の見出し)
tdタグ:Table Data(表のデータ・情報)
trタグで表の行を定義し、thタグで見出しを定義、tdタグでセルの中身を記述します。

HTMLの問題に挑戦しよう!

以下の問題に挑戦し、実際に手を動かして学習していきましょう。
無事に問題が解けて理解できれば、HTMLマスターへの第一歩となるでしょう。

問題5:tableタグを使って表を作成しよう

tableを使って2行、2列の表を作成してください。

期待する画面を参考にして作成しましょう。

エディターのアイコンあらかじめエディタに書くコード

                見出し部分
内容部分
見出し部分
内容部分
¥HTML¥
              

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

解答の見本画像

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

              <table border="1">
  <tr>
    <th>見出し部分</th>
    <td>内容部分</td>
  </tr>
  <tr>
    <th>見出し部分</th>
    <td>内容部分</td>
  </tr>
</table>
¥HTML¥
            

コメントのアイコン解説

まずはtableを書いて表を定義します。
定義出来たらtableタグの子要素にtrタグを書きます。
※全て開始タグと終了タグを書き忘れないようにしましょう。

trタグは行を定義するタグなので行の数だけ書きます。
trタグの中にはth・tdタグを書きます。
thタグには見出しとなる情報、tdタグには内容となる情報を書きましょう。
th・tdタグの数だけ列が追加されていきます。

表のテキストが完成したら最後に表の枠線を表示します。
今回はborder属性を使って枠線を表示ましたがこちらは非推奨タグになるので
VSCODEを使用している場合、赤字で表示されたかと思います。
基本的にはCSSで枠線を指定することを覚えておきましょう。
ログインして解答を見る

コメントのアイコン補足

tableタグ以外のタグは英単語の意味で覚えておきましょう。
HTMLを学ぶなら現役エンジニア監修「甲賀コース」
キャンペーン

閉じる