表の作成

[表]は、タイムテーブルやレシピなどに使われるほか、ホームページでは、[レイアウト]を作る大変重要な役割を果たしています。[表]は、[罫線]と[内容]で構成されており、次の三種類のタグで構成されています。表を作るには、最初に[表を作るタグ]として<table></table>を書きます。次ぎに[行を作るタグ]として<tr></tr>を書きます。[内容を表すセルを作るタグ]として<td></td>を書きます。[tr]は、table row(行の意味)で、[td]は、table data(データー)の意味です。

左図は、演習用として作成した[日程表]です。

[表]の基本的な記述は次の通りです。

一行目　<tr><td>内容</td></tr>

二行目　<tr><td>内容</td></tr>

行の始まりと終わりには<tr></tr>

内容の始まりと終わりには<td></td>

これを繰り返します。

左図の作成にはかなりのタグを書かなければなりませんので大変です。この表作成では、表の作成に必要なタグはすべて使っています。御関心のある方は次の文字列をクリックしてしてください。クリックすると[sample.html]が開かれます。

ヨーロッパ旅行　　

ご覧になった後このフアイルに戻るにはブラウザの←をお使いください。

表の作成1(表の大きさの指定)

表の横幅を指定するには<width>を使います。
表の高さを指定するには<height>を使いますが、　表全体の高さを指定すると、行を増やした場合などに変動するので別途の指定となります。

<html><head><title>表の大きさ</title>
<body><table border width="400" height="100">
<tr><td>1日目</td><td>ロンドン</td></tr>
<tr><td>2日目</td><td>パリ</td></tr>
</table></body></html>

表の作成2(表の位置の指定)

表の位置を指定するには<align>を使います。
表の位置も画像の場合と同じく<align>の指定で<left><center><right>の指定が出来ます。
左側に指定する<table align=“left”>
中央に指定する<table align=“center”>
右側に指定する<table align=“right”>

表の作成3(表の見出し・タイトル)

表の見出しには<th></th>を使います。
<th>日程</th><th>スケジュール</th>
表のタイトルには<caption></caption>を使います。
<caption>京都旅行のスケジュール</caption>

表の作成4(セルに関する事項)

[セル]の高さ、縦の結合、横の結合、余白などの設定を行います。高さを指定するには<td height></td>
縦の結合には<td rowspan></td>
横の結合には<td colspan></td>
余白の設定には<table cellpadding></table>
背景色を設定するには<td bgcolor=“色”></td>を使います。

表の作成5(枠の設定)

表の外枠の太さを指定するには[border]を使います。表示は<table border=“●●”></table>で、●●には数字をいれます。数字を入れない場合はピクセル[1]で表示されます。表示しない場合は[0]と書き込みます。
外枠の色は通常上と下で色が違います。(上・左)<bordercolorlight>(下・右)<bordercolordark>を使います。

表の活用

ホームページ作成の上で[表]の役割と活用は大変重要です。例示として左図のレイアウトをhtmlのｔａｂｌｅを使って作成して見ました。極めてシンプルなレイアウトです。
[見出し]→ここにホームページのタイトル(見出し)を書きます。勿論画像でタイトルを作成することも出来ます。
[ホームページの説明など]→ホームページ開設の挨拶やホームページ開設の趣旨などを書込む欄です。
[リンク]→トップページから数ページのフアイルりリンクする欄です。
[画像]→トップページを飾る画像を挿入し、画像の説明等を記述します。

★　下の[私の海外旅行記]は、演習用にHTMLのタグを使って作成したもので、レイアウトの一例としてご参考にしてください。各画像をクリックすると大きな画面と説明文が表示されるようにレイアウトしています。