ここでは、IT系企業の新入社員向けにHTMLを解説しています。

デザイナーになるほどHTMLに詳しくなくてもいいけれど、Webアプリを作る上で必要な入力画面は自力で作りたい、あなたのためのページです。

9.テーブルを扱う

以下のようなテーブルを作りたいとします。

<アウトプットイメージ>

都市名 名物
名古屋 ひつまぶし
伊勢 赤福

(注:このテーブルにはCSSによる装飾がかかっています)

<ソースコード>

 

上から順に説明します。

テーブルを作るには、<table>を使います。

その中に<thead>と<tbody>を作ります。

それぞれ“Table head”(見出し要素)と“Table body”(中身要素)という意味です。

行を作るには<tr>を使います。

“tr”はtable rowの略で、テーブル(表)の横一行を定義する際に使用します。

その<tr>の中に<th>や<td>を入れます。

<th>は見出し<td>はデータです。

それぞれ、テーブルヘッダー(table header)とデータセル(table data cell)の略です。

 

今回は「テーブル」について学びました。

次回からは「フォーム部品でユーザーに入力してもらう」方法について学びます。

 

新人エンジニア向けHTML講座の一覧に戻る