📊 Table Structure and Semantics

Why Tables Exist

An HTML table represents two-dimensional data: values that only make sense at the intersection of a row and a column. A price is meaningless until you know which product (the row) and which store (the column) it belongs to. Tables encode exactly that kind of relationship, and they do it in a way that assistive technology can read aloud without losing the meaning.

💡 A useful analogy: Think of a spreadsheet. Every filled cell carries an invisible label from the top of its column and the start of its row. A well-built HTML table keeps those labels attached to the data, so a screen reader can announce "Laptop, Price, $999" instead of a lonely, contextless "$999".

Here's the map of what a table is made of — we'll walk through each branch:

The Building Blocks

Every table is assembled from four elements. Learn these and you can build anything:

Here is a minimal product table:

<table>
  <tr>
    <th>Product</th>
    <th>Price</th>
    <th>Stock</th>
  </tr>
  <tr>
    <td>Laptop</td>
    <td>$999.99</td>
    <td>15</td>
  </tr>
  <tr>
    <td>Smartphone</td>
    <td>$499.99</td>
    <td>42</td>
  </tr>
</table>

Read the markup out loud and the structure becomes obvious: the table contains rows, and each row contains cells. The first row uses <th> to name the columns; the rest use <td> for values. That grid maps directly onto a familiar layout:

Semantic Sections

A bare table works, but four extra elements turn it into a properly semantic table — one whose parts carry meaning for browsers and assistive tech.

Caption: the table's title

The <caption> must be the first child of the table. Screen readers announce it the moment the table is reached, giving instant context.

<table>
  <caption>Product Inventory — June 2026</caption>
  <!-- rows go here -->
</table>

thead, tbody, tfoot: logical groups

These three elements divide the table into a header group, a body of data, and a footer (often used for totals). Grouping this way improves styling, accessibility, and printing — browsers can repeat the header on every printed page.

<table>
  <caption>Product Inventory — June 2026</caption>

  <thead>
    <tr>
      <th scope="col">Product</th>
      <th scope="col">Price</th>
      <th scope="col">Stock</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <th scope="row">Laptop</th>
      <td>$999.99</td>
      <td>15</td>
    </tr>
    <tr>
      <th scope="row">Smartphone</th>
      <td>$499.99</td>
      <td>42</td>
    </tr>
  </tbody>

  <tfoot>
    <tr>
      <th scope="row">Total Stock</th>
      <td>—</td>
      <td>57</td>
    </tr>
  </tfoot>
</table>

The document tree that markup produces looks like this:

Row & Column Headers

Headers are what make a table readable. There are three common patterns.

Column headers (most common)

The top row labels each column. This is the default mental model of a table.

<tr>
  <th scope="col">Name</th>
  <th scope="col">Age</th>
  <th scope="col">City</th>
</tr>

Row headers

When each row is one record, the first cell of the row often labels it. Mark it as a header with scope="row".

<tr>
  <th scope="row">Laptop</th>
  <td>$999.99</td>
  <td>15</td>
</tr>

Both — the two-way grid

Schedules and comparison matrices use headers on both axes. The top-left cell sits at the intersection and is usually left empty.

Spanning Cells

Real data isn't always a perfect grid. Two attributes let a single cell stretch across neighbours.

colspan — stretch across columns

<tr>
  <th colspan="3">Product Information</th>
</tr>

That one header now sits above all three columns as a group title.

rowspan — stretch down rows

<tr>
  <td rowspan="2">Electronics</td>
  <td>Laptop</td>
  <td>$999.99</td>
</tr>
<tr>
  <!-- no category cell here — the one above spans into this row -->
  <td>Smartphone</td>
  <td>$499.99</td>
</tr>

Combining both builds a complex header structure. Here is a quarterly-sales table rendered from real semantic markup:

When to Use a Table

The single most important decision is whether your content is tabular at all. Use this flow to choose:

Hands-on Exercise

<table>
  <caption>Regional Sales — Q1 2026</caption>

  <thead>
    <tr>
      <th scope="col">Region</th>
      <th scope="col">Online</th>
      <th scope="col">In-store</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <th scope="row">North</th>
      <td>$12,000</td>
      <td>$8,000</td>
    </tr>
    <tr>
      <th scope="row">South</th>
      <td>$9,500</td>
      <td>$6,500</td>
    </tr>
    <tr>
      <th scope="row">New markets</th>
      <td colspan="2">Launching next quarter</td>
    </tr>
  </tbody>

  <tfoot>
    <tr>
      <th scope="row">Total</th>
      <td>$21,500</td>
      <td>$14,500</td>
    </tr>
  </tfoot>
</table>

Best Practices

A small, modern CSS baseline makes any semantic table readable:

table {
  width: 100%;
  border-collapse: collapse;
}
th, td {
  padding: 0.75rem;
  text-align: left;
  border: 1px solid var(--border-color, #ddd);
}
tbody tr:nth-child(even) {
  background: rgba(0, 0, 0, 0.03);
}
caption {
  caption-side: top;
  font-weight: 700;
  padding: 0.5rem;
}

Summary & Quiz

📚 Further Reading

• MDN — The Table element
• W3C WAI — Tables Tutorial
• HTML Living Standard — Tabular data

🚀 What's Next?

You can now build a structurally sound table. Next we'll make it truly inclusive — the Table Accessibility Features lesson digs into scope, the id/headers pairing, ARIA, and screen-reader testing.