【今日の練習帳】テーブル・その2
今日は「テーブルの活用法」を習いました。
その1つとして、
(1)テーブルの枠線をわざと隠してしまう。
(2)テーブルの枠線をわざと強調してカラフルに演出する。
という方法があるとのことです。
では早速、実験してみます。あたまが混乱しないよう(苦笑)、最初はテーブルに付属可能なタグは書き込まずにやってみます。
五十音図(枠線なし↓)
\
あ段
い段
う段
え段
お段
あ行
あ
い
う
え
お
か行
か
き
く
け
こ
……
……
……
……
……
……
五十音図(枠線あり↓)
\
あ段
い段
う段
え段
お段
あ行
あ
い
う
え
お
か行
か
き
く
け
こ
……
……
……
……
……
……
では、右のテーブルの枠線を太くしてカラー化してみます。
枠線の色は、bordercolor="#??????"で指定すれば0Kとのことです。
じゃ、薄緑の"
#339966
"でやってみます。
五十音図(枠線なし↓)
\
あ段
い段
う段
え段
お段
あ行
あ
い
う
え
お
か行
か
き
く
け
こ
……
……
……
……
……
……
五十音図(枠線あり↓)
\
あ段
い段
う段
え段
お段
あ行
あ
い
う
え
お
か行
か
き
く
け
こ
……
……
……
……
……
……
では一番大きなテーブルの枠線を消した上で、「枠線あり」のほうを色付けして遊んでみます♪
五十音図(枠線なし↓)
\
あ段
い段
う段
え段
お段
あ行
あ
い
う
え
お
か行
か
き
く
け
こ
……
……
……
……
……
……
五十音図(枠線あり↓)
\
あ段
い段
う段
え段
お段
あ行
あ
い
う
え
お
か行
か
き
く
け
こ
……
……
……
……
……
……
うああ、あんまり色彩センスのないところがバレバレですね。(^^ゞ
テーブルタグには、ほかにもいろいろな属性を付け加えられるようです。
【1】align属性:"left"/"center"/"right"
これは<table align="*****">として指定することもできるし、<td align="*****">のほうにも指定することができる、とのことです。
【2】余白:vspase/hspace
table align="right"(left)の場合、
vspase="***"でテーブルの周囲の左右に余白
hspace="***"でテーブルの周囲の上下に余白
で、余白を指定できる(単位はピクセル)。
【3】サイズ:width/height
テーブルの見え方のサイズ。単位はピクセルの指定と%の指定がある。
どちらの指定のしかたも一長一短がある感じです。
セルのサイズも同様にwidth/heightで指定できるようです。
では、以上習ったことを実験してみます。
《地図》
北
冬の方角は北で色は黒。
西
秋の方角は北で色は白。
東
春の方角は東で色は青。
中心
南
夏の方角は南で色は赤。
うーん、ビミョーにうまく位置を指定できません。(^^ゞ
どうして《地図》がこんな中途半端な高さに現れてしまうんだろう?
きっと上にピタッとくっつく感じだと思ったので、一番外のテーブルのcellspacingを"10"に指定したのに。(・_・;)?
《地図》のあとに<br>を何個か入れるたびに、どんどん《地図》の文字は上がっていくみたいだけど、
「hspace」の指定だと、ウンともスンとも変化しません。
<center>の指定をしてるから、「hspace」は無効になるんだろうか?
「《地図》」「北」「中心」「南」の間隔をもっと拡げるには、どうしたらいいんだろう?
あと、「西」「中心」「東」が頭ゾロエ状態になっているのも少し不満です。
テーブルって、幾何学的な頭脳が必要とされているようで、僕は熱が出てしまいそうです。(^^ゞ
チャンスがあったら、もう少し頭を整理してから再挑戦してみます♪
[
Top
←
→
11回
/
9回・10回
/
第8回
/
第7回
/
覚え書き
/
アヤシイ知識
/
タグ単
/
プロフ
]