Table Design

Table Fundamentals

Column Design

• Left-align text columns. Right-align number columns. Center status indicators.
• Column headers: bold, slightly smaller, uppercase or gray text.
• Sortable columns: show sort indicator. Default sort by most useful column.
• Minimum column width: ensure content doesn't truncate to unreadable lengths.

Row Design

• Alternate row shading (zebra stripes) for wide tables. Skip for narrow tables.
• Row height: 48-56px for comfortable reading. 36-40px for dense/power-user views.
• Hover state on rows when clickable. No hover state on non-interactive tables.
• Selected state: subtle background highlight + checkbox.