HTML data table versus layout container: preserve relationships, not columns

Use it for a real task

The receipt queue has columns whose headers explain each cell, so it belongs in a table. The action links below are navigation, not another table row created to align them. CSS controls their visual layout without changing the data relationship.

<table>
  <caption>Receipts awaiting review</caption>
  <thead><tr><th scope="col">ID</th><th scope="col">Amount</th></tr></thead>
  <tbody><tr><th scope="row">R-47</th><td>73 credits</td></tr></tbody>
</table>
<nav aria-label="Receipt actions">
  <a href="/receipts/R-47">Open R-47</a>
</nav>

What the markup guarantees

A CSS grid can present data visually, but it will not supply native table header associations. Conversely, a table used to place a menu and footer creates false row and column relationships.

Cost and limits

Tables add DOM elements proportional to rows and columns. Large datasets need pagination or summarization; layout containers need CSS but should follow a meaningful source order.

Common Mistakes

• Do not use table markup to position an entire page.
• Do not replace a real data table with visually aligned divs without an equivalent relationship model.
• Use a caption and headers for meaningful data.

Connected lessons

• HTML data tables: name row and column relationships explicitly
• HTML landmarks: give navigation, main content, and page edges clear owners
• CSS box model and layout: size content without accidental overflow

Related: HTML data tables: name row and column relationships explicitly.