【今日の練習帳】テーブル・その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」は無効になるんだろうか?
「《地図》」「北」「中心」「南」の間隔をもっと拡げるには、どうしたらいいんだろう?

あと、「西」「中心」「東」が頭ゾロエ状態になっているのも少し不満です。
テーブルって、幾何学的な頭脳が必要とされているようで、僕は熱が出てしまいそうです。(^^ゞ
チャンスがあったら、もう少し頭を整理してから再挑戦してみます♪


Top11回/9回・10回/第8回/第7回/覚え書き/アヤシイ知識/タグ単/プロフ