| Making | T | a | b | l | e | s | with fun. |
| 明るく楽しい | T | A | B | L | E | タグ | 講座 |
| Only for IE3.0 or NN3.0 | |||||||
まずは「ROWSPAN」「COLSPAN」というパラメータをおぼえておきましょう。これを使わなくても、たいていのものは表現できるのですが、知っておくとかなり便利になります。ところがですねえ、このパラメータは、使用すると、まず必ず失敗する……いやほんと。表組みがぐちゃぐちゃになるときは、このパラメータの使用方法を確認してみましょう。というのも、このパラメータは、使用することで、テーブルのコラム数に変化が生じるのです。「他のコラムもぶんどっちゃうよお」というパラメータですから、当然ですね。
試みに5×5のセル数を持つ簡単な「グラフもどき」を作ってみましょう(なぜ、筆者の文に「なんたらもどき」という表現が多いのかというと、幼いころに観た『マグマ大使』の「人間もどき」が異常に怖かった記憶がインプリンティングされているからです。ま、そんなこた、どーでもいいんですがね)。
|
<TABLE BORDER="5" CELLSPACING="5" CELLPADDING="5"> <TR> <TD>1</TD><TD>1</TD><TD ROWSPAN="5" BGCOLOR="#E0D8C8" VALIGN="top">1</TD><TD>1</TD><TD>1</TD></TR> <TR> <TD>2</TD><TD>2</TD><TD>2</TD><TD>2</TD></TR> <TR> <TD COLSPAN="5" BGCOLOR="#D8E0C8">3</TD></TR> <TR> <TD>4</TD><TD>4</TD><TD>4</TD><TD>4</TD></TR> <TR> <TD>5</TD><TD>5</TD><TD>5</TD><TD>5</TD></TR> </TABLE> |
||||||||||||||||||||||
ま、見ての通り、セルのバックグラウンド・カラーは、その指定が後からされた方が上書きになります。これはあたりまえ。
注意してほしいのは、2、4、5行目がタグリストを見ると、4コラム分しかないということです。3行目にいたっては、1コラムしかない。とうぜんのことなのですが、これが「他のコラムもぶんどっちゃうよお」という意味です。
これだとわかりにくいでしょうから、ちょっとだけ、見栄えを変えてみましょう。
|
<TABLE BORDER="0" CELLSPACING="0" CELLPADDING="10"> <TR> <TD>1</TD><TD>1</TD><TD ROWSPAN="5" BGCOLOR="#A0A0A0" VALIGN="top">1</TD><TD>1</TD><TD>1</TD></TR> <TR> <TD>2</TD><TD>2</TD><TD>2</TD><TD>2</TD></TR> <TR> <TD COLSPAN="5" BGCOLOR="#A0A0A0">3</TD></TR> <TR> <TD>4</TD><TD>4</TD><TD>4</TD><TD>4</TD></TR> <TR> <TD>5</TD><TD>5</TD><TD>5</TD><TD>5</TD></TR> </TABLE> |
||||||||||||||||||||||
この段階で、告白しておきますが、NN3.0b5で見ると、「十字」に見えるこのテーブル、実は、IE3.0Jb2だと「トの字」で表示されます。このあたりが、仕様の異なる部分です。もしかしたら、統一されるようになるでしょうが、なんとも発言することはできませんねえ。
さらに、もっと決定的なことを申し上げれば、ここは5×5のセルだからまだいいのですが、20も30も、という縦横になってくると、IE3.0Jb2だとかまわないのですが、NN3.0b5の場合、「ウゲー」というくらい、とんでもないほどリソースを消費します。
要するに、「TABLEタグでグラフなんて作るな」ということなのでしょうか?
TABLEタグ使って、グラフを作ること自体が、GIFのグラフ作るよりもカロリーの高いものかもしれないのです。メリットがあるとすれば、テキストデータの変更だけで、グラフの内容を変えられるということぐらい……か。だったら、JavaScriptで、やりゃいいんだもんなあ……。うーーーーん。
しかし、ワタシは怯まない。HTMLなんぞに、まけてたまるか。なんとかして、実用性のある「TABLEグラフ」を考えてみましょう。
最も利用可能性のあるグラフは、棒グラフで数値を視覚的に表現するものでしょう。
| NN / 70% | IE / 30% |
<TABLE BORDER="0" CELLSPACING="0" CELLPADDING="5" WIDTH="60%"> <CAPTION ALIGN="top" BGCOLOR="#F0F0F0"> <FONT SIZE="+1" COLOR="#000000">Browser Share</FONT> </CAPTION> <TR> <TD BGCOLOR="AA0000" WIDTH="70%" HEIGHT="50" ALIGN="center"> <FONT SIZE="+1" COLOR="#FFFFFF">NN / 70%</FONT> </TD> <TD BGCOLOR="0000AA" WIDTH="30%" HEIGHT="50" ALIGN="center"> <FONT SIZE="+1" COLOR="#FFFFFF">IE / 30%</FONT> </TD> </TR> </TABLE>
どーだ、これは、実用性があるぞお。WIDTHパラメータの%指定で、実際のパーセンテージを入力すれば、それでグラフのできあがり。
これさえできれば、あとは応用で、好き勝手なグラフだってできるはず。いくつか、並べればいいんだから、カンタンなもんである。
ちょっとした問題もあって、CAPTIONとして、BGCOLOR="#F0F0F0"を指定しているんだけども、NNもIEもしっかり無視してくれます。必要ならば、CAPTIONは使わずに、あたまにタイトル用のテーブル行を入れましょう。
TABLEグラフのとっかかりしか紹介できませんでしたが、グラフは、ちょっと試行錯誤して、リターンマッチをやるつもりです。
ご質問、ご要望、ご指摘をよろしく。