tableでつまづいたので、ちょっとメモ。
こういう初歩の初歩が分かってないっていう現実に時々ぶち当たります。
さて、Webデザインではcssで要素の縦横のサイズをどう指定するかが肝になってきますが。
その中でもかなりサイズ指定が曖昧な存在、それが<table>です。
●table、th,tdのサイズ指定
そもそもtableやタグには属性としてwidth,heightがありますので、コレを指定するわけですが。
セルの中の文字列によってはこのサイズが反映されないことも多々あります。
そんな経験から、table,th,tdの各タグのサイズ指定は「合ってくれたらいいな」ぐらいにしか考えてませんでした。
●spacer.gifで指定
そんなファジーなtableでしたが、このtableをレイアウトに使う手法がありまして
一昔前までは、ほとんどのWebデザインにこの手法が使われていました。
レイアウトに使用するにはセルのサイズを厳密に固定する必要がありました。
そこで登場したのが「spacer.gif」です。
spacer.gifという透明で縦横1pxの画像を用意し、サイズ指定したいセルに挿入
gifのサイズをHTML側で変更し、強制的にセルのサイズを固定します。
・・・これでほとんどの場合解決できます。
が、今回はspacerでもうまくいきませんでした。
英語、記号、日本語が混在する文字列が入ると、どうもセル幅を動かせなくなってしまいます。（大きめの幅になってしまう）
●table-layout:fixedで指定
やはりcssでしょ！ということでtableのスタイルtable-layout:fixedで指定。
さらにtd,thの属性でwidth,heightを指定するとしっかりとサイズを固定できます。
ただし、これが効果的なのはieだけです。
他のモダンブラウザでは全く効きません
●colgroup,colで成。cssを指定
chrome,ffなどのモダンブラウザに対応させるためには
colgroupで全てのセルにまとめてcss指定します。
これで晴れてかっちりtableのサイズが固定されました。
今までこの辺の知意がファジーだったからなぁ。いい機会になりました。