Module 5 of 10 · 5 lessons
HTML Tables Tutorial: Rows, Headers, colspan, rowspan
Rows, cells, headers, captions, spanning, and when a table is wrong.
Use a table when the data has rows and columns: a bus timetable, a price list, league results, a side-by-side comparison. This module shows you how to build tables that are correct, easy to read and usable with a screen reader.
In Table Basics you build a grid from <table>, rows (<tr>) and data cells (<td>), following the rules for the table element (opens in a new tab) in the HTML standard. Headers and Captions adds header cells with <th> and a title with <caption>. Do not skip the header cells. A screen reader uses them to announce which row and column a value belongs to. Spanning Cells covers colspan and rowspan for cells that stretch over several columns or rows. Most table bugs start here.
Last comes Tables Are Not Layout. Building whole page layouts out of tables is a habit from the 1990s. Layout tables confuse screen readers and fall apart on small screens. Today CSS does the layout, and tables hold tabular data.
The module ends with a class timetable project: a weekly schedule with a caption, header cells and one lesson that spans two periods. Plan about 45 minutes. Check each row as you go, because once spans are counted, every row has to fill the same number of columns. The challenges include timetable and pricing table puzzles if you want more.
What you will learn
- Build a table out of table, tr, th and td elements
- Add header cells and a caption so each value has context
- Merge cells across columns and rows with colspan and rowspan
- Count cells carefully so tables with spans do not break
- Make data tables make sense to screen reader users
- Spot content that is not tabular and should not be a table
Lessons
- Table Basics Put data in a table made of rows and cells.
- Headers and Captions Give a table header cells and a caption.
- Spanning Cells Make cells span several columns or rows with colspan and rowspan.
- Tables Are Not Layout Fix the bugsRebuild a layout table as semantic page regions.
- Project: Class Timetable ProjectBuild a weekly timetable with a caption, header cells and spans.
Frequently asked questions
How do I create a table in HTML?
Start with <table>. Each row inside it is a <tr>, and each cell in a row is a <td> for data or a <th> for a header. Put a <caption> right after the opening table tag to give the table a title. Once spans are counted, every row must have the same number of columns. For a quick draft of a bigger table, a generator such as HTML Table (opens in a new tab) writes and styles the markup with a live preview.
What is the difference between colspan and rowspan?
colspan stretches a cell across several columns in its row, for example <td colspan="2">. rowspan stretches a cell down over several rows. If a cell spans two rows, the row below it needs one cell fewer, since that space is already taken. The Spanning Cells lesson walks through the counting.
Should I use tables for page layout?
No. Tables are for tabular data, where the rows and columns mean something. A table used to position page parts is hard to maintain, and screen readers announce it as data, which confuses people. It also breaks on phones. Use semantic elements for structure and CSS for layout. The W3C tables tutorial (opens in a new tab) explains how to make real data tables accessible.