ここでは、IT系企業の新入社員向けにHTMLを解説しています。
デザイナーになるほどHTMLに詳しくなくてもいいけれど、Webアプリを作る上で必要な入力画面は自力で作りたい、あなたのためのページです。
テーブルを扱う
以下のようなテーブルを作りたいとします。
<アウトプット>
(注:このテーブルにはCSSによる装飾がかかっています)
<ソースコード>
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<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″という属性はテーブルに枠線を表示させるためのものです。
記述したピクセル数値が、テーブルの枠線の幅になります。
<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.ピクセル数を指定する方法
<アウトプット>
(注:このテーブルにはCSSによる装飾がかかっています)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<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> |
2.パーセンテージで指定する方法
<アウトプット>
<ソースコード>
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<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> |
今回は「テーブル」について学びました。
次回からは「フォーム部品でユーザーに入力してもらう」方法について学びます。