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 回答日時： 2006/10/13 13:00

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

【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;
}

この回答へのお礼

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

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

お礼日時：2006/10/13 13:42

No.4 回答者： noname#20925 回答日時： 2006/10/13 11:51

失礼、間違えた。

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

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

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

この回答への補足

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

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

補足日時：2006/10/13 12:29

No.3 回答者： noname#20925 回答日時： 2006/10/13 11:36

＞■

＞■■
＞■■■

であれば単純に
<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 回答日時： 2006/10/13 11:06

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

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

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

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

この回答への補足

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

■
■■
■■■

補足日時：2006/10/13 11:18

No.1 回答者： STICKY2006 回答日時： 2006/10/13 10:39

こんちくは。

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

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

<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>

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

この回答への補足

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

補足日時：2006/10/13 10:52