Right-align table numbers
Right-align numbers, keep one precision, and draw only light row lines.
Steve Schoger@steveschogerAligning text is an easy way to clean up your design and make your content much more scannable.
Shown in Align and format numbers
Steve Schoger@steveschogerDesigning nice tables can be tough, but here's a few ideas that can make a big difference:
Shown in Border lab
Steve Schoger@steveschogerGet creative with table design — table cells can contain more than simple unstyled text. Here are a few ways to make tables look more interesting:
Shown in 100 rows: sort, filter, sticky header
From refactoring-ui, “Tables”. Posts shown without emoji or images.
Align and format numbers
Untick one setting to see which breaks the column.
Left, mixed precisionBad
$1234 · $567.89 · $2.5kYour settingsGood
$1,234.00 · $567.89 · $2,500.00Border lab
Switch the rule style, then drag the padding.
Full grid, crampedBad
td { border: 1px solid; padding: 4px 6px }One light rule per rowGood
tr { border-bottom: 1px solid var(--line) }Sort, filter, sticky header
Scroll to the bottom, then sort and filter the right table.
100 of 100
Header scrolls awayBad
thead { position: static }Sticky and sortableGood
thead th { position: sticky; top: 0 }Why it matters, pros and cons
Why it matters
Right-aligned digits stack by place value, so the longest number is the largest. Heavy lines make the eye stop on every cell.
Pros
- Magnitudes compare at a glance.
- Data, not scaffolding, carries the contrast.
- Totals line up with their column.
Cons
- Generous padding shows fewer rows per screen.
- IDs and ZIP codes are text; left-align them.
- Borderless wide tables lose the row; keep lines.