ここでは、IT系企業の新人エンジニア研修向けにHTMLを解説しています。

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

1. なぜ、新人エンジニア研修でテーブルを学ぶのか、その理由

前回は、「画像を貼って表現力アップ」する方法を学びました。

今回は、テーブルを表示する方法を学びましょう。

当社の新人エンジニア研修でも、テーブルは商品の情報を一覧表示するときに必要です。

また、フォームなどの入力欄を簡易的に整列させるために使うこともあります。

2. テーブルのtableタグ

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

<アウトプット>

テーブルを別ウィンドウで表示

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

<ソースコード>

上から順に説明します。

テーブルを作るには、tableタグを使います

border ="1"という属性はテーブルに枠線を表示させるためのものです。

もしも、0を指定すると見えないテーブルを作ることができますので試してみましょう。

見えないテーブルの用途としては次に学ぶフォームや前回学んだ画像の位置を揃えるのに使えます。(簡易的な方法です。本当はCSSを使う方が好ましいです)

tableタグの中にtheadタグとtbodyタグを作ります

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

行を作るにはtrタグを使います

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

</tr>(table rowの閉じタグ)であたかも改行されたように次の行に移ります。

  • 上のソースコードでテーブルの行数が何行かわかりますか?
あなたの答え:

そうですね。 trタグの数を数えて3行ですね

そのtrタグの中にthタグやtdタグを入れます

thタグは見出し、tdタグはデータです。

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

  • 上のソースコードでテーブルの列数が何列かわかりますか?
あなたの答え:

そうですね。 trタグの中の td>タグの数を数えて2列ですね。

したがって、実際の表と照らし合わせると下図8.1のように考えるとイメージしやすいと思います。

<table>
<thead>
 <tr><th>都市名</th> <th>名物</th></tr>
</thead>
<tbody>
 <tr><td>名古屋</td><td>ひつまぶし</td></tr>
 <tr><td>伊勢</td><td>赤福</td></tr>
</tbody>
</table>
図8.1 tableのイメージ

ちょうど、trの閉じタグ(</tr>)で改行が行われるイメージです。

なお、上記のようにテーブルのサイズ指定がない場合は、文字列の長さに応じて自動調整されます。

2.1 テーブルの大きさを指定する方法

テーブルの幅を指定する方法には、画面横幅のピクセル数を指定する方法と、画面横幅のパーセンテージを指定する方法があります。

1.ピクセル数を指定する方法

<ソースコード(抜粋)>

<アウトプット>

テーブルを別ウィンドウで表示

 

2.パーセンテージで指定する方法

<ソースコード(抜粋)>
<アウトプット>

テーブルを別ウィンドウで表示

3.セルのサイズ指定

なお、データセル一つ一つのサイズを設定することもできます。

ただし、異なる値を設定した場合は一番大きい値に統一されます。

例えば、以下のように1列目に100と200という異なる幅を設定した場合です。

<ソースコード(抜粋)>
<アウトプット>

テーブルを別ウィンドウで表示

2.2 数値を右寄せにする

なお、業務アプリケーションでは金額を扱うことが多く、金額は右寄せで表示するのが半ば常識となっています。

そんなときには以下のように「align="right"」と設定します。

<ソースコード(抜粋)>

<アウトプット>

テーブルを別ウィンドウで表示

例題1

以下のテーブルは何行何列で表示されますか?

あなたの答え:

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

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

<まとめ:隣の人に正しく説明できたらチェックを付けましょう>

□テーブルを作るには、tableタグを使い、その中にtheadタグとtbodyタグを作る

□trタグが表の1行にあたり trタグの中にthタグやtdタグを入れる

□trタグの数で行数が決まり、tdタグ(thタグ)の数で列数が決まる

【今回の復習Youtube】

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

テーブル(新人エンジニア研修向け解説) 最後までお読みいただきありがとうございます。

新人エンジニア研修のプログラムを見てみる

当社は研修講師を募集中です(サブ講師のため未経験者可)