課題3　表

Terapadを起動する。
「表示」→「オプション」でタブの幅を4文字分にし、タブと空白文字を表示する設定に変更する。

デスクトップに「課題3」フォルダーを作り、さらにその中に「1」フォルダーを作る。
Terapadで「文字/改行コード指定保存」で、文字コードを「UTF-8N」にして、「1」フォルダーの中に「index.html」という名前で保存する。

以下のコードをコピー＆ペーストして上書き保存する。

<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
	<style type="text/css">
		/* 画像 */
		img {
			max-width: 100%; /* 最大幅をブラウザの幅にする */
		}
		/* 見出し用 */
		.header {
			/* 2倍サイズ */
			/* 太字 */
		}
		/* 本文用 */
		div.main {
			/* 左をあける */
		}
		/* 表全般の設定 */
		table {
			/* 枠をくっつける */
		}
		/* 表の見出し・項目 */
		th, td {
			/* 枠を描く */
			/* 上下左右の余白 */
		}
		/* 中央あわせ項目 */
		td.center {
			/* 中央合わせにする */
		}
		/* 右寄せ項目 */
		td.right {
			/* 右寄せにする */
		}
		/* 灰色項目 */
		td.gray {
			/* 背景を灰色にする */
		}
	</style>
	<title>課題3. 表</title>
</head>
<body>
<span class="header">青森市の天気</span>
<div class="main">
	5/26の3時間天気
	<table>
		<thead>
			<tr>
				<th>時刻</th>
				<th>天気</th>
				<th>気温(℃)</th>
				<th>降水確率(%)</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td class="center">03</td>
				<td class="center">晴れ</td>
				<td class="right">14.8</td>
				<td class="right">0</td>
			</tr>
			<tr>
				<td class="center">06</td>
				<td class="center">晴れ</td>
				<td class="right">14.9</td>
				<td class="right">0</td>
			</tr>
			<tr>
				<td class="center">09</td>
				<td class="center">晴れ</td>
				<td class="right">19.3</td>
				<td class="right">0</td>
			</tr>
			<tr>
				<td class="center">12</td>
				<td class="center">晴れ</td>
				<td class="right">23.3</td>
				<td class="right">0</td>
			</tr>
			<tr>
				<td class="center">15</td>
				<td class="center">晴れ</td>
				<td class="right">20.4</td>
				<td class="right">0</td>
			</tr>
			<tr>
				<td class="center">18</td>
				<td class="center">晴れ</td>
				<td class="right">18.8</td>
				<td class="right">10</td>
			</tr>
			<tr>
				<td class="center">21</td>
				<td class="center gray">曇り</td>
				<td class="right">17.6</td>
				<td class="right">10</td>
			</tr>
			<tr>
				<td class="center">24</td>
				<td class="center gray">曇り</td>
				<td class="right">15.5</td>
				<td class="right">10</td>
			</tr>
		</tbody>
	</table>
</div>
</body>
</html>

index.htmlをFireFoxで開く。

3行目以降が表だが、この時点では枠線は表示されていない。

tableタグで囲んだ部分に表のデータを記述する。
見出し部分は theadタグ、データ項目部分は tbodyタグで囲む。
trタグで囲んだ部分に表の1行分のデータを記述する。
thタグかtdタグで囲んだ部分にセル (マス) 1つ分のデータを記述する。
(thタグは表の見出し専用、tdは通常のデータ専用。見出しは自動的に太字になる)

CSSの「/* 枠を描く */」の左に「border: solid 1px;」を記入して上書きし、FireFoxのページを更新する。

前回の課題3-1のようなCSS側で「.bold」のようにドットをつけた書き方では、すべての項目に対しての設定が行われるのに対し、「th, td」のように書くとth(見出しのセル)とtd(データ項目のセル)に対して設定が行われる。
結果としてそれぞれのセルに枠が表示される。
「solid」は実線のこと。ほかにも dashed(破線)、dotted(点線)、double(二重線) などがある。

CSSの「/* 枠をくっつける */」の左に「border-collapse: collapse;」を記入して上書きし、FireFoxのページを更新する。

これは table、つまり表そのものに対する設定。プロパティ「border-collapse」に「collapse」を入れることで枠線がくっつく。

CSSの「/* 上下左右の余白 */」の左に「padding: 4px;」を記入して上書きし、FireFoxのページを更新する。

これは th と td に対する設定。プロパティ「padding」に数値を入れることで文字と上下左右の隙間の幅を設定している。
数値を「4px 10px」のように2つ書くと、上下は4px, 左右は10px開くようになる。
数値を「4px 10px 8px」のように3つ書くと、上は4px, 左右は10px、下は8px開くようになる。
数値を4つ書くと上、右、下、左の順に指定される。

CSSの「/* 中央合わせにする */」の左に「text-align: center;」を記入して上書きし、FireFoxのページを更新する。

これは <td class="center">と</td>で囲んだデータ項目に対する設定。プロパティ「text-align」に「center」を入れることでセルの中の文字が中央に配置される。
(なにも設定しなければ td タグで囲んだデータ項目は左寄せになる)
(本文の方では中央合わせにしたいデータをあらかじめこの形で囲んである)

CSSの「/* 右寄せにする */」の左に「text-align: right;」を記入して上書きし、FireFoxのページを更新する。

これは <td class="right">と</td>で囲んだデータ項目に対する設定。プロパティ「text-align」に「right」を入れることでセルの中の文字が右寄せで配置される。
(本文の方では右寄せにしたいデータをあらかじめこの形で囲んである)
Webページに限らず、表の数値データは右寄せにして書くのが一般的。

CSSの「/* 背景を灰色にする */」の左に「background-color: #aaaaaa;」を記入して上書きし、FireFoxのページを更新する。

本文側では、これらの項目は<td class="center gray">と</td>で囲んである。

spanタグでも同様にしてまとめて適用できる。
例えば前回の課題2-1のようなCSSが記述されているなら、<span class="big red italic">と</span>で囲めば「大きい赤い斜めの文字」になる。

CSSの「/* 2倍サイズ */」の左に「font-size: 2.0em;」、「/* 太字 */」の左に「font-weight: bold;」を記入して上書きし、FireFoxのページを更新する。

ここでやっていることは表とは関係のない、普通の文字の表示のしかたについての設定。第2回の文字の変更と同じ。
見出し用の書式をこうして用意しておくと便利。

CSSの「/* 左をあける */」の左に「margin-left: 10px;」を記入して上書きし、FireFoxのページを更新する。

本文側では、「5/26の3時間天気」とその下の表全体を<div class="main">と</div> (46行目と108行目) で囲んである。
こうすることで、見出しと本文の間に段差ができて見やすくなる。
自分のページを作るときも、このようにして本文をちょっと右にずらすとよい。

課題3　表

課題3-1

課題3-2

提出

課題3 表

課題3-1

課題3-2

提出

課題3　表