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

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

前回は、「画像を貼って表現力アップ」方法を学びました。
 
今回は、テーブルを表示する方法を学びましょう。

 

テーブルを扱う

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

<アウトプット>

テーブル1

(注:このテーブルには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>

 

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

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

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

<アウトプット>

テーブル2

 

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

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

<アウトプット>

テーブル3

<ソースコード>

 

 

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

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

 

 

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