モックン☆彡の部屋

テーブル タグは覚えてしまうと、文章や画像などを綺麗にそろえて表示できるので

是非マスターしましょう。

そもそも『 テーブル 』って？と思うかもしれないけど、文字のままです(笑)

イメージ的には、ホームページの上に机を並べて、その上に色々なものを配置するという事です。

無茶をすれば、机の上にさらに机を乗せることだってできます。

つまり、 テーブル タグの中に テーブル タグを配置する事ですね。

では実際にタグの書き方を説明します。


《例題１》

《例題１》 が

基本の形

になります。

これだけだと普通に『今日は良い天気だ。』と書くのと変わりませんが、

一番簡単な構成なので結果的にそうなってしまいます。では、使われているタグの説明をします。

< TABLE > タグはこれから テーブル を使うことを宣言し、

終わるときには必ず </ TABLE > を書きます。(省略すると以降の体裁が崩れる可能性があります)

< TR > タグは 列 を表し、 《例題１》 では １つ 使っているので、 １列 です。

< TD > タグは 行 を表し、 《例題１》 では １つ 使っているので、 １行 です。

よって 《例題１》 は

１列１行

となり、結果的に『今日は良い天気だ。』の

１文だけ表示されるのです。

タグを書く順番は < TABLE > → < TR > → < TD > となり、 列 の後に 行 を書きます。

《例題》 ではタグの始まりと終わりを見やすくする為に段を変え空白を入れて表示してますが、

< TABLE >< TR >< TD > 今日は良い天気だ。 </ TD > </ TR ></ TABLE >

と１行で書いても結果は同じです。

また、 < TABLE >< TR > < TD > 今日は良い天気だ。 </ TABLE > と省略して書くこともできます。

これはブラウザが < TR > や < TD > タグがどこで終わっているかを判断して表示するのですが、

バージョンの古いブラウザだと正しく表示されなかったり、後に自分で編集する場合に

タグがどこで始まって終わっているか分かりづらくなるのであまりオススメできません。

《例題１》 のように誰が見てもわかりやすいように書くのがベストですね。

まぁ、書き方に慣れれば、シンプルで見やすいとの話もあります (￣ー￣)ﾆﾔﾘ

---

次にはもっと 列 や 行 を増やし、 枠 もつけてみましょう。


《例題２》

今度は < TR > が３つ、 < TR > に対して < TH > と < TD > が 合わせて３つ あるので、


ここで初めて『 < TH ></ TH > 』と『 border="" 』が出てきました。

まず < TH > タグですが、これは表などを作るときの

題名

に該当します。

所属としては < TD > タグと

同じ部類

です。

ですから先程は < TR > に対して < TH > と < TD > が 合わせて３つ と数えたのです。

< TD > タグが少し進化したと思ってください。


《例題２》 の結果欄１行目にある『 ３列目 』という文字は

わざと文字数を減らして書いたのだけど、中央に寄ってるでしょ！！

---

次に 枠 をつけるには『 border="" 』を使います。 数値が大きい ほど 枠 は 太く なります。

試しに 《例題１》 で『 border="" 』の数値を変えると下のようになります。


《例題３》

さらに、この 枠 は色をつける事ができます。

色をつけるのにあたって、全体、左上（明）、右下（暗）の３つに分かれていて、

全体を変えるには『 bordercolor="" 』、左上を変えるには『 bordercolorlight="" 』、

右下を変えるには『 bordercolordark="" 』を使います。

『 "" 』の中には色が入るのですが、参考色は 基本的な色について 以下のページを、

記入方法は 文字に色をつける（低） と 文字に色をつける（高） を参考にしてください。

また、『 bordercolorlight="" 』および『 bordercolordark="" 』は

ブラウザによってサポートしてません。

Internet Explorer

では

サポート

してますが、

Netscape Navigator

では

正しく見れません

ので注意してください。

では、実際に 《例題３》 を変更してみましょう。

書き方は下のようになります。


《例題４》

もちろん、『 bordercolorlight="" 』と『 bordercolordark="" 』は別の色を指定でき、

同時に使うと 《例題４》 で囲っている テーブル みたいな事もできます。

また『 bordercolor="" 』、『 bordercolorlight="" 』、『 bordercolordark="" 』は

< TABLE > や < TR > 、 < TD > などにも使う事ができます。


《例題５》

《例題４》 と少しかぶる所があるけど、こんな感じになります。

< TR > 、 < TD > はそれぞれ１つ目しか色を変えてませんので、

指定してない物と比べると分かりやすいですね。


タグをコピーして使う場合は、全角のスペースは半角にするか、削除して下さい