LESSON 12

Tables

Learning objective: Display rows and columns of data with table elements.

Understand

Tables are for showing data in rows and columns.

A <table> contains rows (<tr>). Inside rows you use <th> for header cells and <td> for data cells. Use tables for real tabular data — not for page layout.

Analogy: A table is like a spreadsheet: headers name the columns and each row is a record.

See It in Action

A two-column table:

<table>
  <tr><th>Name</th><th>Score</th></tr>
  <tr><td>Ada</td><td>95</td></tr>
</table>
How it works: The first <tr> holds <th> header cells; the next <tr> holds <td> data cells lined up under those headers.

Try It Yourself

  1. Build a table with headers 'Name' and 'Age'.
  2. Add two rows of data.
  3. Confirm the columns line up under the headers.

Quick Quiz

Which element is a table header cell?

Challenge

Create a table listing three items with two columns of information each.

Success condition: Your table has a header row and at least two data rows that align correctly.