Table Design
The visual design of data tables — the foundational component for displaying structured information.
Plain English
Tables are the most information-dense components in any UI. Good table design is about maximum legibility at minimum visual weight: zebra striping or row hover to help the eye track across wide tables, right-aligned numbers so decimal points align, left-aligned text, adequate but not excessive cell padding, and a sticky header when scrolling long lists. Tables are not the place to show off design creativity — they are workhorses that should get out of the user's way.
Technical
Use semantic <table>, <thead>, <tbody>, <th scope="col">, <td>. Key CSS: border-collapse: collapse; text-align: right for numbers (via text-align or tabular-nums); position: sticky + top: 0 on <thead> for sticky headers; overflow-x: auto on a wrapper <div> for responsive horizontal scroll. Row heights: 40-56px. Cell padding: 12-16px. Zebra striping: background-color on even/odd rows. Sort indicators: ▲▼ or ↕ icon in column headers with aria-sort attribute.
Live Demo
| Name | Role | Status | Action |
|---|---|---|---|
| Alice Chen | Designer | Active | |
| Bob Martin | Engineer | Pending | |
| Clara Smith | Product | Inactive | |
| Dan Torres | Marketing | Active |
On mobile, secondary columns collapse to a detail view.
Tables: left-align text, right-align numbers. Use alternating rows only if you have 5+ rows.
Usage
✓ Good usage
A data table with 12px cell padding, zebra striping, right-aligned number columns, sticky header, sortable column headers with ▲▼ icons, and row hover highlighting.
✗ Bad usage
A table with centred columns of mixed numbers and text, no row separation, and no sorting — requires intensive scanning to extract any meaning.
Recommended values
- Row height: 40-48px (standard), 56px (comfortable)
- Cell padding: 12-16px horizontal
- Number columns: right-aligned
- Text columns: left-aligned
- Zebra stripe: very subtle (2-3% background difference)
- Column header: 500-600 weight, slightly muted colour
Common mistakes
- Centred number columns — decimal points do not align, making comparison impossible.
- No horizontal scroll wrapper — tables overflow on mobile.
- Horizontal borders between every row — creates visual noise on dense tables.
AI Prompt Example
Copy this into Claude, Cursor, Bolt, or v0.
Data tables: 44px row height, 14px cell padding, left-align text, right-align all numbers (font-variant-numeric: tabular-nums). Sticky header with 500 weight. Zebra stripe (alternating #F9FAFB rows). Row hover: #F1F5F9. Column sorts: ▲▼ with aria-sort. Horizontal scroll wrapper on mobile.