プロが教えるわが家の防犯対策術!

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

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

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

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

A 回答 (5件)

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



【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;
}
    • good
    • 0
この回答へのお礼

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

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

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

失礼、間違えた。



各イメージの高さが違うんだから、
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
    • good
    • 0

>■


>■■
>■■■

であれば単純に
<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>
--かな。
    • good
    • 0

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



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

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

■■■

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

この回答への補足

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


■■
■■■

補足日時:2006/10/13 11:18
    • good
    • 0

こんちくは。


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

画像を横に並べて配置したい~場合は、大抵(?)

<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
    • good
    • 0

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aと関連する良く見られている質問

Q複数のボタンを等間隔に、かつ中央に配置する

ホームページで、ボタンを横に3つ等間隔に、適度な余白をもって並べ、
さらにその3つがちょうどページの中央に表示されるようにしたいです。
cssをどのように記述すればいいですか?
↓下記のようなイメージにしたいです。

--------------------
--------------------
    □ □ □  ←これがボタンです


↓htmlファイルです↓
<div class="button">
<input type="submit" value="<< 戻る <<" />
</div>

<div class="button">
<input type="submit" value="選択リセット" />
</div>

<div class="button">
<input type="submit" value=">> 進 む>>" />
</div>

↓CSSファイルです↓
div.button {
padding-right:35px;
float:left;
}

上記設定で、ボタンの左右間隔はいい感じにあいたのですが
全体的に左に寄ってしまってます。

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

ホームページで、ボタンを横に3つ等間隔に、適度な余白をもって並べ、
さらにその3つがちょうどページの中央に表示されるようにしたいです。
cssをどのように記述すればいいですか?
↓下記のようなイメージにしたいです。

--------------------
--------------------
    □ □ □  ←これがボタンです


↓htmlファイルです↓
<div class="button">
<input type="submit" value="<< 戻る <<" />
</div>

<div class="button">
<input type="submit" value="選択リセット" />
</div>

<div class="button...続きを読む

Aベストアンサー

<div class="button">
<input type="submit" value="<< 戻る <<" />
<input type="submit" value="選択リセット" />
<input type="submit" value=">> 進 む>>" />
</div>

div.button {
text-align:center;
}
div.button input {
margin: 0px 20px;
}

Qcsvファイルを読み込み、該当項目をhtmlに表示する方法

下記のようなcsvファイルがサーバ上にあり、毎日最新情報に更新されます。
サーバ上の同階層にあるHTMLページに、csvファイルの一部に該当する項目を
表示したいのですが、どのようにしたら実現できるのかわかりません…。
どうか助けてください。よろしくお願いいたします。

■csvファイル(data.csv)
種類,国,売上目標,売上実績,前年売上
りんご,国内,100,90,80
バナナ,国内,100,80,90
りんご,海外,100,110,100
バナナ,海外,100,50,80

■HTMLページ(index.html)
売上達成率【国内】りんご90% (前年比+10) | バナナ80%(前年比-10)
売上達成率【海外】りんご110%(前年比+10)| バナナ50%(前年比-30)

※マイナスになっている場合は赤字にしたいです。

Aベストアンサー

No.5&6です。何も表示されなかったとのことですので、
試しにfc2にアップロードしてみましたので、下記URLでも表示されないでしょうか。

https://fjicode.web.fc2.com/gooqa/9928341/index.html

もし上記サイトでうまく表示されましたら、上記サイトのソース表示から取得した方が手っ取り早いかもしれません。


人気Q&Aランキング