CodeBlanks Logo Icon CodeBlanks
Login Register

Project final - Data table

HTML course · Intermediate · Lesson 28/67

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:

  1. After <caption> and before <thead>, add a <colgroup> with four <col> elements inside.
  2. 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

  1. 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.

  2. Add colspan to the th cell

    <th scope="row" ____>Total</th>
    Show answer 
    <th scope="row" colspan="2">Total</th>

  3. Match each table attribute to its purpose

    scope
    Cell scope
    colspan
    Column merge
    rowspan
    Row merge
    headers
    Cell-header link

All lessons in Intermediate

1 Advanced text elements

  1. Abbr, cite and time
  2. Code, kbd and samp
  3. Sub and sup
  4. Pre and code block
  5. Wbr, bdi, bdo
  6. Summary - Technical doc

2 Advanced links

  1. Download links
  2. Ping and rel types
  3. Hreflang and canonical
  4. Link accessibility
  5. Button vs link
  6. Summary - Multilingual menu

3 Project: Landing page

  1. Project: Product landing page
  2. Hero section
  3. Feature list
  4. Pricing table
  5. Project final - Landing

4 Advanced tables

  1. Col and colgroup
  2. Scope and headers
  3. Table accessibility
  4. Responsive tables
  5. Table visual structure
  6. Summary - Comparison table

5 Project: Data table

  1. Project: Data table
  2. Header and caption
  3. Body data
  4. Summary row
  5. Project final - Data table

6 Advanced form elements

  1. Fieldset and legend
  2. Datalist and output
  3. Progress and meter
  4. Input attributes
  5. Autocomplete and inputmode
  6. Summary - Survey form

7 Form validation

  1. Required and pattern
  2. Min, max and step
  3. Minlength and maxlength
  4. Type-based validation
  5. Novalidate and formnovalidate
  6. Summary - Registration validation

8 Project: Contact form

  1. Project: Contact form
  2. Form skeleton
  3. Person fields
  4. Message and subject
  5. Project final - Contact form

9 Semantic layout

  1. Header structure
  2. Main content
  3. Sidebar and aside
  4. Footer structure
  5. Sectioning rules
  6. Summary - Magazine page

10 Accessibility basics

  1. ARIA basics
  2. Visually hidden heading
  3. Skip link
  4. Form accessibility
  5. Table accessibility
  6. Summary - Accessible card

11 Project: Site skeleton

  1. Project: Multi-page site skeleton
  2. Consistent header/footer
  3. Home page
  4. About and contact
  5. Project final - Site skeleton

12 Intermediate final

  1. Challenge - Advanced text
  2. Challenge - Accessible table
  3. Challenge - Validated form
  4. Challenge - Semantic layout
  5. Challenge - Intermediate capstone