WEB相談室

Webページ作成に関しての何でも掲示板です。

タイトル:htmlで、数値を小数点で位置を揃える方法

0:[投稿] hama8 [2006/01/24 11:17 ] [環境:XP、IE6 perl]

小数点の入った数値を表示したいのですが、小数点の位置がずれる為に見難くなってしまいます。

小数点の位置で表示を揃えることは可能でしょうか?

<table border="1">
 <tbody>
 <tr><td> aa </td><td> 123.45     </td></tr>
 <tr><td> bb </td><td> 12         </td></tr>
 <tr><td> cc </td><td> 12345.0932 </td></tr>
 <tr><td> dd </td><td> 1          </td></tr>
 </tbody>
</table>


1:[回答] 串接樣式 [2006/01/24 12:44 ]

CSS2には列を文字列で揃える仕組みがあります。
http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/tables.html#column-alignment
ですが、残念ながらどのブラウザも対応していません。
小数点以下を揃えて、monospaceのフォント、右揃えが無難だと思います。


2:[回答] kani [2006/01/24 16:57 ]

<table border="1">
<tbody>
<tr><td> aa </td><td>00123.45     </td></tr>
<tr><td> bb </td><td>00012         </td></tr>
<tr><td> cc </td><td>12345.0932 </td></tr>
<tr><td> dd </td><td>00001          </td></tr>
</tbody>
</table>

このようにして、0を背景色と同じ色にするなんていかがでしょう。


3:[回答] 串接樣式 [2006/01/24 17:43 ]

あまりスマートではありませんが、以下の様な方法はあります。
WinIE6、Firefox1.5、Opera8.5 で巧く揃えられることを確認しました。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="ja">
<head>
 <meta http-equiv="Content-Type" content="text/html">
 <meta http-equiv="Content-Style-Type" content="text/css">
 <title>数値を小数点で位置を揃える</title>
 <style type="text/css">
 td span.dec {
   font-family: monospace;
   text-align: right;
   float: left;
   width: 5ex;
 }
 td span.fdig {
   font-family: monospace;
   _margin-left: -3px; /* WinIE向けハック */
 }
 </style>
</head>

<body>

<table border="1">
<tbody>
<tr><td>aa</td><td><span class="dec">123</span><span class="fdig">.45</span></td></tr>
<tr><td>bb</td><td><span class="dec">12</span></td></tr>
<tr><td>cc</td><td><span class="dec">12345</span><span class="fdig">.0932</span></td></tr>
<tr><td>dd</td><td><span class="dec">1</span></td></tr>
</tbody>
</table>

</body>
</html>


4:[回答] align [2006/01/24 23:18 ]

皆が等幅ピッチのフォントというわけではないのでスタイルシートも使いました。

<html>
<head>
<style TYPE="text/css">
TD {font-family: 'MS ゴシック';}
</style>
</head>
<body>
<table border="1">
<tbody>
<tr><td> aa </td><td align=right>123.45&nbsp;&nbsp;</td></tr>
<tr><td> bb </td><td align=right>12&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td></tr>
<tr><td> cc </td><td align=right>12345.0932</td></tr>
<tr><td> dd </td><td align=right>1&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td></tr>
</tbody>
</table>
</body>
</html>


5:[回答] 串接樣式 [2006/01/24 23:46 ]

>>4
何を意図しているのか分かりません。

"non-breaking space" の本来の用途から外れる体裁目的での利用は好ましくありません。
http://www.asahi-net.or.jp/~sd5a-ucd/rec-html401j/struct/text.html#h-9.3.2.2
それに文書制作者のフォント指定が常に有効であるとは限りません。

>>3 の方法は width の値をもう少し大きめに設定しておけば、
font-family の種類に関係なく小数点で揃えられます。
Windows環境なら "MS ゴシック", monospace とすべきでしょうが。


6:[回答] ミツ [2006/01/25 00:41 ]

#1の方法がお勧めです。
環境にPerlとあるのでスクリプトで吐き出すHTMLならprintf/sprintfを使えば小数点以下の桁数を揃えるのも簡単だと思うし。

が、どうしてもテキスト部分をいじりたくなければこんな方法もあるって事で。

<style type="text/css">
.num{
font-family:monospace;
text-align:right;
padding-left:1ex;
padding-right:1ex;
}
.i0{padding-right:6ex}
.i1{padding-right:5ex}
.i2{padding-right:4ex}
.i3{padding-right:3ex}
.i4{padding-right:2ex}
.i5{padding-right:1ex}
</style>

<table border="1">
<tbody>
<tr><td>aa</td><td class="num i3">123.45</td></tr>
<tr><td>bb</td><td class="num i0">12</td></tr>
<tr><td>cc</td><td class="num i5">12345.0932</td></tr>
<tr><td>dd</td><td class="num i0">1</td></tr>
</tbody>
</table>


>3
CSS-Offの環境では、状況によっては整数部と小数部で改行される現象がみられと思います。
マークアップが正しくないとまでは思いませんが実質的に一塊の数値を別要素に割ってしまうのはやっぱマズいんじゃないでしょうか。


7:[回答] 串接樣式 [2006/01/25 01:35 ]

>>6
>どうしてもテキスト部分をいじりたくなければこんな方法もあるって事で。
その方法はセルのデータそのものはスマートになりますが、
小数点以下の桁数に合わせてクラスを指定するのは面倒ですね。
Perl で出力するなら問題ないかもしれませんが。それと font-family に依存しますね。

>CSS-Offの環境では、状況によっては整数部と小数部で改行される現象がみられと思います。
多分、そんな事はありませんよ。span要素はインラインですし。

>実質的に一塊の数値を別要素に割ってしまうのはやっぱマズいんじゃないでしょうか。
確かに数値データとして見ればマズいと思いますし、スマートじゃないです。
だけど、アクセシビリティの面ではそれほど影響しないと思います。
あまり奨められるマークアップではないのは確かですが、>>4 よりはマシです。

どうな方法でもマークアップに無理が生じます。
私もあらためて >>1 の方法をお奨めします。


8:[完了] hama8 [2006/01/25 11:02 ]

回答ありがとうございます。
すべての方法を試してみましたが、私の環境(XP,IE6)では小数点の位置が微妙にずれてしまい、自然な感じには見えませんでした。

CSS2の揃えるというのが出来るようになるのを期待しつつ、とりあえずいろんな数値で試してみて提案していただいたいずれかを使用したいと思います。

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

回答(必須): 状態:

お名前(必須):

URL:




[戻る]