Tables
This course covers HTML tables for tabular data: records in rows and attributes in columns. It starts with the spreadsheet test for choosing a table and the history of layout tables. Then it covers tr, td and th, what browsers silently fix in table markup, and the caption, thead, tbody and tfoot regions. Later lessons explain colspan and rowspan arithmetic, scope and headers for screen readers, and horizontal overflow on small screens. The last lesson builds a Rails orders index table with an empty state and a totals row.
What you'll learn
- ✓When content is tabular data and when a table is the wrong tool
- ✓How tr, td and th form rows, cells and headers, including empty cells
- ✓How caption, thead, tbody and tfoot name a table and group its rows
- ✓How colspan and rowspan work and how to keep every row's column count consistent
- ✓How scope, headers and id give screen readers correct header announcements
- ✓How to handle wide tables with a scrollable wrapper and check structure in DevTools
What tables are for (and what they ruined)
Open any admin dashboard a Rails app has ever rendered: a list of orders, users, invoices, deploys, and you'll find the same shape: rows of records, columns of attributes. Before writing a single tag, ask the question that decides whether <table> is the right tool:
Read the full lesson free →Curriculum
7 lessonsWhat tables are for (and what they ruined)
Explains when content is tabular data, the basic table tags, and why layout tables were abandoned.
Rows, cells, and what the browser fixes in silence
Covers rows, cells, column and row headers, empty cells, and the tbody and text fixes browsers apply.
thead, tbody, tfoot, and caption: a table with regions
Shows how caption names a table and how thead, tbody, tfoot, colgroup and col organize it.
colspan and rowspan: cells that cross the grid
Explains colspan and rowspan, the column accounting rule, group labels, and span use in totals and empty states.
scope and headers: tables a screen reader can navigate
Covers how screen readers announce headers, the scope attribute, headers and id, and when to split complex tables.
Tables that don't fit: overflow without breakage
Handles wide tables with an overflow-x wrapper, rejects harmful fixes, and covers sticky headers and numeric alignment.
Putting it together: a production-shaped orders table
Builds a Rails orders table combining every lesson, then breaks it on purpose and checks it with tools.