ここでは、IT系企業の新入エンジニア研修向けにHTMLを解説しています。
デザイナーになるほどHTMLに詳しくなくてもいいけれど、Webアプリを作る上で必要な入力画面は自力で作りたい、あなたのためのページです。
なぜ、新人エンジニア研修でテーブルを学ぶのか、その理由。
前回は、「画像を貼って表現力アップ」方法を学びました。
今回は、テーブルを表示する方法を学びましょう。
当社の新人エンジニア研修でも、テーブルは商品の情報を一覧表示するときに必要です。
また、フォームなどの入力欄を簡易的に整列させるために使うこともあります。
テーブルを扱う
以下のようなテーブルを作りたいとします。
＜アウトプット＞
テーブルを別ウィンドウで表示
（注：このテーブルにはCSSによる装飾がかかっています）
＜ソースコード＞
<table border ="1">
<thead>
<tr>
<th>都市名</th>
<th>名物</th>
</tr>
</thead>
<tbody>
<tr>
<td>名古屋</td>
<td>ひつまぶし</td>
</tr>
<tr>
<td>伊勢</td>
<td>赤福</td>
</tr>
</tbody>
</table>上から順に説明します。
テーブルを作るには、<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>はデータです。
例えば、上のソースコードでテーブルの列数が何列かわかりますか？
そうですね。 <tr> タグの中の <td> タグの数を数えて２列ですね。
それぞれ、テーブルヘッダー（table header）とデータセル（table data cell）の略です。
したがって、実際の表と照らし合わせると以下のようなイメージを持つとイメージしやすいと思います。
| <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>タグで改行が行われるイメージを持つと良いでしょう。
なお、上記のようにテーブルのサイズ指定がない場合は、文字列の長さに応じて自動調整されます。
２．テーブルの大きさを指定する方法
テーブルの幅を指定する方法には、画面横幅のピクセル数を指定する方法と、画面横幅のパーセンテージを指定する方法があります。
１．ピクセル数を指定する方法
<table border ="1" width="200">
<thead>
<tr>
<th>都市名</th>
<th>名物</th>
</tr>
</thead>
<tbody>
<tr>
<td>名古屋</td>
<td>ひつまぶし</td>
</tr>
<tr>
<td>伊勢</td>
<td>赤福</td>
</tr>
</tbody>
</table>＜アウトプット＞
テーブルを別ウィンドウで表示
２．パーセンテージで指定する方法
＜ソースコード＞
<table border ="1" width="50%">
<thead>
<tr>
<th>都市名</th>
<th>名物</th>
</tr>
</thead>
<tbody>
<tr>
<td>名古屋</td>
<td>ひつまぶし</td>
</tr>
<tr>
<td>伊勢</td>
<td>赤福</td>
</tr>
</tbody>
</table>＜アウトプット＞
テーブルを別ウィンドウで表示
3．セルのサイズ指定
なお、データセル一つ一つのサイズを設定することもできます。
ただし、異なる値を設定した場合は一番大きい値に統一されます。
例えば、以下のように1列目に100と200という異なる幅を設定した場合です。
＜ソースコード＞
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>このタイトルはブラウザのタブに表示されます</title>
</head>
<body>
<table border ="1">
<thead>
<tr>
<th width = 100>都市名</th>
<th>名物</th>
</tr>
</thead>
<tbody>
<tr>
<td width = 200>名古屋</td>
<td>ひつまぶし</td>
</tr>
<tr>
<td>伊勢</td>
<td>赤福</td>
</tr>
</tbody>
</table>
</body>
</html>＜アウトプット＞
4.数値を右寄せにする
なお、業務アプリケーションでは金額を扱うことが多く、金額は右寄せで表示するのが半ば常識となっています。
そんなときには以下のように「align="right"」と設定します。
＜ソースコード＞
<table border="1">
<thead>
<tr>
<th>都市名</th>
<th>名物</th>
<th>金額</th>
</tr>
</thead>
<tbody>
<tr>
<td>名古屋</td>
<td>ひつまぶし</td>
<td align="right">3,400</td>
</tr>
<tr>
<td>伊勢</td>
<td>赤福</td>
<td align="right">760</td>
</tr>
</tbody>
</table>＜アウトプット＞
テーブルを別ウィンドウで表示
最後に複雑なテーブルを作るときに役立つ以下のツールを紹介しておきます。
今回は「テーブル」について学びました。
次回からは「フォーム部品でユーザーに入力してもらう」方法について学びます。
【今回の復習Youtube】
最後までお読みいただきありがとうございました。