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

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

000000

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.

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

Last updated November 11, 2004 05:14:40 PM
コメント(6) | コメントを書く

[HP作成用語を英語で検証] カテゴリの最新記事

aｌign="横位置" November 9, 2004 コメント(2)
テーブルの枠線の形状を変える November 6, 2004 コメント(4)
bｇcolor="色名または#番号" November 5, 2004 コメント(8)

■コメント

Re:テーブルの使い方（例1）(11/11)

まーやんくんさん

なるほど、メモメモ。
この前主人に話をしたら、しっかり教わっておけといわれました。
時間ができたら、やってみると・・・。
楽しい広場を奪われたくないので、日記の閲覧は禁止したのです。
私の楽しみですもの。
ということなのですが、これからもよろしくお願いします。 (November 11, 2004 05:43:03 PM)

返事を書く

Re[1]:テーブルの使い方（例1）(11/11)

ポンチョ♪ さん

まーやんくんさん
＞なるほど、メモメモ。

＞楽しい広場を奪われたくないので、日記の閲覧は禁止したのです。

えー？閲覧禁止ですかあ・・・？
うちは，普通に全部見てるけど・・・(^_^;)
子どもたち（長女と次女）も気が向くと見てるし(^^ゞ

でも，読むだけじゃなく，実際にやってみる方が面白いですよ。試してみてね。 (November 11, 2004 07:37:36 PM)

返事を書く

ご無沙汰しております。

ミュウシャ1970 さん

タグの勉強にはとってもわかりやすいです。
というか初心者なのでわかりやすいのかどうかさえもわかってないんですが(;^_^Ａ
以前、お邪魔した時にリンクさせていただいたと思っていたらしていませんでした。
勉強させていただきますヽ(;~_~)ノ (November 11, 2004 08:29:04 PM)

返事を書く

Re:ご無沙汰しております。(11/11)

ポンチョ♪ さん

ミュウシャ1970さん
ぜひ，実際にタグを使って試してみて下さい。
メモ帳を使えば，自分だけで試せますから。
メモ帳の使い方は，こちらで説明しました。↓
http://plaza.rakuten.co.jp/fourleavedclover/diary/200410280000/

＞以前、お邪魔した時にリンクさせていただいたと思っていたらしていませんでした。
＞勉強させていただきますヽ(;~_~)ノ

そうだったんですか？あらためて，ありがとうございます。これからも，よろしくお願いします。
-----
(November 11, 2004 09:43:37 PM)

返事を書く

わかりました！ありがとう

マルゴー92 さん

私は外側の枠は

<table border="10" bordercolor="#006600"

で、指定していたのですが、TD内の指定ではborderが使用できず、どうしてもセル枠が見えてしまっていたんですが、ポンチョさんのを読んで、あっ、styleをしてすればいいんだと分かりました。

ありがとうございます。 ^^

今まではセル枠が見えるのがいやで、文字の背景を白にしていましたが、今日の日記は変えてみました。背景との境がちょっと、自然になったような気がします。

ポンチョさん、テーブルを入れ子にしていたんですね。
私は左の余白は空白のカラムを指定しています。

ご参考までに、私の今のテーブルのヘッダーです。

<center><table border="0" style="border-width : 10px;border-style : solid;border-color : #006600;" cellpadding="0" cellspacing="15" width=98% background=" http://plaza.rakuten.co.jp/img/ ・・・・/74.jpg"><TR><TD width=120 bordercolor="#FFFFFC"></TD><TD bordercolor="#FFFFFC" align="left"><p style="line-height: 150%"> (November 12, 2004 12:58:49 AM)

返事を書く

Re:わかりました！ありがとう(11/11)

ポンチョ♪ さん

マルゴー92さん

なるほど・・・これなら，余白の縦は自動で変わるわけですね。

それから，楽天の日記欄なら，一番外枠のwidthは指定しなくても，自動的にちょうど良い大きさになりますよ。
規定の幅より大きくしたいとか，小さくしたいと言う時だけ指定しています。 (November 12, 2004 06:02:28 AM)

返事を書く

【毎日開催】

15記事にいいね！で1ポイント

10秒滞在

いいね! -- / --

次の日記を探す

おめでとうございます！
ミッションを達成しました。

※「ポイントを獲得する」ボタンを押すと広告が表示されます。

Design a Mobile Site

スマートフォン版を閲覧 | PC版を閲覧