Table visual structure

Clarify table structure with helper markup.

Logical sections of a table

An HTML table splits into logical sections: <thead> holds the header row, <tbody> the main data, and <tfoot> the summary or totals row.

These three sections arrange the table both visually and for accessibility. <tfoot> may technically sit right after <thead>; but the most common place is after <tbody>, at the end of the table. This lesson follows that order.

Visual order

The visual order of a table is: first <caption>, then <colgroup>, then <thead>, <tbody> and finally <tfoot>.

<caption> must always be the first child of the table; otherwise screen readers cannot tie the title to the table. <colgroup> sits after <caption> and before <thead>. This order matches both the HTML standard and what users expect to see.

Exercise Build the ordered visual structure of a table

Set up the visual order of a table. Inside <table> add in this order: a non-empty <caption>, a <colgroup> with at least one <col>, <thead> with <th scope="col">, <tbody> with <td>, and finally <tfoot> with <td>.

Show example solution

<table>
  <caption>Quarterly Balance</caption>
  <colgroup>
    <col>
    <col>
  </colgroup>
  <thead>
    <tr>
      <th scope="col">Item</th>
      <th scope="col">Amount</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Revenue</td>
      <td>$1.2M</td>
    </tr>
    <tr>
      <td>Costs</td>
      <td>$0.8M</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Balance</td>
      <td>$0.4M</td>
    </tr>
  </tfoot>
</table>

Test yourself

Where is tfoot most often placed?
- Before caption
- After tbody, at the end of the table
- Outside the table
- Inside colgroup
Show answer

After tbody, at the end of the table — Correct. tfoot usually sits after tbody, at the end of the table.

What comes right after caption?

<table>
  <caption>Order summary</caption>
  ____>
    <col>
    <col>
  </colgroup>
  <thead>...</thead>
</table>

Show answer

<table>
  <caption>Order summary</caption>
  <colgroup>>
    <col>
    <col>
  </colgroup>
  <thead>...</thead>
</table>

Match each item to its place

caption

First child
colgroup

After caption
thead

After colgroup
tfoot

At the end

Next lesson: Summary - Comparison table

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies