Apply table to semantic <table> elements for striped rows, borders, and hover states. Modifiers include hover, stack (mobile-friendly stacked rows), and scroll wrapper for wide data.
Accessible data tables
- Use
<thead>,<tbody>, and<th scope="col"> - Caption or nearby heading describes the table purpose
table-scrollwraps tables that overflow horizontally on small screens
Tables complement dashboard layouts built with the XY grid layout patterns. For very dense apps, consider whether a card list communicates better on mobile than a stacked table.
Self-check
- Which class makes rows highlight on hover?
- When should you wrap a table in
table-scroll?