Lesson 7 — Fundamentals

Tables

HTML tables display tabular data in rows and columns, using dedicated elements for headers, body rows, and cells so the relationships between data points stay clear.

Building a Table

A table is built from <table>, with rows as <tr>, header cells as <th>, and data cells as <td>. Wrapping the header row in <thead> and the data rows in <tbody> is good practice and helps both styling and accessibility.

HTML — A data table 
<table>
  <thead>
    <tr>
      <th>Course</th>
      <th>Duration</th>
      <th>Level</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>HTML</td>
      <td>4 weeks</td>
      <td>Beginner</td>
    </tr>
    <tr>
      <td>C++</td>
      <td>10 weeks</td>
      <td>Intermediate</td>
    </tr>
  </tbody>
</table>

Common Mistakes

  • Using tables for page layout instead of tabular data — layout should be handled with CSS, not tables.
  • Forgetting <th> for header cells, which removes important semantic meaning for screen readers.
  • Mismatched numbers of <td> cells across rows, which makes columns misalign.
  • Leaving out the scope attribute on header cells in complex tables, making it harder for assistive technology to associate data with the correct header.

Professional Tip

For simple tables, always use <th> for the header row rather than a styled <td>. It's a small change that makes tables far more usable for people relying on screen readers.

Your Turn

Create a table listing 4 of your favourite books with columns for Title, Author, and Year Published.

Mini Quiz

Which element should be used for a table's header cells?