HTML · Module 07 · Lesson 32 of 54

Standard Data Tables

What is a Data Table?

Think of a spreadsheet sheet or a printed bus schedule. It's a grid made of rows and columns, where the top row contains headers (like "Time", "Destination") and the cells underneath contain matching data values.

In HTML, we build data tables using:

<table>: The outer container.

<tr> (Table Row): Wraps a single horizontal row of cells.

<th> (Table Header): Renders a header cell (bold and centered by default).

<td> (Table Data): Renders a standard data cell.

Why does it matter?

Tables are designed specifically for tabular data—information that makes sense when structured in rows and columns. Never use tables to build the layout of your entire page (like headers or sidebars), as that ruins accessibility!

How to write it

A table is structured row-by-row:

<table>
  <tr>
    <th>City</th>
    <th>Pop</th>
  </tr>
</table>

City

Pop

Common Mistakes

Mismatched columns: If row 1 has 3 cells, but row 2 has only 2 cells, your table grid will look broken and misaligned. Make sure each row contains the same number of cells!

Quick Reference

<table> — Defines a table grid.

<tr> — Defines a table row.

<th> — Table header cell (bold).

<td> — Table data cell (normal).

Your Task

Create a `<table>` with a row `<tr>` containing two headers: `<th>` 'City' and `<th>` 'Pop'.

index.html

Type code above to start the lesson.

Live Preview