Real-World Structured Data Examples

The best way to cement table skills is to read complete, realistic examples. Each one below uses everything from this module: proper structure, section elements, header cells with scope, and semantically appropriate content.

Example 1: Class schedule

A weekly schedule is a classic table use case. Each cell only makes sense when you know both the day (column) and the time slot (row).

<table>
  <thead>
    <tr>
      <th scope="col">Time</th>
      <th scope="col">Monday</th>
      <th scope="col">Wednesday</th>
      <th scope="col">Friday</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">9:00 AM</th>
      <td>HTML Basics</td>
      <td>HTML Basics</td>
      <td>—</td>
    </tr>
    <tr>
      <th scope="row">11:00 AM</th>
      <td>—</td>
      <td>CSS Foundations</td>
      <td>CSS Foundations</td>
    </tr>
    <tr>
      <th scope="row">2:00 PM</th>
      <td>JavaScript</td>
      <td>—</td>
      <td>JavaScript</td>
    </tr>
  </tbody>
</table>

Notice:

Column headers (days) use scope="col"
Row headers (times) use scope="row"
Empty cells use — rather than being left blank

Example 2: Pricing comparison table

A pricing table compares features across plans. Each cell answers “does this plan include this feature?”

<table>
  <thead>
    <tr>
      <th scope="col">Feature</th>
      <th scope="col">Free</th>
      <th scope="col">Pro</th>
      <th scope="col">Team</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Storage</th>
      <td>5 GB</td>
      <td>50 GB</td>
      <td>500 GB</td>
    </tr>
    <tr>
      <th scope="row">Custom domain</th>
      <td>No</td>
      <td>Yes</td>
      <td>Yes</td>
    </tr>
    <tr>
      <th scope="row">Team members</th>
      <td>1</td>
      <td>1</td>
      <td>Up to 25</td>
    </tr>
    <tr>
      <th scope="row">Priority support</th>
      <td>No</td>
      <td>No</td>
      <td>Yes</td>
    </tr>
  </tbody>
</table>

Example 3: Data summary with `<tfoot>`

A table tracking quantities often has a totals row. <tfoot> marks it as semantically distinct from the data rows.

<table>
  <thead>
    <tr>
      <th scope="col">Trail</th>
      <th scope="col">Distance (mi)</th>
      <th scope="col">Elevation Gain (ft)</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Pine Ridge Loop</th>
      <td>4.2</td>
      <td>320</td>
    </tr>
    <tr>
      <th scope="row">Summit Approach</th>
      <td>8.7</td>
      <td>1,850</td>
    </tr>
    <tr>
      <th scope="row">Valley Floor Trail</th>
      <td>2.1</td>
      <td>80</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Total</td>
      <td>15.0</td>
      <td>2,250</td>
    </tr>
  </tfoot>
</table>

The <tfoot> row is distinguishable in the HTML even without CSS, and a screen reader will announce it differently from the body rows.

Exercise

Open index.html in VS Code.

This is the capstone exercise for Module 05. Review the table you have been building across Lessons 01–03 and make sure it is complete:

Checklist:

Structure — The table uses <table>, <thead>, <tbody>, and optionally <tfoot>.
Rows — Every row is a <tr>. Each row has the same number of cells.
Headers — Column headers use <th scope="col">. Row headers (if any) use <th scope="row">.
Data cells — All non-header cells use <td>.
Placement — The table is inside an appropriate <section> inside <main>.
Content fit — The data genuinely requires both rows and columns to make sense.

If your table already passes this checklist, you are done. If anything is missing, add it now.

Save and open index.html in your browser. The table will render without styling — borders, colors, and spacing all come from CSS, which you will learn in the next course.

Module 05 Recap

<table> → <thead> / <tbody> / <tfoot> → <tr> → <th> / <td> is the complete structural hierarchy.
<th> marks header cells. <td> marks data cells.
scope="col" links a header to its column. scope="row" links a header to its row.
<thead>, <tbody>, <tfoot> organize rows into semantic groups. They do not change visual appearance by default.
Tables are for data with row-and-column relationships. They are never for page layout.