btmup Blog

Web 制作のことを中心に、ちょっとした Tips などを掲載しています。「自分用メモ」が基本スタンス。

(X)HTML CSS

col/colgroup 要素で有効なスタイルと無効なスタイル。

投稿日:

「ある列だけを改行なしにしたい」というときが結構あります。
確実なのは「その列のすべての td タグに class を付けていく」という方法ですが、あまりスマートとは言えません。
ソースの見栄え的にもいただけない感じ。

そこで、col や colgroup が使えるんじゃないかと思い、事あるごとに試していました。
が、どうしてもうまくいきません。
col と colgroup の組み合わせ方を変えてみたり、CSS の設定を工夫してみたり、いろいろ試しましたが結果は同じ。
ただ、設定したスタイルの中でも適用されるものと適用されないものがあり、その違いがよく分からないままだったので、どうもしっくりこない状態なのでした。

んで今回も似たような場面に遭遇したので改めて調べ直してみたら、分かりやすい解説が載っている記事を見つけましたのでご紹介します。
»第25回 tableをもっと見やすくデザインする:ITpro(リンク先は2ページ目)

この記事から抜粋すると、

colと後述するcolgroupはフォント系の装飾を受け付けません。

col/colgroupは表(table)に対して作用するタグですが,表に含まれるデータも含めて縦列という概念ではなく,データが入っていない表そのものに対して,部分的に縦列を定義するタグです。空っぽの表がベースというわけです。tdやthの中に入っているデータやテキストはcolの支配下にはないわけです。

要は、テーブルの構造には適用されるけど、中身については適用されない、ということのようです。
あぁなるほど。何て分かりやすい……。

ちなみに、ブラウザごとに挙動が違う件については、

左右寄せやpadding,font-weightなどフォント系についてはIEでは有効になっていますが,CSSないしXHTMLのリファレンスを見ると,本来は無効になっていなくてはならないようです。したがって,指定が有効になってしまうIEに問題があると言えるかもしれません。

とのこと。

じゃあセルの中身のスタイルはどうすれば良いかといえば、

それは,手間はかかりますが,tdとthに対してひとつずつCSS指定することで解決できます。

だそうです。
やっぱり一つ一つ地道に class を付けていくしかないみたいですね。

うーん……。
やっぱりしっくりこないなぁ。

雑感

HTML 5 とか CSS 3 ってこのあたりはクリアしてるんでしょうか。
列をグループ化できる方法が何かしら採用されているのなら、それだけでも普及を後押しする要因になりそうな気がします。







-(X)HTML, CSS
-, , , ,

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

no image

HTML 文字参照を探すのに Wikipedia はやっぱり便利だった。

Wikipedia には度々お世話になってます。 信頼性とかが問題になることもありますが、大体は大丈夫ですし、やはりあの圧倒的な情報量は魅力ですね。 で、(やっぱり)こんなものまであったのか! という …

no image

今日は裸の日 – CSS Naked Day。

4 月 9 日は「CSS Naked Day」ということなので、便乗してみます。 »CSS Naked Day…公式(?)サイト »そういえば裸の日でした|CSS HappyL …

no image

IE6 で文章の最後の2文字(くらい)が変なところに表示されてしまう問題の原因と解決法。

ひょっとしたら定番ネタかも知れないのですが、ググってみても情報が見当たらなかったのでとりあえずメモ。 IE6 で float を使ったレイアウトをしているとき、文章の末尾(最後の2文字くらい)が変なと …

no image

floatとline-heightを一緒に指定すると、文字が欠ける。

ときどきWindowsのIEで、文字が数ピクセル欠けて表示されることがあります。 その原因の一つが、floatとline-heightを一緒に指定していること。 とりあえず同じ要素に指定しなければ発生 …

no image

CSS Nite in OSAKA, Vol.17 に参加してきました。

7/18(土)に開催された「CSS Nite in OSAKA, Vol.17 powered by KAGOYA Internet Routing」に参加してきました。 参加というか、まぁ勉強ですね …