表組みのための CSS サンプル
今日は表組み CSS について、備忘録かねがね情報共有用です。まじめに書くと長くなるので、一般的な説明はかなり省いてます。もしここで紹介している事柄に興味が湧いたけど、細かいところがよく分からないという方がいらっしゃいましたら、どうぞ遠慮なく聞いてください。逆にもっと良い方法をご存知の方がいらっしゃったら、是非ご教示くださいませ。
CSS TABLE GALLERY
http://icant.co.uk/csstablegallery/最近見つけたページで、色んな人が作成した表組み（テーブル）デザインのサンプル CSS（スタイルシート）を集めたサイトです。ただし、スタイル名をクリックすると即座にそのスタイル（というか CSSファイル）が適用されて外観が変わります（表組みの HTML 自体は固定で、本当に CSS が切り替わってるだけです）。気に入ったスタイルがあれば、Download をクリックすると CSS のソースが表示（もしくはダウンロード）されます。
ダウンロードした CSS ファイルは、そのまま datatable.css などとして普段メインで利用している CSS ファイルと同じディレクトリに保存して、メインの CSS ファイルの中に、
@import url("datatable.css");
という行を追加するだけで簡単にお目当てのテーブルのスタイルを適用できるので、関心のある方は、是非 お試しください。もちろん、直接メインの CSS ソースの中にコピペしても構いません。うーん、実に簡単だ。(^-^)v
Alter Table Row Background Colors Using JavaScript
http://www.sitepoint.com/article/background-colors-javascriptさて上のサイトでサンプルを実際に自前の (X)HTML ページに対して適用された方は、テーブル内の背景色を１行ごとに交互に変えて表組みを見やすくしたくても、それが反映されないことにお気づきになるのではないでしょうか。
そう、上のサイトではテーブルの奇数行に対して "odd" という class を設けています。これが自前の (X)HTML ソースの中に入ってなければ効きません。
<tr class="odd">〜</tr>
<tr>〜</tr>
<tr class="odd">〜</tr>
<tr>〜</tr>
でも、このようにいちいち一行ごとに class を挿入していたんじゃ、テーブルにデータを一行追加しようとしただけで、以下の行すべてに対して class を追加 | 削除しなくちゃならなくなって面倒ですよね。
class を指定せず、CSS セレクタだけで実現する方法
実はこんな余計な class を入れなくても
:nth-child(2n+1) /*奇数番目の子供要素という意味。*/
という CSS 3 のセレクタを使えば、
<table>
<thead>
<tr>
<th>見出し１</th>
<th>見出し２</th>
</tr>
</thead>
<tbody>
<tr>
<td>行１列１</td>
<td>行１列２</td>
</tr>
<tr>
<td>行２列１</td>
<td>行２列２</td>
</tr>
</tbody>
</table>
なんて単純で簡素なソースに対しても、簡単に一行ごとにテーブル行の背景色を変えることができます。（ class や id といった余計な属性が一切入らない点がスマートですよね。）
CSS セレクタの致命的弱点
しかし、もちろんそう簡単には問屋が卸しちゃくれません。というのも、ご承知の方もおられるかもしれませんけど、この Level 3 の CSS セレクタに対応しているブラウザなんてまだまだ少ないんですよね。（比較的 Level 3 のセレクタに対応している Firefox ですら、この nth-child セレクタにはまだ対応してません。）特にシェアのいちばんデカい Internet Explorer が Level 2 ですら満足に対応してない状況ではなかなか (X)HTML ソースも簡素になりようがないというものです。
JavaScript で一行ごとに class を自動生成
前置きが随分と長くなってしまいましたけど、ここで活躍するのがこの項目の見出しのページで紹介されている一行ごとに背景色を変えてくれる JavaScript です。簡単なソースなんですけど、要は何をしているのかって、テーブルの奇数行の tr に odd、偶数行の tr に even という class をページの読込みと同時に挿入しています。あとは CSS に .odd と .even それぞれの class のスタイルを設定するだけです。// インデントには全角スペースを使ってます。ソースをコピペする際にはご注意ください。
function alternate(id){
if(document.getElementsByTagName){
var table = document.getElementById(id);
var rows = table.getElementsByTagName("tr");
for(i = 0; i < rows.length; i++){
if(i % 2 == 0){
rows[i].className = "even";
}else{
rows[i].className = "odd";
}
}
}
}
これも (X)HTML のソースに自分でいちいち class="odd" などと打ち込まなくて良いという点ではラクなんですが、table に id をつけることと、body 要素にも onload した時にテーブルスタイルの JavaScript 関数を呼び出させる必要があるので、そこを書き換える必要があるのが若干面倒といえば面倒です（一括置換で済むので大した手間じゃないかもしれないけど）。それに JavaScript を有効にしている環境でしか効かないのも難点ですね。ただ現状の主要 Web ブラウザでもクロスブラウザで動く点は CSS 3 に対する大きな利点です。
<body onload="alternate('resultTable')">
：
<table id="resultTable">
<tr>
<td>…</td>
</tr>
</table>
：
</body>
| 固定リンク
「［Web］XHTML」カテゴリの記事
- HTML の見出しをめぐる議論(2007.07.11)
- Re: XHTML+CSS (r)evolution, 3rdの内容は信ずるに値するか?(2007.06.03)
- 論理構造を文脈に読み換えながら class 名を考える(2007.05.30)
- 定義リストの違和感（続）(2007.05.28)
- 定義リストの違和感(2007.05.26)
この記事へのコメントは終了しました。
コメント