Accessible data tables

Model answer.

<table>
  <caption>B.Tech fees per year, 2026</caption>
  <thead>
    <tr><th scope="col">College</th><th scope="col">Tuition</th><th scope="col">Hostel</th></tr>
  </thead>
  <tbody>
    <tr><th scope="row">College A</th><td>₹1,20,000</td><td>₹60,000</td></tr>
    <tr><th scope="row">College B</th><td colspan="2">₹1,75,000 (combined)</td></tr>
  </tbody>
</table>

• `<caption>`: the table's title, announced first by screen readers.
• `<thead>` / `<tbody>` / `<tfoot>`: group header, body and summary rows; they help styling, printing (headers repeat on each page) and assistive technology.
• `<th>` marks header cells; `scope="col"` or `scope="row"` says which cells it describes, so a screen reader can say "Hostel, College A, ₹60,000".
• `colspan` / `rowspan` let a cell span several columns or rows. Use them sparingly; complex merged tables are hard to navigate (very complex ones need headers/id).

Do not use tables for page layout; use CSS Grid or Flexbox. Tables are for tabular data: rows and columns where comparing across them is meaningful. On small screens, let a wide table scroll horizontally in a wrapper, rather than squashing it.