テーブル内に棒グラフを作る方法

テーブルの数値を読み込んで、そのテーブルにグラフを表示したいのですが、
方法がわかりません。

具体的には以下のサイトとほぼ同じようにテーブル内にグラフを作りたいです。
ttp://2ch.logpo.jp/

宜しくお願いします。

No.1 ベストアンサー 回答者： mikemike7 回答日時： 2011/06/06 03:09

参考のページを見れば分かる気もしますが...。

誰も回答していないので、
HTML・CSSは得意ではありませんが、書いてみます。
#おそらく参考ページとは作成方法が異なります。

CSS部
table{
border-collapse: collapse;
border: solid 1px #000000;
}
td{
border: solid 1px #000000;
}
.box{
position: relative;
}
.graph{
position: absolute;
z-index: 1;
display: block;
height: 10px;
background-color: #cccccc;
}
.text{
position: relative;
z-index: 2;
}

HTML部
<table>
<tr><td>
<div class="box">
<div class="graph" style="width: 85%;"></div>
<div class="text">OKWave</div>
</div>
</td></tr>
<tr><td>
<div class="box">
<div class="graph" style="width: 60%;"></div>
<div class="text">教えて！goo</div>
</div>
</td></tr>
<tr><td>
<div class="box">
<div class="graph" style="width: 48%;"></div>
<div class="text">Yahoo!知恵袋</div>
</div>
</td></tr>
</table>

説明
どこまでHTML・CSSがおわかりかわからないですが、

<div class="graph" style="width: **%;"></div>
の部分がグラフ部分なので、width: 数値%;
として伸ばしたい長さの値をそれぞれ指定します。
%で指定していますが、pxでも何でも良いです。

グラフのバーを画像にしたい。
縦幅を変更したい。
位置をずらしたい。
という場合には、
.graph{
ここ
}
を修正、追記します。

この回答へのお礼

これです！　ありがとうございます！
無事できたのですが、少し疑問があったので質問させてください。

.text{
position: relative;
z-index: 2;
}

ここでの『position: relative;』はなぜ必要なのでしょうか？
z-index: 2;で優先順位は記述しているので
必要ないと思って削ったら表示されませんでした。

もし宜しければご返答頂けるとうれしいです。

お礼日時：2011/06/06 23:28

No.2 回答者： mikemike7 回答日時： 2011/06/06 23:47

>ここでの『position: relative;』はなぜ必要なのでしょうか？

まず、z-index: 2;をつけなければなりません。
そうしないとグラフーのバーに文字が隠れてしまいます。

z-indexは、postion: static以外でないと無効になるので、
relativeを指定しています。

この回答へのお礼

なるほど、勉強になりました。
ご丁寧にありがとうございました！

お礼日時：2011/06/07 02:05