■ 棒グラフ付きの表の作成

ホームページでグラフ付きの表を作成する場合の方法を解説します。
グラフ付きの表を作る場合はそれ自体を画像として表示させる方法もありますが、この方法だとファイルサイズが大きくなり表示が遅くなります。
また、追加や変更が簡単にできなくなります。

表自体は単純なテーブルを使えば簡単に作成できます。
問題は棒グラフの部分です。

この場合、ひとつひとつの棒を個々に作っていたのでは手間も掛かりますし、画像をそのたび作成しなければならなくなります。
そこで、単純な四角形の画像をひとつ作り、後はその幅や高さを指定する方法を取るのです。

そうすれば画像はひとつで済みますし、後は幅や高さを調整するだけで自由な棒グラフを作ることができます。
また、どんなに行数が増えても小さな四角形の画像ひとつで作成してますので、全体を表示するスピードはほとんど変わりません。

このサンプルはスタイルシートの適用を行ったため、スタイル属性の記述で解説します。

※スタイルシートやスタイル属性の詳しい説明は、「HTMLの解説」−「15.スタイルシート」や「HTMLの解説」−「14.スタイル属性」を参照してください。

教科	点数	グラフ
国語	65
算数	95
理科	82
社会	76

---

【　解　　　　説　】

まず、単純な四角形の画像を画像ソフトなどで作って準備しておきます。
今回は次のような画像を用意しました。

次に普通に表を作成します。

教科	点数	グラフ
国語	65
算数	95
理科	82
社会	76

この時、棒グラフが入るセルは100ピクセル単位のわかりやすい幅にしておきます。
今回はセル幅を400ピクセルにしました。

次にこの中に先ほどの四角形の画像を埋め込みます。

教科	点数	グラフ
国語	65
算数	95
理科	82
社会	76

そして、それぞれの点数にあわせてグラフの幅を指定していきます。
グラフのセルが400ピクセルなので、画像の幅は点数を４倍した幅になります。
「国語、算数、理科、社会」の順番でそれぞれ「260、380、328、304」ピクセルになります。

すると次のような棒グラフが出来上がります。

教科	点数	グラフ
国語	65
算数	95
理科	82
社会	76

今回のサンプルは次のような記述で作成しています。
（このページの表はスタイルシートを使用して作成していますので下記の記述サンプルとは異なります。）

【記述サンプル】

<table style="border:solid 1px #999999;">
<tr>
<th nowrap style="background-color:#3366cc; color:white;">教科</th>
<th nowrap style="background-color:#3366cc; color:white;">点数</th>
<th nowrap style="background-color:#3366cc; color:white;text-align:center;" width="400">グラフ</th>
</tr>
<tr>
<td style="border:solid 1px #999999;" align="center">国語</td>
<td style="border:solid 1px #999999;" align="center">65</td>
<td style="border:solid 1px #999999;"><img src="../../images/icon/bar01.gif" width="260" height="16" alt="グラフ"></td>
</tr>
<tr>
<td style="border:solid 1px #999999;" align="center">算数</td>
<td style="border:solid 1px #999999;" align="center">95</td>
<td style="border:solid 1px #999999;"><img src="../../images/icon/bar01.gif" width="380" height="16" alt="グラフ"></td>
</tr>
<tr>
<td style="border:solid 1px #999999;" align="center">理科</td>
<td style="border:solid 1px #999999;" align="center">82</td>
<td style="border:solid 1px #999999;"><img src="../../images/icon/bar01.gif" width="328" height="16" alt="グラフ"></td>
</tr>
<tr>
<td style="border:solid 1px #999999;" align="center">社会</td>
<td style="border:solid 1px #999999;" align="center">76</td>
<td style="border:solid 1px #999999;"><img src="../../images/icon/bar01.gif" width="304" height="16" alt="グラフ"></td>
</tr>
</table>