授業形式でhtml・ソース・タグを勉強し、ホームページを自作する　テーブル制作

テーブル（表）タグは、はっきり言ってややこしいです。
また、複雑なテーブルをタグだけで作ろうとすると１回目はほとんどミスをします。

複雑なテーブル（枠組み）の場合は、制作ソフトのお世話になりましょう。
ある程度ソフトで作っておいてから、ソースで細かく設定する方が楽です。

ここでは基本だけを勉強します。

<table>～</table>

「ここからここまでがテーブルですよ」と宣言します。

<tr>～</tr>

横方向の範囲を指定します。

<td>～</td>

マスのひとつずつです。エクセルの「セル」と同じような感じです。

<tr>～</tr>がひとつ増えるごとに下に追加されていきます。
<td>～</td>がひとつ増えるごとに右に追加されていきます。

例えば、横３列、縦２段のテーブルの場合は

1	2	3
4	5	6

<table>
<tr>
  <td>1</td>
  <td>2</td>
  <td>3</td>
</tr>
<tr>
  <td>4</td>
  <td>5</td>
  <td>6</td>
</tr>
</table>

テーブル（表）を使った簡単な方法の紹介もあります。ダウンロードしたトップページ（ index.html ）に課外授業として書いていますのでご覧ください。
詳しく勉強したい方はネット接続した上でテーブル作成の基礎講座をご覧ください。
背景に色を付けたり、背景に画像（写真など）を表示したりする方法まで書いています。

属性には色々あります。
ページの背景色や背景画像もテーブルに使えます。
それ以外にテーブルの見え方で次のような属性があります。

width="n": 横幅のことです。ピクセルや％で書きます。table,tdで使えます。
height="n": 高さのことです。ピクセルや％で書きます。table,tdで使えます。
border="n": 数字はピクセル単位で境界線の太さを表します。tableで使えます。
cellspacing="n": テーブル外枠とそれぞれの「マス（セル）」の隙間でピクセル単位で書きます。tableで使えます。
cellpadding="n": マス（セル）と中に入れる画像や文字との隙間でピクセル単位で書きます。tableで使えます。

また次のようなこともできます。

１．セルを連結する
　　　・・・横方向：colspan="n" 　n=2～
　　　・・・縦方向：rowspan="n" 　n=2～
２．色を付ける
　　　・・・全体の場合<table bgcolor="色コード">
　　　・・・部分的な場合<tr bgcolor="色コード">,<td bgcolor="色コード">
３．画像や写真を付ける
　　　・・・全体の場合<table background="背景のURL">
　　　・・・部分的な場合<tr background="背景のURL">,<td background="背景のURL">
４．見出し的な使い方
　　　・・・<td>～</td>の替わりに<th>～</th>と書くと、その行は太字でセンタリングされます。

≪練習≫
保存した「練習８.html」にリンクを加えます。
「練習８.html」を右クリックし、「プログラムから開く」→「Notepad」をクリック。
「ファイル」→「名前をつけて保存」を選び、「練習９.html」で保存します。

リンクの上の「<p align="center">」の上に１行スペースを空け、そこに次のソースをコピペします。

<p align="center">
<table width="70%" border="1" cellpadding="5">
<tr>
  <td colspan="2" align="center" bgcolor="#000099">
  <font color="#ffffff">自己紹介［ニックネーム：］</font></td>
</tr>
<tr>
  <td align="center"><img src="gazou/syasin.jpg"></td>
  <td>○○○○○○○○○○○○○○○
  ○○○○○○○○○○○○○○○
  ○○○○○○○○○○○○○○○</td>
</tr>
</table>
</p>

ニックネームの部分は、あなたのニックネームを追加してください。
「syasin.jpg」部分がGIF画像なら、「syasin.gif」など付けた名前に書き替えてください。
「○○○○○○」部分は、あなたが保存した文章にコピペで張り替えてください。

完成したら上書き保存してください。
「練習９.html」を開いて確かめてください。
写真と文章がうまく表示されていれば完成です。
文章が詰まっているようでしたら、「<br>」ブレイクタグ（改行タグ）で適当に改行してください。

≪私の場合の完成したイメージ（ちょっと小さくしています）≫

こんな感じにできたでしょうか？
ニックネームを書き込む部分は「colspan="2"」を使い、横方向に連結しています。
さらに「bgcolor="#000099"」と「<font color="#ffffff">」で背景色と文字色も指定しています。

最終のソースを書いておきます。

<html>
<head>
<title>自己紹介</title>
</head>
<body style="background:#ffffff
 url(gazou/bcg1.gif) right bottom no-repeat fixed;">
<a name="top"></a>
<p align="center">
<font size="6" color="olive" face="HGｺﾞｼｯｸE">
ホームページを自作する<br>自己紹介
</font>
</p>
<p align="center"><img src="gazou/a02.jpg"></p>
<p align=center>
<a href="folder/link1.html">
ここをクリックするとリンク先のページに行きます。</a>
</p>
<p align=center>
<a href="mailto:abc@defghij.klm?Subject=ご質問
&body=お名前：%0D%0Aアドレス：%0D%0Aご質問内容：">ご質問はこちら</a>
</p>
<p align="center">
<table width="600" border="1" cellpadding="5">
<tr>
  <td colspan="2" align="center" bgcolor="#000099">
  <font color="#ffffff">自己紹介［ニックネーム：ジョイ＠関西］</font>
  </td>
</tr>
<tr>
  <td align="center"><img src="gazou/syasin.gif"></td>
  <td>
  生息地･･･････関西<br>
  流れる血･････天下泰平な大型　アッハッハッハッ<br>
  一番の趣味･･･寝ること<br>
  好きなこと･････寝ること、食べること<br>
  時間があれば･･寝る<br>
  <br>
  私のＨＰ制作歴はたった2年半です。<br>
  だから、すぐにできますよ～<br>
  <center>♪　皆さんがＨＰを自作できますように　♪</center></font>
  </td></td>
</tr>
</table>
</p>
<img src="gazou/space.gif" width="5" height="1200">
<a href="#top">先頭に戻ります。</a>
</body>
</html>

インターネットにアップロードする場合はページの名前を半角英数に変更し、
さらに <head>～</head> 部分、できればタイトルより上に下記のソース（メタタグ）を書いてください。
意味は判らなくてもいいですから、これをコピペしてください。

<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">

これで自己紹介ページの完成です。
長い時間お疲れ様でした、授業はここまでです。

でも、一通り勉強したからって、タグで簡単にホームページができるものではないですね。

実際の勉強会に使った資料をサイト用に少しだけアレンジしていますが、
同じ内容でも2回、3回と繰り返した方が良いみたいです。
初めての方でも、2回目が終わるころに結構判ってきます。

勉強会でも話していますが、
　・復習すること
　・自分のページをイメージしてチャレンジすること
この２つをしなかったら、タグは覚えられません。

是非チャレンジして、ここまでの内容をうまく組み合わせてページを作ってください。

そして行きづまったら、ここに帰ってきて、もう一度復習してください。
また質問してもいいです。

そして、ページができたら是非紹介してくださいね、待ってますから。