Home  >  Article  >  Web Front-end  >  How to Align Decimal Points in HTML Tables Like a Word Processor\'s Decimal Tab?

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

Patricia Arquette
Patricia ArquetteOriginal
2024-10-30 09:28:27174browse

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!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn