Tables

Course 1 · Ch 6

Tables

Structure, headers, and the basic accessibility considerations that make a table actually usable, not just visually gridded

HTML tables exist for one specific purpose: presenting genuinely tabular data — rows and columns of related values, like a spreadsheet. They were widely misused in the early web era for general page layout; this course treats that as firmly settled history — modern layout belongs entirely to CSS, covered in the separate CSS courses, and tables here are strictly for actual tabular data.

Basic Table Structure

<table>
  <tr>
    <th>Name</th>
    <th>Role</th>
  </tr>
  <tr>
    <td>Philip</td>
    <td>Admin</td>
  </tr>
</table>

Name	Role
Philip	Admin

<table>

The whole table

<tr>

Table row

<th>

Header cell

<td>

Data cell

thead, tbody, tfoot — Grouping Rows Semantically

For anything beyond a trivial table, explicitly grouping the header row(s), body rows, and any footer row improves both semantics and styling hooks for CSS.

<table>
  <thead>
    <tr>
      <th>Product</th>
      <th>Price</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Widget</td>
      <td>£9.99</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Total</td>
      <td>£9.99</td>
    </tr>
  </tfoot>
</table>

caption — Describing the Table's Purpose

<table>
  <caption>Q3 2026 Regional Sales</caption>
  // ...rows...
</table>

A genuine accessibility feature, not just a visual label — screen readers announce the caption before reading the table's content, giving context about what the data actually represents before diving into individual cells.

scope — The Single Most Important Accessibility Attribute for Tables

<th scope="col">Name</th>
<th scope="row">Philip</th>

scope="col" tells assistive technology this header applies to the entire column beneath it; scope="row" means it applies to the entire row alongside it. Without explicit scope, a screen reader has to guess at the relationship between headers and data cells — for anything beyond the simplest table, this can produce genuinely confusing or incorrect announcements.

A visually-styled table that uses divs instead of real table tags loses all of this for free

It's tempting, especially with modern CSS layout tools, to build something that "looks like a table" out of styled <div>s — but doing so discards every piece of built-in table semantics covered in this chapter: row/column relationships, scope announcements, and caption support all rely on the browser recognising genuine table markup. If the data is actually tabular, use real table tags.

Spanning Cells — colspan and rowspan

<tr>
  <th colspan="2">Combined Header Spanning 2 Columns</th>
</tr>

colspan makes a cell span multiple columns; rowspan makes a cell span multiple rows. Genuinely useful for grouped headers, but worth using sparingly — heavily merged tables can become harder, not easier, for both sighted users and screen readers to follow correctly.

Chapter 6 Quick Reference

table/tr/th/td — table, row, header cell, data cell — the four core building blocks
thead/tbody/tfoot — semantic row grouping, used for anything beyond a trivial table
caption — announced by screen readers before the table's content, real accessibility value
scope="col" / scope="row" — the single most important table accessibility attribute, clarifies header-to-cell relationships
colspan/rowspan — merge cells across columns/rows; use sparingly
Tables are for tabular data only — never for general page layout, which belongs to CSS
Next chapter: forms basics — input types, labels, and basic form structure