HTML Tables Explained: table, thead, tbody, tr, th, td, scope, caption and colspan/rowspan

How HTML table markup fits together

An HTML table is built from a strict nesting order: <table> holds row groups (<thead>, <tbody>, <tfoot>), each row group holds rows (<tr>), and each row holds cells — <th> for headers and <td> for data. On top of that skeleton, <caption> names the table, scope tells assistive technology which cells a header governs, and colspan/rowspan let one cell cover several grid positions.

Tables are for tabular data — information with a real row-and-column relationship, like a price list or a schedule. They are not a layout tool. Once you accept that, the markup starts making sense, because every element exists to describe a relationship rather than to push pixels around.

The required order inside <table>

The HTML Standard defines the content of <table> in this order: an optional <caption>, then zero or more <colgroup> elements, then an optional <thead>, then either <tbody> elements or bare <tr> elements, then an optional <tfoot>. So <caption> must be the very first child, and in current HTML the footer goes last — the old habit of writing <tfoot> before <tbody> is a leftover from HTML 4, which required that order so browsers could paint the footer before the data finished downloading.

Writing <tr> elements as direct children of <table> is allowed by that content model, but the parser still wraps them in a generated <tbody>. Your CSS and JavaScript see that generated <tbody> in the DOM, which is a classic source of "my selector doesn't match" confusion. Write the row groups yourself.

Headers, caption, and scope

Use <th> for any cell that labels other cells — column headings across the top and row labels down the side. The default browser stylesheet renders <th> bold and centered, but the real payoff is semantic: a screen reader can announce the relevant header along with the cell value, so a lone number like "30" arrives with the label that makes it mean something.

The scope attribute makes that association explicit. The HTML Standard defines it on <th> only — MDN lists it among the deprecated attributes of <td> — and it takes four keywords: col, row, colgroup, and rowgroup. If you omit it, or supply a value that is not one of those four, the attribute falls into its Auto state, where the browser selects the related cells from context. One catch worth knowing: scope="colgroup" is only conforming when the header is actually anchored in a column group, which means the table needs real <colgroup> elements. See MDN's <th> reference for the full list.

<caption> gives the table an accessible name so a screen reader user can decide whether to read further. It must stay first in the markup; if you want it under the table visually, use the CSS caption-side: bottom.

Spanning cells

colspan stretches a cell across columns and must be a whole number from 1 to 1000 — zero is not allowed. rowspan stretches a cell down rows, may go up to 65534, and uniquely accepts 0, which the standard defines as "span all the remaining rows in this row group." Every spanned position consumes a slot, so the following rows need fewer cells. Ready to practice? Work through the questions below, then keep going with the D276 practice sets.

A worked example

Here is a small table that uses every piece correctly. Read it as a grid: two header rows, two body rows, one footer row, three columns. The numbers are invented sample data, there only to give the cells something to hold.

<table>
  <caption>Quarterly sales by region</caption>
  <colgroup></colgroup>
  <colgroup span="2"></colgroup>
  <thead>
    <tr>
      <th scope="col" rowspan="2">Region</th>
      <th scope="colgroup" colspan="2">Quarter 1</th>
    </tr>
    <tr>
      <th scope="col">Units</th>
      <th scope="col">Revenue</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">North</th>
      <td>120</td>
      <td>$9,600</td>
    </tr>
    <tr>
      <th scope="row">South</th>
      <td>95</td>
      <td>$7,125</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th scope="row">Total</th>
      <td>215</td>
      <td>$16,725</td>
    </tr>
  </tfoot>
</table>

Notice the second header row contains only two cells. The Region header already claimed column 1 for both header rows through rowspan="2", so writing a third cell there would push the table one column wider than intended.

Why the <colgroup> elements are there

Most tutorials show scope="colgroup" on a spanning header in a table that has no <colgroup> at all. The HTML Standard is stricter than that: a <th> element's scope attribute must not be in the Column Group state if the element is not anchored in a column group, and column groups are created only by <colgroup> elements — nothing generates them implicitly. Row groups are the opposite case, since the parser supplies a <tbody> whether you write one or not, so scope="rowgroup" is always anchored.

That is why the example declares one column group for the Region column and a second, two-column group for the Quarter 1 pair. If you would rather not manage column groups, scope="col" on the spanning header is the simpler conforming choice: the Column state applies to subsequent cells in the same column or columns, so it still covers both columns the header stretches over.

Mistakes people actually make

• Bolding a <td> with CSS instead of using <th>. It looks identical and carries none of the meaning. Choose the element by role, then style it.
• Putting scope on <td>. The standard defines the attribute on <th> only, and MDN lists it as deprecated on <td>.
• Writing <tfoot> before <tbody>. Browsers forgive it, the content model does not.
• Omitting <tbody> and then wondering why table > tr never matches. The parser inserted a <tbody> between them.
• Reaching for the summary attribute. It is deprecated on <table>; use <caption>, or a paragraph next to the table, to describe the data.

How to reason about the tricky cases

When a span question looks confusing, sketch the grid on paper and cross off occupied squares row by row. A colspan only consumes slots in its own row; a rowspan reaches into the rows below and takes a slot from each. Count what is left, and the number of cells to write becomes obvious.

For scope, ask one question: which cells does this label describe? One column below it means col. One row beside it means row. A declared column group means colgroup. All the rows in a <tbody> means rowgroup. If a table is so layered that no single answer fits, that is the signal to switch to the id and headers pairing described in the MDN table accessibility guide — or, more often, to split one overloaded table into two simple ones, which is what the W3C's own tutorial recommends for genuinely complex data.

For the rest of the markup and accessibility topics in this course, see the D276 Web Development Foundations study guide.