Alineación de puntos decimales en HTML: más allá de las soluciones elementales

Si bien la cuestión de alinear puntos decimales en tablas HTML puede parecer trivial, ha demostrado ser Un desafío para los desarrolladores web. Dos enfoques comunes, dividir los números usando elementos HTML o emplear el atributo HTML4 col align="char", tienen limitaciones.

Sin embargo, existe una solución más elegante y eficiente conocida como el carácter Unicode 'FIGURE SPACE'. ( ). Este carácter de espacio en blanco tiene la propiedad única de tener el mismo ancho que los dígitos y mantener su espaciado.

Aprovechando los espacios de figuras para la alineación

Para alinear los puntos decimales a la izquierda, simplemente números de bloc con espacios de cifras en el lado izquierdo. Para la alineación a la derecha, rellene los números con espacios entre cifras en el lado derecho.

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

Control de alineación mejorado

Los espacios entre figuras brindan flexibilidad adicional al permitir controlar la cantidad de caracteres de relleno. Esto permite la creación de columnas o divisiones perfectamente alineadas.

Los espacios de cifras son compatibles con los principales navegadores, lo que los convierte en una solución sólida y multiplataforma para alinear puntos decimales en HTML.