표

개념 이해하기

border-collapse로 이중 경계를 합치고 th/td padding으로 읽을 공간을 만듭니다. :nth-child와 hover로 행을 구분할 수 있지만 HTML의 caption과 th 구조가 먼저 올바라야 합니다.

th는 원래 가운데 정렬이지만 th, td 규칙의 text-align: left가 머리글을 데이터와 같은 왼쪽 선에 맞춥니다. tbody 안의 짝수 번째 행은 CSS 한 줄뿐이라 그 행만 연한 초록 배경을 받고, border-collapse: collapse가 셀 사이 간격을 없애 행마다 그은 1px 아래 선이 끊김 없이 이어집니다.

진도처럼 숫자를 비교하는 열은 text-align: right에 font-variant-numeric: tabular-nums를 더하면 숫자마다 같은 폭이 적용돼 자릿수가 세로로 맞습니다. 80%, 45%, 20%처럼 길이가 비슷한 값도 끝이 정렬되면 크기를 훨씬 빨리 비교할 수 있습니다.