Chapter 9 — Tables

Learning Outcome

Display structured data in tables, including merged cells with colspan and rowspan.

← 08 - Images & Media | Next → 10 - Forms & User Input

9.1 When to Use Tables

Use Tables For

Tabular data: schedules, timetables, price comparisons, mark sheets
Data with rows AND columns that relate to each other

Don't Use Tables For

Page layout (use CSS Flexbox or Grid instead)
Navigation menus
This was common in the 1990s — it is bad practice today

9.2 Basic Table Structure

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Subject</th>
      <th>Score</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Arjun</td>
      <td>HTML</td>
      <td>95</td>
    </tr>
    <tr>
      <td>Priya</td>
      <td>CSS</td>
      <td>88</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="2">Class Average</td>
      <td>91.5</td>
    </tr>
  </tfoot>
</table>

Table Tags Reference

<thead>, <tbody>, <tfoot> are Optional but Recommended

They make the table semantically meaningful and allow CSS to style header/body/footer separately. Screen readers also use them to describe the table structure.

9.3 Table Caption

<table>
  <caption>Student Results — Term 2, 2025</caption>
  <thead>...</thead>
  <tbody>...</tbody>
</table>

9.4 Merging Cells

`colspan` — Merge Horizontally (across columns)

<table border="1">
  <tr>
    <th colspan="3">Student Full Information</th>
    <!-- This header spans 3 columns -->
  </tr>
  <tr>
    <td>First Name</td>
    <td>Last Name</td>
    <td>Age</td>
  </tr>
</table>

`rowspan` — Merge Vertically (across rows)

<table border="1">
  <tr>
    <td rowspan="2">Monday</td>  <!-- spans 2 rows -->
    <td>9:00 AM — HTML Class</td>
  </tr>
  <tr>
    <!-- No <td> for "Monday" column — rowspan covers it -->
    <td>10:00 AM — CSS Class</td>
  </tr>
</table>

Remove the Extra Cell!

When you use rowspan="2", the cell fills 2 rows — remove the <td> from the second row for that column. If you don't, the table layout breaks.

Combined colspan + rowspan Example

<table border="1">
  <caption>Weekly Timetable</caption>
  <thead>
    <tr>
      <th>Day</th>
      <th>Period 1</th>
      <th>Period 2</th>
      <th>Period 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Monday</td>
      <td>HTML</td>
      <td colspan="2">Lab Session</td>  <!-- spans 2 periods -->
    </tr>
    <tr>
      <td rowspan="2">Tuesday</td>  <!-- spans Tuesday + Wednesday -->
      <td>CSS</td>
      <td>JavaScript</td>
      <td>Project Work</td>
    </tr>
    <tr>
      <!-- rowspan covers Tuesday cell -->
      <td>Review</td>
      <td>Quiz</td>
      <td>CSS Advanced</td>
    </tr>
  </tbody>
</table>

9.5 Accessibility in Tables

<!-- scope attribute: tells screen readers what the header applies to -->
<thead>
  <tr>
    <th scope="col">Name</th>    <!-- column header -->
    <th scope="col">Score</th>
  </tr>
</thead>
<tbody>
  <tr>
    <th scope="row">Arjun</th>  <!-- row header -->
    <td>95</td>
  </tr>
</tbody>

9.6 Complete Example — Mark Sheet

<table border="1" cellpadding="8" cellspacing="0">
  <caption>Class 10 — Final Examination Results 2025</caption>
  <thead>
    <tr>
      <th scope="col">Student</th>
      <th scope="col">Maths</th>
      <th scope="col">Science</th>
      <th scope="col">English</th>
      <th scope="col">Total</th>
      <th scope="col">Grade</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Arjun Kumar</th>
      <td>92</td>
      <td>88</td>
      <td>85</td>
      <td>265</td>
      <td>A+</td>
    </tr>
    <tr>
      <th scope="row">Priya Nair</th>
      <td>78</td>
      <td>82</td>
      <td>90</td>
      <td>250</td>
      <td>A</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="4">Class Average</td>
      <td>257.5</td>
      <td>A</td>
    </tr>
  </tfoot>
</table>

🚀 Recommended Projects

Project 1 — Student Mark Sheet

Create a marks table for 5 students across 5 subjects.

Use <thead>, <tbody>, <tfoot>
Use colspan for the totals footer row
Add a <caption> title
Include a "Grade" column

Project 2 — Weekly School Timetable

Build a full school timetable (Mon–Fri, 8 periods/day).

Use rowspan for lunch break spanning all days
Use colspan for lab sessions spanning 2 periods
Use <th scope="col"> for day headers and <th scope="row"> for period numbers

📌 Quick Recall

<table> → <thead> + <tbody> + <tfoot> → <tr> → <th> / <td>
<th> = header cell (bold, centered) | <td> = data cell
colspan="2" = cell spans 2 columns (horizontal merge)
rowspan="2" = cell spans 2 rows (vertical merge) — remove the extra <td>!
<caption> = table title
Don't use tables for layout — only for tabular data