Project final - Data table

Complete the table with colgroup and accessibility, then document it.

Column layout: colgroup and col

colgroup groups one or more columns; you place col elements inside it. Each col stands for one column. This gives a shared hook for column widths or styles. colgroup sits after caption and before thead. In this lesson we'll add four col elements, one per column.

Merging cells: colspan and rowspan

colspan says how many columns a cell spans horizontally; rowspan says how many rows it spans vertically. For example colspan="2" merges two columns. In more complex tables you can use the headers attribute to link cells to header ids; but for simple tables scope is enough. In this lesson we'll merge the totals cell with colspan.

Exercise Add colgroup and merge the totals cell with colspan

Take the table from the previous lesson and make two changes:

After <caption> and before <thead>, add a <colgroup> with four <col> elements inside.
On the <th scope="row">Total</th> cell inside <tfoot>, add colspan="2" and remove the — <td> right after it. Now "Total" spans two columns (Month and Product); the row has th + two td.

Show example solution

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Monthly Sales Report</title>
  </head>
  <body>
    <table>
      <caption>Monthly Sales Report — 2026</caption>
      <colgroup>
        <col>
        <col>
        <col>
        <col>
      </colgroup>
      <thead>
        <tr>
          <th scope="col">Month</th>
          <th scope="col">Product</th>
          <th scope="col">Units</th>
          <th scope="col">Revenue</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th scope="row">Jan</th>
          <td>Headphones</td>
          <td>320</td>
          <td>$32,000</td>
        </tr>
        <tr>
          <th scope="row">Feb</th>
          <td>Stylus</td>
          <td>280</td>
          <td>$28,000</td>
        </tr>
        <tr>
          <th scope="row">Mar</th>
          <td>Keyboard</td>
          <td>410</td>
          <td>$41,000</td>
        </tr>
        <tr>
          <th scope="row">Apr</th>
          <td>Mouse</td>
          <td>440</td>
          <td>$44,000</td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <th scope="row" colspan="2">Total</th>
          <td>1,450</td>
          <td>$145,000</td>
        </tr>
      </tfoot>
    </table>
  </body>
</html>

Project complete

Project complete! You now have a full accessible data table:

caption, colgroup, thead, tbody, tfoot sections
scope on every th cell
colspan merging the totals cell
colgroup for column layout

You can reuse this structure for real reports, financial summaries, and comparison tables. Accessible design isn't just for screen reader users — it makes tables clearer for everyone.

Test yourself

Where does colgroup go inside a table?
- Before caption
- After caption, before thead
- After tbody, before tfoot
- After </table>
Show answer

After caption, before thead — Correct. colgroup sits after caption and before thead.

Add colspan to the th cell

<th scope="row" ____>Total</th>

Show answer

<th scope="row" colspan="2">Total</th>

Match each table attribute to its purpose

scope

Cell scope
colspan

Column merge
rowspan

Row merge
headers

Cell-header link

Next lesson: Fieldset and legend

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies