課題4-1

  1. Terapadを起動する。
  2. タブの幅を4文字分にし、タブと空白文字を表示する設定に変更する (方法を忘れた場合はWebページ制作第1回の資料を参照)。
  3. デスクトップに「課題4」フォルダーを作り、さらにその中に「1」フォルダーを作る。
  4. Terapadで「文字/改行コード指定保存」で、文字コードを「UTF-8N」にして、「課題4」の中の「1」フォルダーの中に「index.html」という名前で保存する。


  5. 以下の囲みのものをTerapadにコピー＆ペーストし、上書き保存する。
    <!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>表の練習</title>
</head>
<body>
表の練習<br>
<table>
	<tr>
		<th>日付</th><th>体温(℃)</th>
	</tr>
	<tr>
		<td>7/14(火)</td><td>36.4</td>
	</tr>
	<tr>
		<td>7/15(水)</td><td>36.2</td>
	</tr>
	<tr>
		<td>7/16(木)</td><td>36.5</td>
	</tr>
</table>
</body>
</html>


  6. 「課題4」の「1」フォルダーにある「index.html」をブラウザで開く。すると、このようなものが表示される。
    枠線は表示されていないが、「表の練習」から下の部分が表になっている。
    <table>と</table>の間に、表の項目の情報を書く。
    <tr>と</tr>の間に、一行分の情報を書く。
    <th>と</th>に囲まれた部分が見出しセルになる (他に指定しなければ文字は太字で、真ん中合わせになる)。
    <td>と</td>に囲まれた部分が通常セルになる (他に指定しなければ文字は細字で、左寄せになる)。


  7. 9行目の<table>のところを<table border="1">に書き換えてリロードする。
    「border」に数値を指定すると、このように枠線が表示される。
    「border=」のあとに入れる数値を大きくすれば枠線が太くなる。


  8. 赤い囲みのコードを追加してブラウザをリロードする。すると、体温の数値が右寄せになる。
    「align」に値を指定すると、セルの中の文字の位置を変えられる。
    • left：左寄せ
    • center：中央合わせ
    • right：右寄せ
    何も指定していなければ見出しは中央合わせになる。
    何も指定していなければ通常の項目は左寄せになる。
    (Webページに限らず) 通常、表の項目を書くときは普通の文字列は左寄せ、数値は右寄せにするのがお約束。
    また、見出しは中央寄せにするのがお約束 (alignで変えられるが、変えない方がよい)


  9. 下から2行目の</body>の上に、以下の囲みのものをコピー＆ペーストして上書き保存し、ブラウザをリロードする。すると、図のような表が追加される。
    <br><br>
応用1　複数の行にまたがるセル
<table border="1">
	<tr>
		<td rowspan="3">動物</td><td>哺乳類</td>
	</tr>
	<tr>
		<td>爬虫類</td>
	</tr>
	<tr>
		<td>両生類</td>
	</tr>
	<tr>
		<td rowspan="2">植物</td><td>被子植物</td>
	</tr>
	<tr>
		<td>裸子植物</td>
	</tr>
</table>

    rowspanを使うと、一つのセルを複数行にまたがるように伸ばせる。


  10. 下から2行目の</body>の上に、以下の囲みのものをコピー＆ペーストして上書き保存し、ブラウザをリロードする。すると、図のような表が追加される。
    <br><br>
応用2　複数の列にまたがるセル
<table border="1">
	<tr>
		<th>科目</th><th>学年</th><th>場所</th><th>担当</th>
	</tr>
	<tr>
		<td>情報リテラシー</td><td align="right">1</td><td>演習室C</td><td>全教員</td>
	</tr>
	<tr>
		<td>プログラミング演習</td><td align="right">2</td><td>演習室A・B・C</td><td>坂井・新妻・和島</td>
	</tr>
	<tr>
		<td>創作ゼミナール</td><td align="right">3</td><td colspan="2" align="center">研究室による</td>
	</tr>
</table>

    colspanを使うと、一つのセルを複数列にまたがるように伸ばせる。


  11. 最初の表に赤い囲みのコードを追加してブラウザをリロードする。すると行が追加され、その行だけ背景色が別の色になる。
    「bgcolor」に値を入れるとセルの背景色を変えられる。入れる値はここなどが参考になる。
    「tr」でなく「th」や「td」で背景色を指定すれば、セル単位で色を変えられる。


課題2
inserted by FC2 system