Ausrichten von Dezimalpunkten in HTML: Jenseits elementarer Lösungen

Obwohl die Frage der Ausrichtung von Dezimalpunkten in HTML-Tabellen trivial erscheinen mag, hat sie sich bewährt Eine Herausforderung für Webentwickler. Zwei gängige Ansätze, die Aufteilung der Zahlen mithilfe von HTML-Elementen oder die Verwendung des HTML4-Attributs col align="char", haben Einschränkungen.

Es gibt jedoch eine elegantere und effizientere Lösung, die als Unicode-Zeichen „FIGURE SPACE“ bekannt ist. ( ). Dieses Leerzeichen hat die einzigartige Eigenschaft, die gleiche Breite wie Ziffern zu haben und seinen Abstand beizubehalten.

Nutzung von Ziffernräumen zur Ausrichtung

Um Dezimalpunkte einfach linksbündig auszurichten Füllen Sie Zahlen mit Ziffernfeldern auf der linken Seite aus. Für die Rechtsausrichtung füllen Sie die Zahlen auf der rechten Seite mit Leerzeichen auf.

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

Erweiterte Ausrichtungssteuerung

Zahlenräume bieten zusätzliche Flexibilität, indem sie die Kontrolle über die Anzahl der Füllzeichen ermöglichen. Dies ermöglicht die Erstellung perfekt ausgerichteter Spalten oder Unterteilungen.

Zahlenräume werden von allen gängigen Browsern unterstützt, was sie zu einer robusten und plattformübergreifenden Lösung für die Ausrichtung von Dezimalpunkten in HTML macht.