8.テーブルで表現力アップ

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

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

 

テーブルを扱う

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

＜アウトプット＞

テーブル１

（注：このテーブルにはCSSによる装飾がかかっています）

＜ソースコード＞

 

上から順に説明します。

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

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

記述したピクセル数値が、テーブルの枠線の幅になります。　

 

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

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

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

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

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

<th>は見出し<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>

 

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

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

１．ピクセル数を指定する方法

＜アウトプット＞

テーブル２

 

（注：このテーブルにはCSSによる装飾がかかっています）

２．パーセンテージで指定する方法

＜アウトプット＞

テーブル３

＜ソースコード＞

 

 

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

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

 

【今回の復習Youtube】

 

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