Command Palette

Search for a command to run...

Hectal
Phase 3Beginner4 of 8 in HTML

Tables

Build data tables the right way: rows and cells, headers, captions and sections, cells that span, and tables that screen readers and phones can use.

A table shows data that has two directions: rows and columns. A train timetable, a price list, exam marks, a comparison of phone plans. In this phase you'll build tables cell by cell, then give them the structure that lets a browser, a screen reader and a printer understand them.

You'll learn the four basic elements (table, tr, td, th), the sections that group rows (caption, thead, tbody, tfoot, colgroup, col), how cells stretch across rows and columns with colspan and rowspan, and how scope and headers tell assistive technology which header belongs to which cell.

Finally you'll learn when not to use a table (never for page layout) and how to keep wide tables usable on a phone. Styling tables with borders, stripes and sticky headers comes up again in the CSS course (/css), and reading table cells with JavaScript in the JavaScript course (/javascript).

0/4 · 0%
4 topics ~87 min 13 code blocks & diagrams
Start with the first topic
1
3.1

Table Basics

An HTML table is built row by row: <table> holds rows (<tr>), each row holds cells, and a cell is either a data cell (<td>) or a header cell (<th>) that labels other cells.

20 min 3 code practice

2
3.2

Table Structure

A well-built table has a <caption> that names it, row groups (<thead>, <tbody>, <tfoot>) that separate headers, data and totals, and optional <colgroup>/<col> elements that style whole columns.

19 min 3 code practice

3
3.3

Spanning Rows and Columns

colspan stretches a cell across several columns and rowspan stretches it down several rows; each spanning cell takes over grid slots, so you must remove the cells it replaces.

20 min 3 code practice

4
3.4

Accessible Tables and When Not to Use Them

Screen readers link each data cell to its headers; scope makes that link certain for simple tables and headers/id for complex ones. Use tables only for data, never for layout, and plan how a wide table behaves on a phone.

28 min 4 code practice

Practise this phase

Hands-on exercises: write the code, see your page live, and press Check to have it tested automatically.

1

Your first table

Build a table of three pets and the sound each one makes.

Beginner
2

Give the order table its structure

This snack order is a flat table with a heading above it. Give it proper structure:

Beginner
3

Merge cells in a timetable

In this timetable, Lab is one double lesson on Tuesday at 9:00 and 10:00, and Lunch covers all three days at 11:00.

Beginner
4

Make the marks table accessible

This marks table looks fine, but a screen reader can't tell which header goes with which mark.

Intermediate
5

Build a responsive, accessible plan comparison

Build a comparison of three phone plans (Basic, Plus, Max) across at least three features (for example Price, Data per day, Validity). It must work for screen readers and on a narrow phone screen.

Intermediate