Editorial, not spreadsheet-heavy.
Tables v1 — packages/design-system/src/components/table.css. A real
<table>, always — Irozon does not replace tables with div grids.
Whitespace and aligned type carry the structure before heavy grid lines do.
.iz-table on a native <table>; wrap in .iz-table-wrap for horizontal overflow.data-align="end" on a <td>/<th> — right-aligned, tabular numerals.data-density="compact" on the table — default requires no attribute.data-interactive for a hover cue, aria-selected="true" for selection — both native/semantic, no .is-*.Status, numerals, actions — together.
Row 2 shows aria-selected="true"; empty numeric values use an em dash
(.iz-table__empty), never a blank cell or "N/A".
Default, or compact. Nothing between.
data-density="compact" — dense admin/log views
Semantic tokens only.
Real tables scroll. They don't turn into cards.
.iz-table-wrap is a plain overflow-x: auto — a wide table
scrolls horizontally on a narrow viewport, keeping every native table behavior
(header association, screen-reader navigation) intact. Reshaping rows into stacked
mobile cards breaks that semantics for a cosmetic win; not done here.
Do / Don't.
<table> for tabular data · right-align numerals with
data-align="end" · reserve data-interactive for rows
that are genuinely one action · keep independent row controls independently
focusable.