Frontend Master

JavaScript Curriculum

Tables
+50 XP

Tables

easy
~28 min·50 XP

The coffee shop wants a price comparison table showing all drinks across hot, iced, and blended versions — with a merged header and row categories. Let's build it properly.

Tables

HTML tables are for one thing: tabular data — information that has a natural row-and-column structure. Price lists, schedules, comparison charts, sports results. They are not for page layout (that's CSS Grid and Flexbox's job).

The Table Element Family

A well-structured table uses six elements working together:

table-anatomy.html
Click any part
<caption>
<thead> / <th>
<tbody><td>
<tbody><td>
<tfoot>
<tbody>

Groups the body rows. A table can have multiple <tbody> elements to group related rows (e.g. by category).

Example
<tbody>
  <tr><td>Espresso</td><td>£2.50</td></tr>
</tbody>
💡Always use thead, tbody, tfoot
You can write a table with just tr and td, and it will work visually. But thead, tbody, and tfoot give browsers, screen readers, and CSS hooks to treat each section differently. Browsers repeat thead on every printed page. CSS can style sections independently. Always use them.

Spanning Cells — colspan and rowspan

Real-world tables have merged cells. HTML handles this with two attributes:

  • colspan="n" — a cell spans n columns horizontally
  • rowspan="n" — a cell spans n rows vertically
colspan-rowspan.html

Every cell is 1×1. No spanning.

DrinkSizePrice
EspressoSmall£2.50
LatteMedium£3.50
CappuccinoLarge£4.00
Key HTML
<th>Drink</th>
<th>Size</th>
<th>Price</th>
⚠️Remove the cells you span over
When a cell uses colspan=2, remove one of the cells in that row — the spanning cell takes its place. If you forget, the row will have too many cells and the table will break visually.

Making Tables Accessible

A table without accessibility markup is a confusing grid for screen reader users. Three attributes fix this:

table-accessibility.html
✓ Good practice
What it does

Gives the table a visible, programmatic title

Screen reader impactScreen reader announces "Monthly Sales table" before any cell
Code
<table>
  <caption>Monthly Coffee Sales</caption>
  ...
ℹ️Tables are never for layout
Before CSS Grid existed, developers used tables to position content in columns. Never do this. It breaks reading order for screen readers, makes responsive design nearly impossible, and is a WCAG failure. Use CSS Grid or Flexbox for layout — always.

Your Challenge

Build a complete, accessible coffee menu price table with a caption, scoped headers, merged cells, and a footer row.

Challenge

Build a coffee menu table with a caption, a thead containing column headers with scope='col', a tbody with at least 3 drink rows, one cell using colspan to span two columns, and a tfoot row showing a note or total.

tabletheadtbodytfoottrthtdcolspanrowspanscopecaptionaccessibility
Tables | Nexus Learn