ITエンジニアのプレイングマネージャー化応援サイト

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

ここでは、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講座の一覧に戻る

新入社員研修ポータル

IT企業の人財育成に関することなら全てお任せ下さい TEL 0120-559-463 受付時間 10:00 - 17:00 (土・日・祝日除く)

ZOOMを使った遠隔研修メニュー(PDFが開きます)

ZOOMを使った遠隔研修

新人エンジニアのためのJavaタイピングゲーム

新人プログラマのためのプログラミング動画

YouTubeチャンネル

お問い合わせはこちらから

    お名前 (必須)

    メールアドレス (必須)

    題名(件名)

    メッセージ本文

    確認画面は表示されません。上記内容にて送信しますので、よろしければチェックを入れてください。

    新入社員研修ポータル

    PAGETOP
    Copyright © Say Consulting Group, Inc. All Rights Reserved.