Sorry, Only for JAP.
Making T a b l e s with fun.
明るく楽しい T A B L E タグ 講座
Only for IE3.0 or NN3.0

第2回 グラフだってできるはずなんだけどねぇ……(96/08/04)
 まずは「ROWSPAN」「COLSPAN」というパラメータをおぼえておきましょう。これを使わなくても、たいていのものは表現できるのですが、知っておくとかなり便利になります。ところがですねえ、このパラメータは、使用すると、まず必ず失敗する……いやほんと。表組みがぐちゃぐちゃになるときは、このパラメータの使用方法を確認してみましょう。というのも、このパラメータは、使用することで、テーブルのコラム数に変化が生じるのです。「他のコラムもぶんどっちゃうよお」というパラメータですから、当然ですね。
 試みに5×5のセル数を持つ簡単な「グラフもどき」を作ってみましょう(なぜ、筆者の文に「なんたらもどき」という表現が多いのかというと、幼いころに観た『マグマ大使』の「人間もどき」が異常に怖かった記憶がインプリンティングされているからです。ま、そんなこた、どーでもいいんですがね)
11111
2222
3
4444
5555
<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コラムしかない。とうぜんのことなのですが、これが「他のコラムもぶんどっちゃうよお」という意味です。
 これだとわかりにくいでしょうから、ちょっとだけ、見栄えを変えてみましょう。
11111
2222
3
4444
5555
<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グラフ」を考えてみましょう。
 最も利用可能性のあるグラフは、棒グラフで数値を視覚的に表現するものでしょう。
Browser Share
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グラフのとっかかりしか紹介できませんでしたが、グラフは、ちょっと試行錯誤して、リターンマッチをやるつもりです。
 ご質問、ご要望、ご指摘をよろしく。