▦ Intermediate HTML

Tables

⏱ 1 hr2 topicsLive playground

🎯 By the end: You can build a table with proper header cells and a caption, and you understand that tables are for data, not page layout.

Tables show up wherever data lines up in rows and columns: price lists, timetables, scoreboards. They have a few moving parts, but the structure is logical once you see it. We'll also clear up the most important myth about tables.

1The parts of a table

A table is built from a handful of nested elements:

Element	Role
`<table>`	The whole table.
`<tr>`	A table row.
`<th>`	A header cell (bold, and announced as a header by screen readers).
`<td>`	A normal data cell.
`<caption>`	A title for the table — the first child of `<table>`.

Group rows with <thead> (header rows) and <tbody> (the data) for clarity and styling.

<table>
  <caption>Class timetable</caption>
  <thead>
    <tr><th>Day</th><th>Subject</th></tr>
  </thead>
  <tbody>
    <tr><td>Mon</td><td>Maths</td></tr>
  </tbody>
</table>

Build a small table

HTML

CSS

Live preview

What's happening: The <th> cells are the column headers (note they render bold). Each <tr> is a row; each <td> a cell. Add another <tr> in the <tbody> to extend the table.

Key points

<table> holds rows (<tr>); rows hold header cells (<th>) and data cells (<td>).
<caption> titles the table and should be its first child.
Group rows with <thead> and <tbody>.

2Accessible tables — and the layout myth

Use <th> for header cells, not styled <td>. Screen readers use them to announce "Day: Monday, Subject: Maths" instead of reading a wall of disconnected values. For complex tables, add scope="col" or scope="row" to say which way a header applies.

The big myth: years ago people built entire page layouts with tables. Do not do this. Tables are for tabular data only. For page layout — sidebars, columns, grids — you use CSS Flexbox and Grid (coming up in the CSS track). Using a table for layout breaks screen readers and makes pages rigid on mobile.

On small screens, wrap a wide table in a container with overflow-x: auto so it can scroll sideways instead of breaking the page.

Key points