HTML：グラフ表示

質問

HTMLでグラフ表示（縦型）を検討しております。

下記のように前日差をだすために色を分けたいのですが、
イメージタグを続けて書くと、棒グラフgifが改行（次の列）されて表示されます。
<td valign="bottom"><img src="graph.gif" width="20" height="54">"><img src="graph1.gif" width="20" height="15"></td>

同じ列に色分けしてグラフ表示させるにはどう記述すればよろしいでしょうか？

よろしくお願いいたします。

回答No.5

ratoa · ベストアンサー

横型の方が圧倒的に楽だと思いますけど、縦型でやるならこんな感じですかね。

【html】
<table>
<tr>
<td>
<img src="graph.gif" width="20" height="54"><img src="graph1.gif" width="20" height="15">
</td>
<td>
<img src="graph.gif" width="20" height="54"><img src="graph1.gif" width="20" height="15">
</td>
</tr>
</table>

【css】
td{
vertical-align:bottom;
}
td img{
display:block;
}

お礼

できました！
スタイルシートを使うんですね！！

ありがとうございました。

回答No.4

noname#20925

失礼、間違えた。

各イメージの高さが違うんだから、
http://allabout.co.jp/internet/hpcreate/closeup/CU20040215A/index2.htm
↑みたいなグラフ、ってことだよね。

だったら、No.1さんの回答で問題ないと思うんだけど。

No.3は
http://allabout.co.jp/internet/hpcreate/closeup/CU20040203A/
↑みたいな場合。

補足

すみません、先ほどの補足で、横型棒グラフになっていました。
縦型グラフ
■：graph.gif
□：graph1.gif
　　　　　□
　　 □　■
■　■　■
日　月　火　・・・・
と前日差を色分けして縦に表示ですね。
もちろん色分けの境目はスペースなしです。

よろしくお願いいたします。

回答No.3

noname#20925

＞■
＞■■
＞■■■

であれば単純に
<table>
<tr>
<td><img src="graph.gif" width="20" height="54"></td>
</tr>
<tr>
<td><img src="graph1.gif" width="20" height="15"></td>
</td>
</tr>
＃以下、必要に応じて繰り返し。
</table>
－－かな。

回答No.2

noname#20925

＞同じ列に色分けしてグラフ表示させるには

　　■
■　■
■■■
－－ということではないかと思うんですが、
＃ズレてると思うけど。
だとすると、No.1さんの回答が正解かと。

＞状況は変わらず、横に並んで棒グラフが表示されます。
ひょっとして、

■■■
■
■■
↑のように表示させたい、ってことですか？

補足

はい、上の流れからすると下記です。

■
■■
■■■

回答No.1

STICKY2006

こんちくは。
まぁ、ほぼ仕方の無いこと。。。ですよ。

画像を横に並べて配置したい～場合は、大抵（？）

<td valign="bottom">
<img src="graph.gif" width="20" height="54">
<img src="graph1.gif" width="20" height="15">
</td>

を

<td valign="bottom">
<img src="graph.gif" width="20" height="54">
</td>
<td valign="bottom">
<img src="graph1.gif" width="20" height="15">
</td>

にするか

<td valign="bottom">
<table>
<tr>
<td>
<img src="graph.gif" width="20" height="54">
</td>
<td>
<img src="graph1.gif" width="20" height="15">
</td>
</tr>
</table>
</td>

ですかね。
面倒かもしれませんけど、細かい調節ができるようにもなるかと思います。

補足

状況は変わらず、横に並んで棒グラフが表示されます。