【第11回の練習帳】テーブル

今日は「テーブル(表組)」を習いました。
元々は単純に、文字どおりの表組のためのタグだったんだそうですが、
実際のＨＰ作りでは、このテーブル・タグが複雑に組み合わされていることが多い、らしいです。

テーブル・タグは、<table></table>で指定する――というのはわかります。
でも、表組であるからには、縦に何行入って、横に何列入るのかを指定しなければなりません。
そして、表組のサイズも必要です。
なので、実際のテーブル・タグでは<table width="数字" border="数字" cellspacing="数字" cellpadding="数字">
のようなタグで指定するもののようです。

「width="数字"」――は、横幅の指定です。単位は“ピクセル”ってことらしいです。
画像をイジっていると“ピクセル”って言葉はよく聞きますが、実際のイメージとしてはピンと来ません。(^^ゞ

「border="数字"」――は、テーブルの「枠線の有無」の指定のようです。"0"は「ナシ」ってことらしいです。

「cellspacing="数字"」――は、「セルとセルの間の隙間」の指定とのこと。"0"はやはり「ナシ」です。

「cellpadding="数字"」――は、「セルの中に入っているもの(文字・画像)とセルの端までの間隙」の指定、らしいです。これも、"0"はやはり「ナシ」の意味です。
う〜ん、(ーー；　この「cellpadding="数字"」の意味が、イマイチわかんないです。「端」ってどこ？
あと、"0"は「ナシ」はわかるにしても。この数字は何種類あるんだろう？
では、とりあえず、先生から習ったタグの丸写しをしてみますね。。。うりゃ♪

1 6
2 7
3 8
4 9
5 10

おおっ！　よく分からないけど、勝手に表ができちゃってます♪＼(◎o◎)／！
でも、丸写ししてて、まだ習っていないタグがひそんでいるのを発見しました。
<tr>……</tr>ってヤツと、<td>……</td>です。

<tr>は、「横」すなわち「行」。
<td>は、「縦」すなわち「列」。

――ってことらしいです。
つまり、上の表だと、

<tr>
　　<td>……</td>
　　<td>……</td>
</tr>

で、一番上の行(「１」と「６」の入っている行)が構成されているわけですね。なぁ〜るほど。
左のセルが上のほうの<td>……</td>で指定され、右のセルがその下の<td>……</td>で指定ってことです。

で、実際のタグでは

<tr>
　　<td width="50%" bgcolor="#00CCFF">1</td>
　　<td bgcolor="#FF0000">6</td>
</tr>

と、「td width="50%"」となっているけど、これはもちろん“ピクセル”で指定してもいいわけですね。


では、ちょっと数字をいじくって、実験してみます。
まず、「border="数字"」を「１」にしてみます。

1 6
2 7
3 8
4 9
5 10

おお、罫線の囲みですね。
では、「border="数字"」を「２」にしてみます。

1 6
2 7
3 8
4 9
5 10

んん？　なんも変わってないような……(・＿・;)？
では、「border="数字"」をイッキに「５」にしてみます。

1 6
2 7
3 8
4 9
5 10

おおっ！！！　なるほど、ガッテンです♪　罫線の外枠の幅が数字が大きくなるほど、幅の広い太罫になるってことですね。
前のフォントサイズみたいに、これもやっぱり７が最高なのかな？　もっとあるのかな？

1 6
2 7
3 8
4 9
5 10

ヾ(＠⌒∇⌒＠)ノわはは♪　スゴイスゴイ！　数字を「100」にしたら、こんなことになっちゃいました。
つまりこの数字は、外枠のピクセル数ってことなんですね♪
う〜ん、これって、色は変えられないんですかね？
……あ！　先生の見本の２番目のテーブル・タグにありました！
どうやら、「bordercolor="#カラーコード"」を最後に付ければいいみたいです。
じゃあ、<table width="450" border="20" cellspacing="0" cellpadding="0" bordercolor="#ffcccc"> ってことで、やってみます。
1 6
2 7
3 8
4 9
5 10

ふーん、どうもあんまり淡い色だから、左上と右下の色の変化が出ないみたいですね。
もっと濃いめの色のほうが効果があるってことでしょうか？
<table width="450" border="50" cellspacing="0" cellpadding="0" bordercolor="#ff0cc">で、再トライしてみます。

1 6
2 7
3 8
4 9
5 10

あれれ？　予想は外れて、立体感が出ないですね。これは黒色系のみの効果なのかな？
じゃ、もう１回、別のグレーの指定でやってみます。
<table width="450" border="100" cellspacing="0" cellpadding="0" bordercolor="#666666">で、再トライしてみます。

1 6
2 7
3 8
4 9
5 10

あれ〜？？？　全然ダメだ！
「左上=淡」-「右下=濃」の囲み罫の効果が出るのは、「bordercolor」を入れない時ってこと？
つまり、ベースフォント・カラーの場合のみってことなのかな？

あと、「cellspacing="数字"」 と「cellpadding="数字"」の数字の実験については、また明日にでもチャレンジしてみます。

では今度は、「cellspacing="数字"」の数字をイジってみたいと思います。

1 6
2 7
3 8
4 9
5 10

ほほぅ、なるほどね。これは分かりやすいです。上のタグは、
<table width="450" border="30" cellspacing="10" cellpadding="0">
なんですけど、文字どおりセル間のスペースってっことですね。これも“ピクセル”単位の模様です。

では、ちょっと意味が把握できなかった「cellpadding="数字"」のほうを操作してみます。

1 6
2 7
3 8
4 9
5 10

それぞれのセルの上下の幅が広くなっているようですね。
上の表組は「cellpadding="数字"」の数字が「５」でしたが、もっと大きくしてみます。

1 6
2 7
3 8
4 9
5 10

ふーむ。たぶん、「上・下・左」の３方向からのピクセル数みたいですね。
ちなみに上の表組の「cellpadding="数字"」の数字は「40」です。

おーし、これでなんとか「テーブル」タグの仕組みが、なんとなく分かったような気分です。(^^ゞ


一息つきながらぼんやりと考えていたら、ちょっと疑問に思うことが発生しました。
「セルの中の文字なり画像が指定サイズより大きくなった場合、どうなるんだろう？」ってことです。
なので、それをここで実験してみます。
じゃ、ちょっとシンプルなテーブルで試してみます。

１２３４５６７８９1011121314151617181920
１２３４５６７８９10 １２３４５６７８９10

う゛っ、僕のイメージしてた表組と全然違います。<(＠Д＠;)>!!
上のセルは１つで、そこに数字が20並び、その横幅のまま、
下にセルが２つできて(上のセル幅の半分が２つ)、
そこに数字が各10ずつ並んでほしかったんですが……。
どうもタグの書き方がマズいようですね。
ていうか、そもそもテーブルのサイズ(横幅)が機能していないような……(・＿・;)？

そう言えば、先生の「ＨＰのテーブルは入れ子構造で複雑になっている」という言葉が気になります。

１２３４５６７８９1011121314151617181920
１２３４５６７８９10 １２３４５６７８９10

おおっ！　僕なりの想像でテーブルの「入れ子」ごときものをイメージしたら、なんかそれらしいのができました。＼(^o^)／
上段と下段の合わさっている部分をほかの隙間のようにスッキリさせたいところですが、
とりあえず、いまはそれより、文字がこのスペースからあふれた時に、どうなるのかが知りたいので、その実験です。

１２３４５６７８９1011121314151617181920
１２３４５６７８９1011121314151617181920 １２３４５６７８９1011121314151617181920

(≧∇≦)ぶぁっはっはっ!!　みっともないぞ＞自分。これじゃ、てんで表組になってません。
どうやら、「table width="数字"」より、セル内の文字の全体幅のほうが優先されるようです。
しかし、これじゃ、実際の表組の場合、困ることがいろいろ出ないのかな？
文字数を計算してからテーブルのサイズを決めるのも大変だし、
第一、見るほうの人がブラウザの文字サイズを大きくしてたら、テーブルが崩れませんか？
もしかしたら、文字があふれた場合、自動的にセルの上下幅が広がるタグがあるのかもしれませんね。
ともあれ、今の段階ではここまでしか分からないので、これ以上は深入りしないことにします。


ちょっとネットを徘徊していたら、「セル結合タグ」というものが存在するようです。
僕のやらかした失敗(上にセル１つ・下にセル２つ)を回避するには<td colspan="数字">のタグで指定すれば０Ｋのようです。
数字は、下に並ぶセルの数を入れるもののようです。では「２」を入れてみます。

１２３４５６７８９1011121314151617181920
１２３４５６７８９10 １２３４５６７８９10

おお、成功成功♪
縦のセル結合のタグもあるみたいですが、またいずれ講座で出てくるのかもしれません。

※補足１：<td colspan="数字">のタグは、先生の講座のお手本の表組３に、最初から出ていました！(^^ゞ
ちゃんと講座を最後までよく読まないとダメですね。
※補足２：セルの上下幅が文字数によって自動的に伸びるタグは、やはりあるようです。
見本として、自分のプロフィールページで試してみました。
［Top/今日←→９回・10回/第８回/第７回/覚え書き/アヤシイ知識/タグ単/プロフ］