Print Friendly, PDF & Email

ここでは、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>の中に<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.ピクセル数を指定する方法

<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.パーセンテージで指定する方法

<ソースコード>
<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】

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