📊 Tables for Data, Not Layout! — Your 2025 HTML Guide

TL;DR: Use <table> when you’re presenting relational data—period. For page grids and side-by-side cards, turn to CSS Grid/Flexbox instead.

1 · Why This Distinction Still Matters

2 · When to Reach for <table>

• Financial reports, price matrices

• Schedules, timetables

• Statistical results, dashboards

• Comparisons (feature vs. feature)

• Never for multi-column footers, two-column forms, or pixel-perfect email-style positioning (that was 1999!).

3 · Anatomy of a Modern Data Table

<table>
  <caption>Quarterly Revenue (in USD)</caption>

  <thead>
    <tr>
      <th scope="col">Quarter</th>
      <th scope="col">North America</th>
      <th scope="col">APAC</th>
      <th scope="col">EMEA</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <th scope="row">Q1 – 2025</th>
      <td>3.2 M</td><td>2.4 M</td><td>1.9 M</td>
    </tr>
    <tr>
      <th scope="row">Q2 – 2025</th>
      <td>3.8 M</td><td>2.9 M</td><td>2.1 M</td>
    </tr>
  </tbody>

  <tfoot>
    <tr>
      <th scope="row">Total</th>
      <td colspan="3">16.3 M</td>
    </tr>
  </tfoot>
</table>

Key elements

4 · Accessibility & Screen-Reader Tips

1. Always use scopes or an id/headers map for complex tables.

2. Keep tables narrow—screen-readers move cell-by-cell; 20+ columns is torture.

3. Provide summary or download link (CSV) if the table is huge or interactive.

4. Make sortable/filterable tables keyboard-navigable (tabindex, aria-sort).

5 · Styling Data Tables with Modern CSS

table {
  width: 100%;
  border-collapse: collapse;
}

thead th {
  background: hsl(213 28% 17%);
  color: #fff;
  text-align: left;
  padding: .75rem 1rem;
  position: sticky;        /* sticky header */
  top: 0;
}

tbody td, tbody th {
  padding: .75rem 1rem;
  border-top: 1px solid hsl(210 14% 90%);
}

tbody tr:nth-child(even) { background: hsl(210 16% 96%); }

Pro tip: For zebra stripes, prefer tr:nth-child(even) to extra classes.

6 · Making Tables Responsive

6.1 Horizontal Scroll (simplest)

.table-wrapper {
  overflow-x: auto;
}

<table class="table-wrapper">…</table>

6.2 Stack on Mobile (2-column key/value)

@media (max-width: 600px) {
  table, thead, tbody, th, td, tr { display: block; }
  thead { display: none; }
  td[data-label]::before {
    content: attr(data-label) ': ';
    font-weight: 600;
  }
}

Then mark each <td>:

<td data-label="North America">3.2 M</td>

6.3 Turn Columns into Cards (CSS Grid)

For short datasets, ditch the table entirely on mobile:

@media (max-width: 600px) {
  tbody {
    display: grid;
    gap: 1rem;
  }
  tr {
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: #fff;
    border-radius: .75rem;
    padding: 1rem;
    box-shadow: 0 2px 5px hsl(210 14% 90%);
  }
}

7 · Interactive Tables

8 · Common Pitfalls & Fixes

9 · Export & Print-Friendly Tricks

@media print {
  thead { background: #000; color:#fff; }
  table { font-size: 12px; }
  a::after { content: \" (\" attr(href) \")\"; } /* append link URLs */
}

function tableToCSV(tableId) {
  const rows = [...document.querySelectorAll(`#${tableId} tr`)]
      .map(row => [...row.cells].map(c => `"${c.innerText}"`).join(','))
      .join('\\n');
  const blob = new Blob([rows], {type:'text/csv'});
  const link = Object.assign(document.createElement('a'), {
    href: URL.createObjectURL(blob),
    download: 'report.csv'
  });
  link.click();
}

10 · Wrap-Up Checklist ✅

• Use <table> only for data relationships

• Add <caption> and correct <th scope> usage

• Keep tables narrow or provide scroll/stacking solutions

• Ensure keyboard & screen-reader navigation

• Export large datasets for power users

Apply these guidelines and your tables will be lean, accessible, and future-proof—all while keeping layout responsibilities in CSS where they belong. Happy coding! 🎉

💡 Frequently Asked Questions (FAQ) – Tables for Data (Not Layout!)