colgroup および col について

HTMLの要素である、colgroupとcol。これは、table要素の中、captionより後、thread(これもあまり馴染みがないけど、行グループのこと)やtrより前に配置して、tableの縦の列をまとめる役割を果たす。colgroupは縦の列を意味的にグループ化する場合、colは縦の列に共通した属性を指定する場合に使う…という話だけど、その差が今ひとつピンとこないのは自分だけではあるまい。うーん…、colgroupはdivみたいなもの?機能的な差はcolgroupの場合、tableのrules属性で”groups”の対象になっている…ぐらいかな?

で、このcolgroup、実はこのサイトで使われているカレンダーで曜日ごとにの色分けをするために使っている。具体的には、文字の色と背景の色を日曜日に赤、土曜日に青にしている…つもりだった。よく考えると、これはただの色分けにしか使ってないので、この場合はcolを使う方が正しいと思う。後で直しておこう。
それはさておき、自分の予測するスタイルとなるのは、実際のところInternet Explorerしか無い。Mozilla 1.7、Opera 7.23は背景しか変わってない(サイトのスタイルあれこれ参照)。まぁそれだけならそれほど気にならなかったのだけど、くまりんさんに送ってもらった(どうもありがとうございました)スクリーンショットを見る限り、Safari 1.2に至ってはまったくスタイルが適用されてない。
これはどうしたことかと思って色々調べてみると、以下のページに行き当たった。

col/colgroup要素へのスタイル指定
テーブル – CSS2 リファレンス

これを見ると、colgroupおよびcolでセルに継承されるプロパティは、border, background, width, visibilityの4種類なのだそうだ。そんな馬鹿なと思ったけど、ブラウザのテーブル構造モデルを読むと、論理構造上、行グループと列グループはtableを親として互いに独立していて、セルは行グループの子孫になっているからなのだそうだ。。
つまりどういう事か掻い摘んで話すと、テーブルの中で文字などはセル、つまりth、tdに置かれる。ところがそのセルは行グループの子孫で、列グループから独立しているので、いくら列グループで文字やそれに関わるスタイルを指定しても、セルの中身には適用されないわけだ。
じゃあ上記の4種類のプロパティは何故適用されるのかというと、それらが列のブロック自体に適用されるスタイルだから。ちなみに、テーブルの表示は6層のレイヤから成っていて、テーブル(table)、列グループ(colgroup)、列(col)、行グループ(thead, tfoot, tbody)、行(tr)、セル(th, td)の順番になっている。例えば、もし全てのレイヤの背景(background)が透明なら背景が見える。列グループに背景が指定されているなら、その列グループの背景が見える。さらに行に背景が指定されていれば、その行の背景が見えるし、背景を指定した列グループと交わっている部分は、行の方が上位のレイヤなので行の背景が見える、という寸法なのだそうだ。

というわけで、最初に書いた動作としてはMozilla、Operaの動作が正しいのだそうで。こう見ると、colとcolgroupの扱いは結構難しい様子。Movabletypeのカレンダー生成方法では、縦の列の日付文字にまでスタイルを適用させるのは無理っぽいなぁ。まぁその辺はあきらめよう。
ん?Safariでスタイルが効かない問題?それは先程紹介したcol/colgroup要素へのスタイル指定を見ると、

Safari1.x, Konqueror3.1.3
  • caption要素がある表ではcol/colgroup要素に指定したスタイルがすべて無視される。

だ、そうで(笑)。これはまぁ、せめて曜日の部分だけでも何とかしよう。

追記

一応修正したけど、あんまり代わり映えしないなぁ。まぁいいか。


Posted by:

Posted At:

Modified At:

コメント

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください