foundation

Lists and tables

Choose list and table markup for real relationships, including captions, headers, and scoped cells.

Lists express grouped items; tables express two-dimensional data relationships. Use `ol` when order changes meaning, `ul` for unordered groups, `dl` for name–value pairs, and `table` for real tabular data with `caption`, `th`, `scope`, and headers where useful.

					<table>
  <caption>Q1 sales by region</caption>
  <thead>
    <tr><th scope="col">Region</th><th scope="col">Revenue</th></tr>
  </thead>
  <tbody>...</tbody>
</table>

On interviews: choose semantics from data meaning, not from the desired visual layout.

Common pitfalls: tables for layout harm responsiveness and accessibility; div grids for tabular data force users to reconstruct relationships manually.

The trade-off is quick layout hacks versus durable semantics — div grids ship faster but cost accessibility and maintenance.

Checklist:

List tags for groups of items.
Tables for data grids only.
Add captions when they help orientation.
Connect headers to cells with `scope` or `headers`.