HTML Tables

Tables display tabular data — information with rows and columns. Modern HTML gives tables powerful structure for both browsers and screen readers, and the most common beginner error is using tables for page layout (please don't).

Table anatomy

<table>
  <caption>Scriptly course pricing (2026)</caption>
  <thead>
    <tr>
      <th scope="col">Course</th>
      <th scope="col">Duration</th>
      <th scope="col">Price (₹)</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">HTML Essentials</th>
      <td>3 weeks</td>
      <td>Free</td>
    </tr>
    <tr>
      <th scope="row">Frontend Bootcamp</th>
      <td>12 weeks</td>
      <td>7,999</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th scope="row">Bundle</th>
      <td>15 weeks</td>
      <td>8,999</td>
    </tr>
  </tfoot>
</table>

Expected output: a titled table with a bold header row (Course / Duration / Price), two data rows, and a footer row.

The building blocks

scope: the accessibility hero

scope="col" tells a screen reader "this header describes the column below"; scope="row" says "this header describes the row beside it". Without it, a blind user navigating cell-by-cell hears numbers with no idea what they mean.

Merging cells

<!-- colspan: one cell spans columns -->
<tr>
  <td colspan="2">All prices include lifetime access</td>
</tr>

<!-- rowspan: one cell spans rows -->
<tr>
  <td rowspan="2">Weekend batch</td>
  <td>Saturday</td>
</tr>
<tr>
  <td>Sunday</td>
</tr>

Golden rule: a table with merged cells must still be read logically — test by outlining it on paper first.

Making tables responsive

Wide tables overflow on phones. Three proven strategies:

1. Wrapper + horizontal scroll (simplest): wrap the <table> in <div class="overflow-x-auto">.
2. Stacked layout with CSS: below 640 px, make each row a card and each cell show its header via data-label.
3. Split the data — sometimes two simpler tables beat one complex one.

Real-life use case

A pricing page comparison table: <caption> names the plans, <th scope="col"> headers name the features, <th scope="row"> headers name each feature row, and a <tfoot> row shows "Billed annually". Search engines can also parse table data into rich results.

Common mistakes

• Layout tables — using <table> to place a sidebar next to content. This was standard in 2003; CSS layout (semantic HTML5) replaced it decades ago.
• Skipping <caption> — a table without a title is context-free.
• Missing scope on header cells.
• Empty cells for spacing — use CSS borders/gaps instead.
• Nested tables — a performance and maintainability nightmare; avoid entirely.

Best practices

• Keep tables simple: header row + data rows covers 90% of cases.
• Use <tfoot> even when it visually appears last — screen readers announce totals properly.
• Add a visible caption or an aria-label on the wrapper for scrollable tables.

What's next?

Capture user input with Forms & Inputs — the most involved chapter in the series — or structure whole pages with Semantic HTML5.