Choose a table when shared attributes need comparison. Use cards for self-contained summaries, or a simple list when cards add no useful structure.
Problem
I need to present a collection of items.
Use a table when
- Users compare prices, dates, statuses, or other consistent attributes.
- The relationship between headers and values carries meaning.
Choose cards or a list instead when
- Items contain long, unrelated content rather than a consistent set of comparable attributes.
- Users are browsing self-contained summaries rather than comparing values across items.
Example
| Project | Status | Due date |
|---|---|---|
| Website | Active | 12 Nov |
| Mobile app | Draft | 20 Nov |
| Research | Complete | 24 Oct |
Implementation
- Use a native table with correctly associated header and data cells. Prefer a short caption to identify its topic; captions are useful, not universally required by WCAG.
- Keep numbers, units, and date formats consistent. If sorting is available, use buttons in headers and aria-sort on the currently sorted header.
- For wide tables, use a named, keyboard-scrollable container. The table may scroll horizontally, but surrounding content and individual cell text must still reflow.
- If you offer a stacked or simplified view, keep labels, relationships, and necessary details available. Check whether comparisons still work.
Tradeoffs
Cards give each item room and work well with summaries. Tables are denser and make cross-item comparisons easier, but wide tables require deliberate small-screen handling.
Verification
Can users compare key values in a narrow or zoomed view, reach every column by keyboard, and hear the correct headers with a screen reader?