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

上付き(下付き)の設定は(X)HTMLタグかCSSか。

「m3」や「CO2」など、上付き・下付き文字を設定する場合にいつも悩みます。 上付き(下付き)にすることに意味があるような気がするので、(X)HTMLで問題ないとは思いつつ。 でもやっぱり見た目をコン …

no image

yuga.js で自ページへのリンクを設定している画像がロールオーバーしてくれない。

yuga.js という非常に便利な JavaScript があります。 多くの機能が一つにまとまっていて、使い方も簡単で重宝させていただいているのですが、今回はその多機能が故にハマってしまったという例 …

no image

今日は裸の日 – CSS Naked Day。

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

no image

新しく追加した Google カスタム検索エンジンの HTML をカスタマイズする方法。

最近、Google カスタム検索エンジンのコードが変更されたみたいです。それも大幅に。 以前までは HTML ソースを直接貼り付ける方法だったんですが、新しいコードは JavaScript を使って …

no image

各種ブラウザの印刷のバグが治る(かも知れない)CSS の設定。

float を使って段組みのレイアウトにしているとき、印刷がおかしくなることが多々あります。 というか、おかしくならないことの方が多い。 というか、float を使ってなくてもおかしくなることの方が多 …