小数点の前後の長さが異なり、小数点がすべて揃った 10 進数の列を含むテーブルが必要です。

列幅は「流れる」サイズである必要があり、データ セル内の非常に長い数値や列に関連付けられた非常に長いヘッダーを収容するために必要に応じて拡張されます。

整数 (小数点なし) を含むセルには、小数点文字が存在するかのように同じ位置に整列して数値が表示されます。 (たとえば、数値 512 は、「512」ではなく「512」のみを含むセルと正しく位置合わせされるはずです。)

フォントは無関係である必要があり、等幅は必須ではありません。

最後に、小数点 (可視および暗黙的!) を揃えたまま、数値をできる限り列の中央に配置する必要があります。 具体的には、小数点文字の前に最も多くの文字があるセルの「左の空白」の幅（または、小数点文字が存在しない場合は単に大部分の文字）が、セルの「右の空白」の幅と等しくなければなりません。セルの幅は同じです。最初の小数点以下の文字が最も多いセル。

最後の要件として、私が特に「数字」ではなく「文字」と述べたのは、テーブル レイアウトでは数字の前のプラス/マイナス記号などの記号文字や、数字の後に追加される測定単位の略語などの文字を処理する必要があるためです。

HTML 4.01 仕様では、「定義上」、単純な HTML テーブルを使用してこのようなレイアウトを簡単に実現できます。 (データを小数点文字で 4 列の列グループの 2 つの内側のセルに分割します。外側の 2 つの列は width="*"、内側の 2 つの列は width="0*" . 数値の整数部分を含むセルを右揃えにし、数値の小数部と小数部分を含むセルを左揃えにします。これら 2 つのセルを nowrap に設定し、# を設定します。テーブル ##cellpadding="0" cellpacing="0" rules="group".)

しかし、多くの人は、これは良くないので、テーブルの代わりに CSS を使用して書式設定する必要があると言っています。また、意味的に正しいデータを含むテーブルでは、これらの数値が単一のセル内にそのまま保持される必要があることも学びました。しかし、希望の書式設定を実現する CSS 方法が見つかりませんでした。

単一列のテキスト配置を「中央揃え」に設定するだけでは、小数点の配置は維持されません。

私が間違っていない限り、align="char" の使用は、明示的に小数点を持たない整数では機能しませんが、小数点があるかのように位置合わせする必要があります。

小数点文字を整数に追加すると、それが非表示であっても、技術的にはデータの整合性が損なわれます。

非改行スペースによるデータのパディングは、プロポーショナル (非等幅) フォントでは機能しません。この種のハッキング攻撃は、データの整合性を損なう可能性もあります。

固定ピクセル オフセットを介して位置を指定すると、列に真の「液体」幅を持たせることができなくなり、ヘッダー セルを含む列内のすべてのセルの内容に合わせてレンダリングされます。ヘッダー セルには任意の長さのデータを含めることができます。いつでも。

JavaScript は、レンダリング後にテーブルの最終的な幅を読み取り、ピクセル オフセットを動的に計算してから、DOM 書き換え形式を通じてデータの配置を「スリップ」します。これは時間がかかり、データが飛び回るときに視覚的なノイズを生成します。これは実に汚いハックで、レイアウトにテーブルを使用するよりもさらに汚いです。

私の意見では、CSS レイアウト HTML セマンティック データに対する「純粋主義」アプローチでは、この単純だが頻繁に必要とされるレイアウトを実現できません。 誰かが私が間違っていることを証明して、このレイアウトを「正しく」行う方法を教えてくれることを願っています。