テーブルの使い方（例1） | 四つ葉のクローバー

100万ポイント山分け！1日5回検索で1ポイントもらえる

843318

HOME | DIARY | PROFILE

【フォローする】【ログイン】

はじめにお読み下さい

< 新しい記事

新着記事一覧(全2405件)

過去の記事 >

November 11, 2004

（すでにご紹介したものを使った例ですので，今回は英語の検証は無しです。）

今月から使っている「よもやま話」欄の「いちょうとどんぐりのテーブル」です。

＜TABLE border="0" style="border-width : 2px;border-style : dashed;border-color : #cc9900;" cellspacing="35" background="http://---背景用画像のＵＲＬ---.gif" cellpadding="20"＞

最初の， border="0" で，セルの枠線の太さを”0”にして，セルの枠線を表示させないようにしています。

style="border-width : 2px;border-style : dashed;border-color : #cc9900;"
この部分で，（外の）枠線の太さを2ｐｘ，形状を dashed，色を #cc9900に指定しています。
これが，外枠の，栗色の破線の部分です。

background="http://---背景用画像のＵＲＬ---.gif" で，テーブル内の背景画像を入れました。
イチョウとどんぐりの背景です。

cellpadding="20" で，テーブル内の文字の書き始めの位置（余白）を取りました。
枠線と文字が密着しないで，適度な余白があるほうが見やすいのです。

これで出来上がるテーブルが，下のようになります。

このまま書き込んでいくと，どうなるか・・・？

実はこんな風に，なります・・・・左端の背景の上に，文字が重なってしまうのです。

それはそれで，良い場合もあります。が，文字の色と背景の色との兼ね合いで，見づらくなることもあります。
今回は，こんな感じになります・・・いかがでしょうか？

もちろん， cellpadding="20" で余白を入れたので，枠のギリギリのところではなくなっています。
画像から離れるように更に余白を取ろうとして，この cellpadding="20" の数字を大きく取ってしまうと，左側だけでなく上下も右側も同じように余白が空いてしまいます。
それでは，左側の背景の上だけ避けて文字を入れるにはどうしたらよいでしょうか？

そんな時に，便利なのが，「見えないテーブルを余白として入れ込む」と言うことなんです。

またまたどういうこと・・・・？

テーブルの枠線を， border="0"
にして，見えない状態にして，余白の大きさに指定して，そのテーブルを（この場合は）左端に置くのです。

そこで登場するのが， align="left" です。

＜table border="0" width="130" height="200" align="left"＞＜tr＞＜td＞＜/td＞＜/tr＞＜/table＞
と言うテーブルを置いて，その後は普通に文字を入れます。

＜ｔable border="0" style="border-width : 2px;border-style : dashed;border-color : #cc9900;" cellspacing="35" background="http://---背景用画像のＵＲＬ---.gif" cellpadding="20"＞＜ｔｒ＞＜td＞＜table border="0" width="130" height="200" align="left"＞＜tr＞＜td＞＜/td＞＜/tr＞＜/table＞ここに文字を入れます。＜/td＞＜/tr＞＜/table＞

こういう風に＜ｔｄ＞＜/ｔｄ＞の間に，もう一つの（オレンジ部分の）テーブルを入れるのです。
すると・・・・
↓
↓
↓

こんな風に，見えないテーブルの右側に文字が行くので，
左側の背景を避けて，文字が入力できます。

cellpadding="20" では，上下左右ぐるっと一周同じ幅の余白になりますが，見えないテーブルを入れると，片側だけ（または左右違う幅の）余白を自由に入れられます。

（←こっち側に，見えないテーブルで余白ができています。）

（こっちは， cellpadding="20" で空いています→）

わかりやすいように，枠線を表示させてみました。
border="1" と指定すると，見えてきます。
グレーの枠線が，セルの枠線です。
余白が cellpadding="20" になっているのがわかりますね。
青い枠線が，見えないテーブルを align="left" で置いたものです。
一番外側の，破線のテーブルの中のセルがグレーの部分，その中にもう一つ左側に寄せたテーブル（青枠部分）が入っていると言うことです。

*今日の一言（ひとこと）日記 *

My youngest daughter finished her homework soon after she came home from school.

お気に入りの記事を「いいね！」で応援しよう