Tables and Structured Data

Proper table markup for data, not layout

When to Use Tables

Tables are for tabular data—reports, schedules, comparisons. Use CSS for layout and positioning.

Semantic Table Structure

<table>
  <caption>Monthly Sales</caption>
  <thead>
    <tr>
      <th scope="col">Month</th>
      <th scope="col">Revenue</th>
      <th scope="col">Growth</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">January</th>
      <td>$12,400</td>
      <td>8%</td>
    </tr>
  </tbody>
</table>

Accessibility Tips

✓ Use <caption> to describe the table.
✓ Use <th scope="col"> and <th scope="row"> for headers.
✓ Keep tables readable on mobile (wrap in a scroll container).

Common Table Mistakes

❌ Layout Table

Using tables to build page layouts makes maintenance and accessibility harder.

✓ Data Table

Use tables only for data that belongs in rows and columns.