ここでは、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タグの数を数えて３行ですね
そのtrタグの中にthタグやtdタグを入れます。
thタグは見出し、tdタグはデータです。
それぞれ、テーブルヘッダー【table header】とデータセル【table data cell】の略です。
- 上のソースコードでテーブルの列数が何列かわかりますか？
| あなたの答え： |
そうですね。 trタグの中の td>タグの数を数えて２列ですね。
したがって、実際の表と照らし合わせると下図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> |
ちょうど、trの閉じタグ（</tr>）で改行が行われるイメージです。
なお、上記のようにテーブルのサイズ指定がない場合は、文字列の長さに応じて自動調整されます。
2.1 テーブルの大きさを指定する方法
テーブルの幅を指定する方法には、画面横幅のピクセル数を指定する方法と、画面横幅のパーセンテージを指定する方法があります。
１．ピクセル数を指定する方法
<ソースコード（抜粋）>
＜アウトプット＞
テーブルを別ウィンドウで表示
２．パーセンテージで指定する方法
＜ソースコード（抜粋）＞
＜アウトプット＞
テーブルを別ウィンドウで表示
3．セルのサイズ指定
なお、データセル一つ一つのサイズを設定することもできます。
ただし、異なる値を設定した場合は一番大きい値に統一されます。
例えば、以下のように1列目に100と200という異なる幅を設定した場合です。
＜ソースコード（抜粋）＞
＜アウトプット＞
2.2 数値を右寄せにする
なお、業務アプリケーションでは金額を扱うことが多く、金額は右寄せで表示するのが半ば常識となっています。
そんなときには以下のように「align="right"」と設定します。
＜ソースコード（抜粋）＞
＜アウトプット＞
テーブルを別ウィンドウで表示
例題1
以下のテーブルは何行何列で表示されますか？
| あなたの答え： |
今回は「テーブル」について学びました。
次回からは「フォーム部品でユーザーに入力してもらう」方法について学びます。
<まとめ：隣の人に正しく説明できたらチェックを付けましょう>
□テーブルを作るには、tableタグを使い、その中にtheadタグとtbodyタグを作る
□trタグが表の1行にあたり trタグの中にthタグやtdタグを入れる
□trタグの数で行数が決まり、tdタグ（thタグ）の数で列数が決まる