モックン☆彡の部屋

モックン☆彡の部屋

テーブルで整頓1(高)

テーブルで整頓1(高)


今回使う タグ
< TABLE ></ TABLE > < TR ></ TR > < TH ></ TH > < TD ></ TD >


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

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

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

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

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

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

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


《例題1》
実際に書くもの
結果

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

《例題1》
基本の形
になります。

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

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

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

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

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

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

よって 《例題1》
1列1行
となり、結果的に『今日は良い天気だ。』の

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

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

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

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

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

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

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

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

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

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

まぁ、書き方に慣れれば、シンプルで見やすいとの話もあります ( ̄ー ̄)ニヤリ



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


《例題2》
実際に書くもの
結果

< TABLE border="1" >
< TR >
< TH > 1行1列目 </ TH >
< TH > 1行2列目 </ TH >
< TH > 3列目 </ TH >
</ TR >
< TR >
< TD > 2行1列目 </ TD >
< TD > 2行2列目 </ TD >
< TD > 2行3列目 </ TD >
</ TR > < TR >
< TD > 3行1列目 </ TD >
< TD > 3行2列目 </ TD >
< TD > 3行3列目 </ TD >
</ TR >
</ TABLE >
1行1列目 1行2列目 3列目
2行1列目
2行2列目 2行3列目
3行1列目
3行2列目 3行3列目

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

3行3列
テーブル ができるのがわかるかな!?

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

まず < TH > タグですが、これは表などを作るときの
題名
に該当します。

所属としては < TD > タグと
同じ部類
です。

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

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

このタグを使うと
文字が太くなり中央に寄ります。

《例題2》 の結果欄1行目にある『 3列目 』という文字は

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



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

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


《例題3》
今日は良い天気だ。
border="1"
今日は良い天気だ。
border="5"
今日は良い天気だ。
border="10"

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

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

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

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

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

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

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

ブラウザによってサポートしてません。
Internet Explorer
では
サポート
してますが、

Netscape Navigator
では
正しく見れません
ので注意してください。

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

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


《例題4》
今日は良い天気だ。
< TABLE border="1" bordercolor="#0000FF" >
今日は良い天気だ。
< TABLE border="5" bordercolorlight="#0000FF" >
今日は良い天気だ。
< TABLE border="10" bordercolordark="#0000FF" >

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

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

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

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


《例題5》
HTML 講座
TABLE
bordercolor="#FFFF00"
テーブル 整頓
HTML 講座
TABLE
bordercolorlight="#FFFF00"
テーブル 整頓
HTML 講座
TABLE
bordercolordark="#FFFF00"
テーブル 整頓
HTML 講座
TR
bordercolor="#FFFF00"
テーブル 整頓
HTML 講座
TR
bordercolorlight="#FFFF00"
テーブル 整頓
HTML 講座
TR
bordercolordark="#FFFF00"
テーブル 整頓
HTML 講座
TD
bordercolor="#FFFF00"
テーブル 整頓
HTML 講座
TD
bordercolorlight="#FFFF00"
テーブル 整頓
HTML 講座
TD
bordercolordark="#FFFF00"
テーブル 整頓

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

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

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


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









ご意見・ご感想・ 告白 メールお待ちしております ヾ(☆▽☆)/ moonlightshine@mail.goo.ne.jp




© Rakuten Group, Inc.
X
Design a Mobile Site
スマートフォン版を閲覧 | PC版を閲覧
Share by: