HTML Free Section Starter Challenge 30 min

5. Accessible Data Tables & Pricing Grids

Overview: Build structured, screen-reader friendly data tables with <table>, <thead>, <tbody>, and scope="col" attributes.

Concept & Syntax Guide

Data tables should present tabular data clearly. Always structure tables with `<thead>`, `<tbody>`, and `<tfoot>`. Use `<th scope="col">` or `<th scope="row">` to establish explicit column and row headers for assistive tech.

Hands-On Practice Exercise

Build a 3-Column Plan Pricing Table

Create a `<table>` with a `<thead>` containing headers "Plan", "Price", and "Access". Add a `<tbody>` with a row showing "Lifetime VIP", "₹1,999", and "All Access".

Target Output: Lifetime VIP

Need a hint? Click here to reveal

Hint: Check syntax carefully and make sure your code contains: Lifetime VIP

HTML Code Editor

1
2
3
4
5
6
7
8
9
10

<div class="pricing-table-wrapper">
  <!-- Build your table below -->
  <table>
    <thead>
      <tr>
        <th scope="col">Plan</th>
        <th scope="col">Price</th>
        <th scope="col">Access</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Lifetime VIP</td>
        <td>₹1,999</td>
        <td>All Access</td>
      </tr>
    </tbody>
  </table>
</div>