Summary - Comparison table

Write a product comparison table applying all table techniques.

Five techniques in summary

In this group we took tables further. We combined five techniques:

<colgroup> and <col> bridge shared styling to columns
scope and headers+id link headers for accessibility
<caption> and aria-* introduce the table
a wrapper div enables small-screen fit
caption, colgroup, thead, tbody, tfoot form the visual order

Now you will merge all of them in one comparison table.

Exercise Write a full comparison table

Write a comparison table that applies all table techniques. Put a non-empty <caption> inside <table>. After caption add a <colgroup> with one <col> and one <col span="2">. Then in <thead> place three <th>; give each scope="col" and an id. In <tbody> add at least two rows; each row's first cell is a <th> with scope="row", the other cells are <td> whose headers attribute points to the relevant th ids. End the table with <tfoot>.

Show example solution

<table>
  <caption>Phone Comparison — 2026</caption>
  <colgroup>
    <col>
    <col span="2">
  </colgroup>
  <thead>
    <tr>
      <th scope="col" id="feature">Feature</th>
      <th scope="col" id="model-a">Model A</th>
      <th scope="col" id="model-b">Model B</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row" id="weight">Weight</th>
      <td headers="weight model-a">180 g</td>
      <td headers="weight model-b">195 g</td>
    </tr>
    <tr>
      <th scope="row" id="screen">Screen</th>
      <td headers="screen model-a">6.1 in</td>
      <td headers="screen model-b">6.7 in</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th scope="row" id="result">Result</th>
      <td headers="result model-a">Light</td>
      <td headers="result model-b">Wide screen</td>
    </tr>
  </tfoot>
</table>

Test yourself

Match each technique to its role

colgroup

Column styling bridge
headers+id

Complex header binding
aria-describedby

Links table to description
Wrapper div

Small-screen scrolling
What is the best practice for a column header in a comparison table?
- Give the th scope="col" and an id
- Give the td scope="col"
- Skip thead
- Drop colgroup
Show answer

Give the th scope="col" and an id — Correct. Giving the th both scope="col" and an id maximises accessibility.

Next lesson: Project: Data table

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies