Lesson 07 · Structure and meaning

Tables

Some content is a grid: prices, timetables, results. HTML tables mark it up so that browsers draw the grid and screen readers can tell which header each value belongs to. Follow a seven-line coffee menu as a browser reads it, row by row, and watch the table grow: caption, header cells, data cells, a cell that spans two columns. Then see what the browser adds on its own, and why real header cells matter.

10 min11 steps5 questionsIntermediate

Fig 7 · Interactive

Loading figure…

or ← →

Check yourself

5 quick questions

Pick an answer to see why. Your score saves with your progress.

01Which content belongs in an HTML table?

Tables are for tabular data, where each value means something because of its row and its column. Placing parts of a page side by side is layout, which is CSS's job.

02How do you make a new column in an HTML table?

There is no column tag that holds cells. The first cell of every row lands in column 1, the second in column 2, and so on. (A <col> element exists, but only to style columns; it holds no cells.)

03What is the difference between <th> and <td>?

Browsers draw th bold and centred, but the real difference is meaning: assistive technology uses th cells to tell the listener which header each value belongs to.

04A row holds one cell written as <td colspan="2">Hot only</td> in a table with two columns. What happens?

colspan sets how many columns a cell covers. With colspan="2" the one cell fills the whole row of a two-column table.

05You wrote <tr> rows straight inside <table>, with no <tbody>. What does the browser do?

Browsers add a tbody to every table while they read the HTML. Write thead and tbody yourself when you want to group the header rows apart from the body rows.

Key terms

Glossary

Tabular data: Information set out in rows and columns, where each value is understood by its row and its column.
<table>: The element that holds a whole table, from <table> to </table>.
<caption>: The table's title. It must be the first thing inside <table>; browsers draw it centred above the grid.
<tr>: Table row: holds the cells of one row, from left to right.
<th>: Table header: a header cell that labels other cells. Drawn bold and centred by default.
<td>: Table data: an ordinary data cell holding one value.
colspan: An attribute on th or td that makes the cell span that many columns, such as colspan="2".
scope: An attribute on th that says which cells it heads: col for its column, row for its row (also colgroup and rowgroup).

Fine print

Notes and sources

The figure draws faint lines between the cells so you can see the grid. Browsers draw no borders by default; a CSS rule such as th, td { border: 1px solid; } adds them.
Each row is on one line here to keep the file short. You can also put every cell on its own line; the table comes out the same.
Without scope, the HTML standard treats a th as a column header when its row holds no data cells, as in the top row here.
Browsers add tbody while reading the file, so CSS such as tbody tr { ... } matches rows you wrote straight inside table.

Quiz Unlocks after the last step.