How to Align Decimal Points in HTML Tables Like a Word Processor\'s Decimal Tab?

Aligning Decimal Points with Unicode "Figure Space"

Question: How do I achieve precise decimal point alignment in an HTML table, similar to a word processor's "decimal tab" feature?

Traditional Solutions:

• Splitting Numbers: Separating the integer and fractional parts of numbers with HTML elements.
• Using the "COL" Tag: Declaring a column with "char" alignment to match a specific character, such as a decimal point.

Limitations:

• Splitting numbers can break formatting.
• The "COL" tag may not be supported in all browsers or may lack flexibility for CSS formatting.

Optimal Solution: Unicode Figure Space

A superior solution involves using the Unicode character "FIGURE SPACE" (U 2007,  ). It is a whitespace character designed to match the width of digits and maintain a fixed spacing.

Usage:

To align decimal points on the right, pad the numeric strings with FIGURE SPACES on the left, as shown in the following example:

<code class="html"><p style="font-family: sans-serif">
  10000 <br>
  &#8199;&#8199;123.4 <br>
  &#8199;&#8199;&#8199;&#8199;3.141592
</p></code>

This technique effectively aligns the decimal points vertically without affecting the numeric formatting. It is also compatible with both serif and sans-serif fonts.

The above is the detailed content of How to Align Decimal Points in HTML Tables Like a Word Processor\'s Decimal Tab?. For more information, please follow other related articles on the PHP Chinese website!