Tables

Tables are for tabular data. Learn the correct structure (thead/tbody/tfoot), spans, and the small extras that make tables accessible.

tabletheadtbodya11ycolspan

Duration

⏱ About 1 hour

Level

📊 Beginner

Prerequisite

🎯 html-01

OUTCOME

Construct semantically correct, accessible data tables

What you'll learn

1Build tables with thead, tbody, and tfoot
2Use th with scope to label rows and columns
3Span cells with colspan and rowspan
4Caption a table with <caption>

1. A Basic Table

html

<table>
  <caption>2024 sales by quarter</caption>
  <thead>
    <tr>
      <th scope="col">Quarter</th>
      <th scope="col">Revenue</th>
      <th scope="col">Growth</th>
    </tr>
  </thead>
  <tbody>
    <tr><th scope="row">Q1</th><td>$1.2M</td><td>+8%</td></tr>
    <tr><th scope="row">Q2</th><td>$1.5M</td><td>+12%</td></tr>
    <tr><th scope="row">Q3</th><td>$1.8M</td><td>+20%</td></tr>
  </tbody>
  <tfoot>
    <tr><th scope="row">Total</th><td>$4.5M</td><td>+13%</td></tr>
  </tfoot>
</table>

💡

scope="col" and scope="row" tell screen readers which header applies to which cells.

2. Spanning Cells

html

<tr>
  <td colspan="2">Spans two columns</td>
  <td>Single</td>
</tr>
<tr>
  <td rowspan="2">Spans two rows</td>
  <td>A</td>
  <td>B</td>
</tr>

3. Tables vs Layout

⚠️

Tables are for tabular data only. Never use them for page layout — use Flexbox or Grid instead.

Example code / lecture materials

All lecture materials and example code are openly available on GitHub.

View on GitHub ↗