Alinhando pontos decimais em HTML: além das soluções elementares

Embora a questão de alinhar pontos decimais em tabelas HTML possa parecer trivial, ela provou desafiador para desenvolvedores web. Duas abordagens comuns, dividir os números usando elementos HTML ou empregar o atributo HTML4 col align="char", têm limitações.

No entanto, existe uma solução mais elegante e eficiente conhecida como caractere Unicode 'FIGURE SPACE' ('#8199;). Este caractere de espaço em branco tem a propriedade única de ter a mesma largura dos dígitos e manter seu espaçamento.

Aproveitando espaços de figura para alinhamento

Para alinhar pontos decimais à esquerda, simplesmente números de bloco com espaços de figura no lado esquerdo. Para alinhamento à direita, preencha números com espaços de algarismos no lado direito.

/* 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

Controle de alinhamento aprimorado

Os espaços de figura fornecem flexibilidade adicional, permitindo o controle sobre o número de caracteres de preenchimento. Isso permite a criação de colunas ou divisões perfeitamente alinhadas.

Os espaços de figura são suportados por todos os principais navegadores, tornando-os uma solução robusta e multiplataforma para alinhar pontos decimais em HTML.