How to Align Decimal Points in HTML Without Extra Formatting?

Aligning Decimal Points in HTML

Problem: How can numeric values in a table be aligned vertically with respect to their decimal points without introducing extra formatting tags or employing browser-specific code?

Possible Solutions:

• Splitting Numbers: Dividing numbers into integers and decimals using HTML elements and styling the decimal point with explicit width.
• Char Column: Using the syntax from HTML4. However, this is not supported by major browsers.

Optimal Solution:

A more effective and cross-browser compatible approach is to use the Unicode character FIGURE SPACE (U 2007,  ).

FIGURE SPACE:

The FIGURE SPACE is a whitespace character with a fixed width equal to that of digits. It maintains its spacing, similar to the No-Break Space. By padding numbers with FIGURE SPACES, the column or div can be aligned on either the left or right side.

Examples:

Left-aligned and left-padded numbers using FIGURE SPACES:

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

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

This solution is superior as it:

• Aligns numbers precisely at their decimal points.
• Works across browsers and font families.
• Allows for easy integration with CSS for further styling.

The above is the detailed content of How to Align Decimal Points in HTML Without Extra Formatting?. For more information, please follow other related articles on the PHP Chinese website!