Tables

4 min reading
7 min activity

Unit 2Links, Media, Tables, Forms and Semantic HTML

0 of 4 tasks doneup to 85 XP

Name the parts15 XPTo do
My study week30 XPTo do
Two columns wide10 XPTo do
Merge cells30 XPTo do

Some information fits best in rows and columns: a timetable, a price list, your study week. Today you build tables.

In this lesson

Build a data table with a caption, a header, a body and a footer.
Use <th> for header cells and <td> for data cells.
Merge cells with colspan and rowspan.

Remember

In Unit 1 a list was a box with items inside: <ul> holds <li>. A table works the same way, with one more level: the table holds rows, and each row holds cells.

Quick check: which tag is one item of a list?

<li>, the list item. In a table, the cell plays this part.

The parts of a table

Tag	What it is
`<table>`	the whole table
`<caption>`	the title of the table
`<tr>`	one row ("table row")
`<th>`	a header cell: bold and centred
`<td>`	a data cell: one value
`<thead>`, `<tbody>`, `<tfoot>`	groups: the header rows, the data rows, the totals

Worked example: a monthly report

Title first
<caption> comes right after <table>. A table has only one caption.
Header row
In <thead>: one row with <th> cells that name the columns.
Data rows
In <tbody>: one <tr> per month, one <td> per value.
Total
In <tfoot>. "Total" names its row, so it is a <th scope="row">.

<table>
  <caption>Monthly visitors</caption>
  <thead>
    <tr><th>Month</th><th>Visitors</th></tr>
  </thead>
  <tbody>
    <tr><td>January</td><td>100</td></tr>
    <tr><td>February</td><td>110</td></tr>
  </tbody>
  <tfoot>
    <tr><th scope="row">Total</th><td>210</td></tr>
  </tfoot>
</table>

The groups help screen readers, CSS and printing: on paper, a long table can repeat its header on every page. With CSS, the header can also stay visible while you scroll. Each <td> is one cell, not a whole column.

Old and new

The slides show <table border="1">. Old pages draw lines like this. Today CSS draws them; in these exercises the CSS tab already does it. In the slides "Total" is a <td>; here it is a header cell for its row.

Placement

Name the parts

Required 15 XP

Build your own table

The lines of a table are all mixed up. Tap a line, then tap the place where it goes. When the order looks right, run the check.

Practice

My study week

Required 30 XP

Sofia (a fictional learner) keeps a table of her study minutes. The lines are mixed up. Put them in order: caption first, then the header, the data and the total. The CSS tab draws the lines.

Merge cells: colspan and rowspan

Sometimes one cell should be wider or taller, like "merge cells" in a spreadsheet. The slides call them tags, but colspan and rowspan are attributes of <th> and <td>. The number says how many columns or rows the cell covers.

The two examples from the course slides.

<th colspan="2">Weekly report</th>
<th rowspan="2">Lessons</th>

Quick check

Two columns wide

Required 10 XP

Practice

Merge cells

Required 30 XP

These two tables come from the course slides. Choose the missing values: the first title covers two columns, and "Lessons" covers two rows.

Key words

Row and column: A row goes across, a column goes down.
Cell: One box of a table: a header cell <th> or a data cell <td>.
Caption: The title of a table, first inside <table>.
Merge: Join cells into one bigger cell with colspan or rowspan.

In short

A table holds rows (<tr>), and rows hold cells (<th>, <td>).
Order: caption, thead, tbody, tfoot.
colspan merges across, rowspan merges down.
CSS draws the lines, not border="1".

Next time

Forms: your page starts to listen. You build a sign-up form with labels.

Sources

MDN Web Docs (2026). HTML table basics.
MDN Web Docs (2026). <caption>: The Table Caption element.
MDN Web Docs (2026). <th>: The Table Header element (scope).
W3C WAI (2024). Caption & Summary.

End of the lesson

This lesson: 0 of 95 XP

Code Cards in this lesson: 6

<table>
<caption>
<tr>
<th>
<td>
<thead>

Next: Forms 1: Labels and Input Types