Alignement des points décimaux en HTML : au-delà des solutions élémentaires

Bien que la question de l'alignement des points décimaux dans les tableaux HTML puisse paraître triviale, elle s'est avérée un défi pour les développeurs Web. Deux approches courantes, diviser les nombres à l'aide d'éléments HTML ou utiliser l'attribut HTML4 col align="char", ont des limites.

Cependant, il existe une solution plus élégante et plus efficace connue sous le nom de caractère Unicode « FIGURE SPACE ». ( ). Ce caractère d'espacement a la propriété unique d'avoir la même largeur que les chiffres et de conserver son espacement.

Exploiter les espaces de figures pour l'alignement

Pour aligner les points décimaux à gauche, il suffit numéros de bloc avec des espaces de chiffres sur le côté gauche. Pour un alignement à droite, remplissez les numéros avec des espaces de chiffres sur le côté droit.

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

Contrôle d'alignement amélioré

Les espaces de figures offrent une flexibilité supplémentaire en permettant de contrôler le nombre de caractères de remplissage. Cela permet la création de colonnes ou de divisions parfaitement alignées.

Les espaces entre figures sont pris en charge par tous les principaux navigateurs, ce qui en fait une solution robuste et multiplateforme pour aligner les points décimaux en HTML.