HTMLサンプル　（２）　 【　テーブル編　】

サンプル（１）は見ていただけましたか？これは、その続編になりますから、まだの方は sample01 こちらからご覧下さい。
それではまず、このページのソースを表示してみてください。「ＩＥ４．０」の場合、メニューバーの 「表示」→「ソース」をクリックすると「メモ帳」が起動し、このページを作っている 「ＨＴＭＬソース」が表示されます。

ソース表示が出たら、「最大化」をしてメモ帳を画面いっぱいに表示してください。 あとは「タスクバー」でブラウザとメモ帳を、交互に切り替えながらソースと表示を 見て頂ければ、解りやすいです。

さて、「テーブル」っていうのは、一体どんなときに使うのでしょうか？
一般的に「テーブル」は表を作るのに使うタグです。 しかし、実はそれだけではないのです！　このタグはどちらかと言うと 「レイアウト」するのに使う方が多いのです。

簡単に例を上げてみましょう。

普通、文字や絵は縦に並びます。 しかし、テーブルを使うことで横に並べることが出来るようになります。
言っている意味がわかりますか？
ちょっとわかりずらい？ 		こんなふうにいくつかの文字列を
並べることが出来るということ！

テーブルは＜ＴＡＢＬＥ＞タグで挟まれた＜ＴＲ＞と＜ＴＤ＞タグによって 作られています。 ＜ＴＲ＞タグに挟まれた部分は、横に一つに並ぶ「列」となり ＜ＴＤ＞タグで挟まれた部分が一つのますとなり、それが縦に並ぶことに よって「行」となります。

つまり、「行」が３行、列が４列の表を作るには
１−１１−２１−３１−４
２−１２−２２−３２−４
３−１３−２３−３３−４
・・と、こういうことです。

ちなみに、各行＜ＴＲ＞の中に入る＜ＴＤ＞タグの数が揃っていないと 表が正しく表示されなくなるばかりか、それ以外の部分にも、おかしな影響が 出ることがあるので注意が必要です。

また、＜ＴＡＢＬＥ＞タグにもオプションがあります。
（すべて「ピクセル単位」です）

  1. ＢＯＲＤＥＲで、表のまわりの立体的に見える「外枠の太さ」を指定します。
  2. ＣＥＬＬＳＰＡＣＩＮＧで「枠線の太さ」を指定します。
  3. ＣＥＬＬＰＡＤＤＩＮＧで「枠線と中のテキストとの間隔」を指定できます。
１−１１−２
２−１２−２
これを指定すると、このようになります。左の図は
の設定です。

お次は、テーブルの枠の中に色を付けてみましょう。

こんなふうに、ＴＤの中に 色を付けることが出来ます

これは、列である＜ＴＤ＞にバックグラウンドカラーのオプションを指定することに よって、実現できます。

では、続いておもしろい使い方を・・。
実は、この「テーブル」と言うのは、「枠線」を消すことが出来るのです。

＜ＴＡＢＬＥ＞タグの「ＢＯＲＤＥＲ」オプションで　”０”　を設定することによって
枠線を消すことが出来るのです。

さて、ここまで出来たら、今度は実際に自分でいじくってみましょう。

まず、メモ帳で開いたこの文章を自分のパソコンの適当なフォルダに保存します。
方法は次のように・・・

  1. メニューバーの「ファイル」→「名前を付けて保存」を選択
  2. 保存したいフォルダを開いて
  3. 「名前」の部分に「○○○．ｈｔｍｌ」（例：ｓａｍｐｌｅ０１．ｈｔｍｌ）と付ける
    （ここでは必ず拡張子、ピリオドＨＴＭＬを付けてください）
  4. 「保存ボタン」を押して、ファイルを保存する
  5. 保存したファイルのあるフォルダに移動する
  6. 保存したファイルをダブルクリックする。ブラウザが起動し保存した このページが開く
  7. 最初と同様「表示」→「ソース」とたどって「メモ帳」でソースを開く
これで、このページの編集が可能となります。あとは、
この動作を繰り返して、色々やってみてください。
例えば、最初のこのページのバックグラウンドカラーの指定「ＢＧＣＯＬＯＲ＝”ＦＦＦＦＦＦ”」を 適当な数字に替えてみる、とか、文字色を替えてみたり、配置をいじってみたり・・。

全部削除して、自分のページを作ってみるのもおもしろいでしょう。

以上、これで皆さんも「ＨＴＭＬ」のことが、少しは解っていただけたでしょうか？
今回は、一番のベースとなる「テキスト」関連の事を書かせていただきました。
今後も暇さえあれば？「イメージ（絵）」や「リンク」 「フレーム」などについても、書きたいと思ってます。（いったいいつになることやら・・・？！）
それでは、その時まで！！　　(^.^)/~~~

MENUに戻る
HORIE's HOMEPAGE