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의 소수점 정렬을 위한 강력한 크로스 플랫폼 솔루션이 됩니다.