Aligning Decimal Points in HTML: Beyond Elementary Solutions

While the question of aligning decimal points in HTML tables may seem trivial, it has proven challenging for web developers. Two common approaches, splitting the numbers using HTML elements or employing the HTML4 col align="char" attribute, have limitations.

However, there exists a more elegant and efficient solution known as the Unicode character 'FIGURE SPACE' ( ). This whitespace character has the unique property of being the same width as digits and maintaining its spacing.

Leveraging Figure Spaces for Alignment

To left-align decimal points, simply pad numbers with figure spaces on the left side. For right-alignment, pad numbers with figure spaces on the right side.

/* Left-align decimal points */
.left-aligned {
  text-align: left;
  padding-right: .5rem;
  font-family: sans-serif;
}

/* Right-align decimal points */
.right-aligned {
  text-align: right;
  padding-left: .5rem;
  font-family: sans-serif;
}

  10000

    123.4

      3.141592



  10000

    123.4

      3.141592

Enhanced Alignment Control

Figure spaces provide additional flexibility by allowing control over the number of padding characters. This enables the creation of perfectly aligned columns or divisions.

Figure spaces are supported by all major browsers, making them a robust and cross-platform solution for aligning decimal points in HTML.