HTML Table Headers

A sized, bordered grid still fails if nobody can tell which label belongs to which values. After table sizes taught you to fit the box, this lesson marks the meaning of labels: use th for header cells, optional scope to say column versus row, and caption when the whole table needs a title. Presentation (borders, width, padding) stays in CSS from earlier lessons. Structure and header meaning stay in HTML. Think of th as a nameplate, not as “bold text by default.”

Why header cells are not just bold td

Browsers may bold th by default, but the real win is semantics. Screen readers and other tools can announce column or row names when cells are real headers. Search and future styling hooks also benefit from honest markup. Painting a td with CSS font-weight: bold can look similar to sighted users and still leave assistive tech guessing. If the Tables lesson introduced th briefly, this session makes headers the main skill: when to use them, how scope helps, and when caption belongs above the grid.

Direct answer

Use th for header labels — top-of-column names, side-of-row names, or both in denser tables. Add scope="col" on column headers and scope="row" on row headers when the relationship should be explicit. Put a short <caption> inside the table when the dataset needs a shared title (“Team scores”, “Weekly inventory”). Keep data values in td. Do not rely on bold styling alone to fake headers. Keep one consistent cell count per row so headers still line up with the values they describe.

Column headers with a caption

Start with the most common pattern: a header row across the top, each label marked th scope="col", plus a caption that names the whole table. Data rows below use td for values. This pattern matches scoreboards, price lists, and class rosters where every column has a clear name.

Reading the column-header sample

• caption titles the table for everyone; it belongs inside table, usually first
• Each top label is th with scope="col" so tools know the header describes a column
• Quantity and aisle stay in td because they are data, not labels
• Three cells in every row keep headers aligned with values
• You can still style borders and width with CSS from prior lessons without changing these tags
• If caption looks odd in your browser, check that it is not placed outside the table element

Row headers for named records

Some tables read like a list of people or products where the first cell of each data row is a name that labels the rest of that row. Mark those name cells with th scope="row". You can combine a top header row (scope="col") with row headers (scope="row") in the same table. That mixed pattern is common in score sheets and comparison grids.

Reading the row-header sample

• Top row still uses th scope="col" for Points and Level (and Name)
• Ada and Lin are th scope="row" because they label their rows
• Points and Level remain td data cells
• caption again names the whole dataset
• Mixing col and row scopes is valid; do not mark every cell as th
• If a screen reader confuses a row, check that the name cell is really th and that scope="row" is present

Scope map (quick reference)

Use this map when you are unsure which scope value fits. Skip scope only on the simplest practice tables; prefer adding it once your grid has both a header row and row labels.

For this beginner course, master col and row first. colgroup and rowgroup appear in denser administrative tables later; you do not need them for weekly inventory demos. When in doubt, ask: “Does this label describe a whole column or a whole row?” Then pick col or row.

Practice in your editor

1. Build a three-column table about a small club (name, role, votes).
2. Add a caption that names the club table.
3. Mark the top labels with th scope="col".
4. Mark each person name with th scope="row".
5. Keep roles and votes as td.
6. View the page, then temporarily change a name cell back to td and notice how the meaning gets weaker even if bold CSS still looks “header-like.”
7. Restore th scope="row" and write one sentence under the table explaining why scope helps.
8. Optionally reuse border or width CSS from earlier lessons without changing the header markup.

Easy mistakes

• Styling td bold (or bigger) and calling it a header without using th
• Putting caption outside the table or using a plain paragraph above as if it were a caption
• Forgetting scope on mixed grids that have both a header row and row labels
• Marking every cell th, including pure numeric data
• Uneven cell counts so column headers no longer match the values below
• Using caption alone and leaving all cells as td (a title is not a substitute for header cells)
• Copying layout-table habits and stuffing page chrome into th/td again

Summary

• th marks real header cells; styled td is not enough
• scope="col" ties a header to a column; scope="row" ties it to a row
• caption titles the whole table for people and tools
• Keep data in td and keep row lengths consistent
• Borders and sizing stay in CSS; header meaning stays in HTML
• Next table lessons can add richer structure on top of honest headers