# Table or cards?

[Website version](https://patterns.alexanderclaes.com/patterns/tables-or-cards/)

Updated 28 October 2026

Tables support comparison across shared attributes. Cards support browsing distinct items.

## Recommendation

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

[View the example on the website](https://patterns.alexanderclaes.com/patterns/tables-or-cards/#example).

## Implementation

1. 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.
2. Keep numbers, units, and date formats consistent. If sorting is available, use buttons in headers and aria-sort on the currently sorted header.
3. For wide tables, use a named, keyboard-scrollable container. The table may scroll horizontally, but surrounding content and individual cell text must still reflow.
4. 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?

## References

- [W3C · Tables tutorial](https://www.w3.org/WAI/tutorials/tables/)
- [USWDS · Table selection and implementation](https://designsystem.digital.gov/components/table/)
- [USWDS · Card guidance](https://designsystem.digital.gov/components/card/)
- [W3C APG · Sortable table example](https://www.w3.org/WAI/ARIA/apg/patterns/table/examples/sortable-table/)
- [W3C · Reflow and the data-table exception](https://www.w3.org/WAI/WCAG22/Understanding/reflow.html)

## Related patterns

- [Pagination or infinite scroll?](https://patterns.alexanderclaes.com/patterns/pagination.md)
- [Search, filters, or both?](https://patterns.alexanderclaes.com/patterns/search-or-filters.md)