Выравнивание десятичных точек в HTML: помимо элементарных решений

Хотя вопрос выравнивания десятичных точек в таблицах HTML может показаться тривиальным, он доказал свою эффективность сложная задача для веб-разработчиков. Два распространенных подхода: разделение чисел с помощью элементов HTML или использование атрибута HTML4 col align="char" имеют ограничения.

Однако существует более элегантное и эффективное решение, известное как символ Юникода «FIGURE SPACE». ( ). Этот пробельный символ обладает уникальным свойством: он имеет ту же ширину, что и цифры, и сохраняет интервал.

Использование фигурных пространств для выравнивания

Чтобы выровнять десятичные точки по левому краю, просто номера клавиатуры с пробелами между цифрами слева. Для выравнивания по правому краю номера заполняются пробелами с правой стороны.

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

Расширенное управление выравниванием

Пространства фигур обеспечивают дополнительную гибкость, позволяя контролировать количество заполняющих символов. Это позволяет создавать идеально выровненные столбцы или разделы.

Пространства фигур поддерживаются всеми основными браузерами, что делает их надежным и кроссплатформенным решением для выравнивания десятичных точек в HTML.