均等な空白部分をつくるには？

htmlで例のように表示したいのですが
例）「　　数量　　　　金額」
　　「　　１２　１，２３４」
のように桁位置を合わせたく思います。つまり、数字の最下位桁と見出しの最下位桁を同じ位置にしたいのです。
ところが、漢字スペースを入れても実際はくっついてしまい「１２３，４５６」のようにWeb表示されてしまいます。
半角スペースでも同様にくっついてしまいます。
たとえば「ESC」コードのようなスペースのように見える文字をスペース代わりに挿入することで可能になるのでしょうけど、どのようなコードがいいでしょうか？なにかいいアイデアはあるでしょうか？

No.1 ベストアンサー 回答者： yambejp 回答日時： 2008/05/12 21:44

いまいち何をやりたいのかわかりませんが、

<pre></pre>でインデントしたい部分を囲んでみてはいかが？

この回答への補足

ありがとうございます。
試してみましたが「表示」がなぜかぐちゃぐちゃになってしまいました。
使い方があやまっているのでしょうか？

補足日時：2008/05/12 21:50

この回答へのお礼

すみません。
質問にあやまりがあり、
例）「　　数量　　　　金額」
　　「　　１２　１，２３４」
-------
ところが、漢字スペースを入れても実際はくっついてしまい「１２１，２３４」のようにWeb表示されてしまいます。
半角スペースでも同様にくっついてしまいます。
たとえば「ESC」コードのようなスペースのように見える文字をスペース代わりに挿入することで可能になるのでしょうけど、どのようなコードがいいでしょうか？なにかいいアイデアはあるでしょうか？
でした。

回答ありがとうございます。
<pre></pre>で囲めば、見た目に表示されるのでしょうか。
試してみます。

お礼日時：2008/05/12 21:47

No.5 回答者： steel_gray 回答日時： 2008/05/13 01:06

空白文字は構造の区切り(データの区切り)であって、何個も続けたところで一つと同じに扱われます。

(プログラムのソースコード中、文字列内以外の場所でtabや空白を何個いれても実行結果に影響しないのと同じ)

対処は３種類(全て既出です)
１）空白を一つづつに置き換える。（は視覚化されるのでレイアウトにも使える。）
２）preで囲う。preは「空白」や「改行」をそのままレンダリングに反映させる。（桁合わせをするなら等幅フォントも指定）
<pre style="font-family:monospace">＿＿数量＿＿＿＿＿金額（改行）
＿＿１２＿＿１，２３４</pre>
monospaceというのはブラウザに設定されている等幅フォントを使いなさいという意味で、「ＭＳゴシック」を指定するよりも柔軟で的確です。
３）tableとしてマークアップする。


簡単なのは#2（改行も反映されるので余計な場所で改行したりbrを余計に入れると崩れます）

HTMLをマジメに扱うのであれば（表に見えるので）たぶん#3です。

preで逃げているとすぐに壁にぶち当たるのでちゃんとHTMLを学びtable化する事をお勧めします。

この回答へのお礼

ありがとうございます。
試してみます。

お礼日時：2008/05/17 23:29

No.4 回答者： kuzumiHK 回答日時： 2008/05/13 00:44

内容を見ると表的な要素ですので間にタグを挿入できるのであれば、

ANo.2さんがおっしゃるようにtableが理想だと思います。
例えば、word-spacingなら空白を調整することが可能ですが、
いかがでしょうか。

<p style="word-spacing:3em">
数量 金額<br>
1235 111456
</p>

この回答へのお礼

ありがとうございます。
試してみます。

お礼日時：2008/05/17 23:29

No.3 回答者： yambejp 回答日時： 2008/05/12 22:16

それではmonospaceをつかってみてください。

<div style="font-family:monospace">
　　数量　　　　金額<br>
　　１２　１，２３４
</div>

この回答への補足

お礼の訂正です。
ありがとうございます。
<div style="font-family:monospace">
<p align="left">
____数量_________金額<br>
____1235_______111456
</div>
のように書きましたが（_はスペースの意)

数量 金額
1235 111456
のようになります。

補足日時：2008/05/12 22:47

この回答へのお礼

ありがとうございます。
このように書きましたが
<div style="font-family:monospace">
<p align="left">
数量 金額<br>
1235 111456
</div>
数量 金額
1235 111456
こんな漢字に表示されてしまします。

お礼日時：2008/05/12 22:44

No.2 回答者： nda23 回答日時： 2008/05/12 22:04

HTMLでは空白をと記述していますか？

もっとも、プロポーショナルフォントでは空白で間合いを取るのは
絶望的です。そこで、位置合わせなら、<TABLE>タグを使う方が
よいでしょう。

<TABLE>
　<TR>
　　<TH ALIGN=RIGHT>数量</TH>
　　<TH ALIGN=RIGHT>金額</TH>
　</TR>
　<TR>
　　<TD ALIGN=RIGHT>12</TD>
　　<TD ALIGN=RIGHT>1,234</TD>
　</TR>
</TABLE>

この回答へのお礼

ありがとうございます。
&nbsp;を使わずにお願いします。
なぜ、このような質問をするかといいますと「COBOL」でhtmlというテキストファイルを出力するのですが、この場合、タイトル部は
「____数量______金額」とし(_はスペースの意）、
「ZZZZ,ZZ9ZZ,ZZZ,ZZ9」のように編集エリアを定義しますが、この時
12と1234の場合、
「______12_____1,234」となりますが、
この場合Webでは
「121,234」と表示されてしましますので。。
ちなみに文字種類は「MSゴシック」にしています。（プロポーショナルでは無い）

お礼日時：2008/05/12 22:21