Ⅵ-１　テーブルを作る

ここでは色の呼び名を表にまとめてみます。
復習を兼ねて、ページを最初から作ってみましょう。

１）「色の呼び名」と名付けた新しいページを作ります

最初に作ったⅠ-１「base.txt」を開きます。
名前を付けて保存→名前は「iromei.htm」→「マイドキュメント」の「webpage」に保存
①タイトルを付けます。
<title>～</title>のところに、ページのタイトルを「色の呼び名」を入れます。

②見出しを付けます。
<body>の中に<h1>～</h1>を追加し、ここに「色の呼び名」とします。

③文字の色を指定します。
コンテンツをページと同じ色に設定するため、
<style>の中に「body{～}」を追加し、文字色「color:#333333」を設定します。

④背景色を指定します。
「body{～}」の中にコンテンツをページと同じ色にするため、「;background-color:#f0f8ff」を追加します。
⑤ここでも背景にコンテンツページと同じ背景画像を使うことにします。
「body{～}」の中に「;background-image:url(back.jpg)」を追加します。【参考】

２）作成するテーブルの構造を考えます

テーブルを作る場合どのようなテーブルを作るか考えておくと、作業が進めやすくなります。
ここでは色の呼び名を【表＝テーブル】にするため、項目を「呼び名」「イメージ」にします。
色名は「みずいろ」「みずあさぎ」「あいじろ」「あさみどり」「かすみいろ」の５行で始めます。

３）テーブルのデーターを書く場所を用意します

テーブルのデーターを書く場所を用意するため、<body>の中に<table>～</table>を追加します。
又テーブルの罫線を表示させるため、<table>に「border」と書き足します。

４）テーブルの１行目に書く場所を用意します

テーブルの１行目に書く場所を用意します。
<table>～</table>の中に「<tr></tr>」を追加します。
<tr>～</tr>の中に書いていく項目は、同じ行のコンテンツとして扱われます。

５）項目の見出しを表示します

テーブルの中身は、左から右、上から下へと書いていきます。
そこで最初に、１行目に項目の見出しを書きます。
<tr>～</tr>の中に「<th></th>」を追加し、この中に「呼び名」と書きます。
<th></th>を追加し、「イメージ」と書き込みます。【参考】
文字が太く表示されているのは<th></th>が見出しの役目をしているためです。

６）２行目を作ります

２行目を作るために、<table>～</table>の中、先の<tr></tr>の下に「<tr></tr>」を追加します。
その中に「そらいろ」更に「<td></td>」を追加し、表示したい文字を書き込みます。【参考】
<th>や<td>に書いたコンテンツは、それぞれ、テーブルのマス目の一つとして表示されます。
このマス目のことを「セル」と呼びます。

７）３行目以降を作ります

<tr><td>～</td>～</td></tr>
までをコピーして６）の下に貼り付け、～のところテキストを書き込んでいきます。

<html>
<head>
<title>色の呼び名</title>
<style type="text/css"></style>
</head>
<body>

<h1>色の呼び名</h1>
<table border>
<tr><th>呼び名</th><th>イメージ</th></tr>


<tr><td>水色<br>みずいろ</td>
<td>海や川の水の緑がかった青から名付けられた。<br>
英名を「アクア」と言うが、アクアとはラテン語で「水」を意味する<br>
万葉集では「水縹（みななだ）」詠んだ歌があり、<br>
それが「水色」と言う名に変化したと言う説がある。<br>
「水縹」とは水で薄めたような薄色の青を言う。
</td></tr>


</table>
</body>
</html>

７）テーブルの表示

テーブルを作成するＨＴＭＬ

<title> 表を作成

<tr> 行を作成

<th> 見出し用のセルを作成・太い文字で中央に表示

<td> セルを作成・普通の太さで、左に揃えて表示

８）テーブルの罫線の表示

<title>にborderと指定することで、テーブルの罫線を表示させることが出来ます。
勿論borderの設定を削除することで、罫線は表示されなくなります。【参考】

<title>	表を作成
<tr>	行を作成
<th>	見出し用のセルを作成・太い文字で中央に表示
<td>	セルを作成・普通の太さで、左に揃えて表示

Ⅵ-１ テーブルを作る