即席ホームページ作成講座【第五回】

お久しぶりです。
最近ちょっとほかのことにはまっていて、更新を思いっきり怠っておりました。
さてと、今回は、<TABLE>の使い方。それでは、木材とトンカチを用意して･･･
じゃないって。
まあ、いいや。これが使えるようになると、ページ全体のデザインがしやすくなるよ。
うんじゃ、早速いってみようか。まずは今回目標となるページはここ。　サンプル１

そしたらまず､サンプル１のソースを出してみよう。
出し方は覚えてるよね?
忘れちゃったという人のためにもう一回。【右クリック】→【ソースの表示】

テーブルの挿入

まず、テーブルとは何か？
単純に言えば表のことだね。
まあ、文字で書いてても実感湧かないからサンプル2のページを見てみよう。
なんか、単なる単純な表が出てきたでしょ？
これはまだ何にも指定していないから、勝手に幅や、高さを調節してくれてる。
（ちなみに、縦を『行』、横を『列』と言うから覚えといて）
ソースを見るとわかると思うけど、
まずはテーブルを入れますよと<TABLE>タグを書く。
その次に、縦の分割指定の<TR></TR>タグ、
そして、その中に横の分割指定の<TD></TD>を書く。
２行目も同じ様に<TR></TR>を書いて２行目ですよと指定する。
またその中を<TD></TD>で横分割していく。
最終的にテーブルの終わりを指定する</TABLE>を書く。

うーん、わかりにくいね。
つまり、まず自分の作りたい表の縦のマス目の数と横のマス目の数をかんがえる。
<TABLE></TABLE>を書く。
縦のマス目分の<TR></TR>を<TABLE></TABLE>の中に書く。
そして、横のマス目分の、<TD></TD>を、それぞれの<TR></TR>の中に書く。

デザインにTABLEを使ってみよう！！

<TABLE> タグを使って表を作るだけじゃもったいない。
よく使われるのにページ自体のデザインを整えるのに使うってのがある。
まあ、何言っているかわからないと思うから、
まずはここと、ここのページを見てくれるかな？
ついでに、ソースを見てもらうと、ちゃんとあるでしょテーブルが！！

それじゃまずデザインに使う場合には邪魔な表の線を消す方法。
<TABLE border="0">と指定してやる。ただこれだけ。
これで邪魔な線が消える。後は、好きなように表を作っていくだけ．
その、表のなかに文字列を入れてもいいし、画像を入れてもいい。

表の大きさを指定しよう

デザインで使った場合一番問題となるのが、そのページを見に来てくれた人が
どのような、大きさのモニタで表示するかってこと。
何も表に指定がない場合、ある程度はブラウザ自体が合わせてくれるけど、
どうせなら自分が見せたいように表示してみたいじゃん！！
そこで、表の大きさを指定する方法。

<TD width="X" height="X">で指定してやる。
Xは、ピクセル数もしくは表に対する割合をパーセンテージで指定。

ちなみに、横幅がwidth、縦幅がheightで指定する。
これを指定してやれば、ある程度、見せたいデザインで表示させることが可能。
大体800*600を超えない範囲で作ればいいかな。
(縦の長さはスクロールさせりゃいいから別に深く考えなくてもいいけどね。）
ただ、完全にしようと思うと、見にくる人のフォントの大きさまで
考えなきゃいけないから、非常に大変なことになるよ。

個別のセルの中の表示位置

ここまででもある程度使えるけど、
個別の升目のなかの文字列や画像を好きな位置に表示させたくない？
あるんですそうゆうのが！

<TD align="X" valign="Y">と指定してやる。
Xは"left","center","right"のいずれか。Yは"top","middle","bottom"のいずれか。

つまり、alignでセル内の横の表示位置を決めvalignでセル内の縦の表示位置を決める。

セルの連結

さてと、次はマス目をくっつけてみようか。
これも簡単、まずは

ここまでくれば、テーブルを使ったデザインができるんじゃないかな？
でも、テーブルを使ったデザインの欠点は、非常にソースが長くなる。
つまり、後々更新したりするのが面倒だったりする。
ま、そこらへんを考えて使ってみてよ！！

今回のサンプルの解説。

<HTML>

<HEAD>

</HEAD>

<hr>

<h2>-Content=</h2>

<table>…ここからテーブルを始めるという合図。

<tr>…一行目。

<td bgcolor="green" align="center"><font color="white"><b>What's New</b></font></td>…一段目、一列目を指定。

<td>･･･このページの更新情報。ならびに注意事項。</td>…１行目、２列目を指定。

</tr>…１行目はここまで。

<tr>…２行目の開始宣言。

<td bgcolor="green" align="center"><font color="white"><b>卒論</b></font></td>…２行目・１列目

<td>･･･卒論の進行状況を随時UP。ご意見待ってます。</td>…２行目・２列目

</tr>…２行目はここまで。

　　　　　　　　　　　　　　　　　　　(中略）

<tr>…７行目の開始宣言

<td bgcolor="green" align="center">
<font color="white"><b>自己紹介</b></font></td>…７行目・１列目

<td>･･･このページを作った人。</td>…７行目・２列目

</tr>…７行目はここまで

</table>…テーブルはここまでですよという合図

<p>メールはこちらまで…

</center>

</body>

</html>

青い文字が解説です。赤い文字が今回変更したところ。
それ以外に、文字が見やすいように文字の色を所々変更してあります。
それは自分でどこが変更されたか確認してみてください。

第五回はここまで。今回も説明がえらく長くなったけど理解できたかな？
次回は、３ペインのページをもっと簡単に作るためにフレームのお勉強をしよう！！
それじゃお楽しみに！！

＞即席ホームページ作成講座
第一回	第二回	第三回	第四回	第五回	第六回	第七回	第八回	第九回	第十回
サポートコーナ		第一回	第二回	第三回			【ＣＯＭＰＵＴＥＲ　ＴＯＰ】
ネスケ対策