The Building Blocks of a Table
A table is built from three tags working together: <table> wraps the whole thing, <tr> ("table row") holds one row, and <td> ("table data") holds one cell within a row.
<table> <tr> <th>Day</th> <th>Topic</th> </tr> <tr> <td>1</td> <td>Intro & Setup</td> </tr> </table>
<th> ("table header") looks like <td> but marks a cell as a heading for its row or column — browsers bold and center it by default, and screen readers announce it differently.
- ✓Every <td> and <th> must sit inside a <tr>, and every <tr> must sit inside a <table>.
- ✓Use <th> for column and row labels — never <td> with bold text pretending to be a header.
- ✓Tables are for genuinely tabular data — never use them to lay out a whole page.
thead, tbody, tfoot & caption
For anything beyond a tiny table, group your rows into three semantic sections: <thead> for the header row, <tbody> for the actual data, and <tfoot> for any summary row at the bottom. A <caption> gives the whole table a title.
<table> <caption>Weekly Study Hours</caption> <thead> <tr> <th>Subject</th> <th>Hours</th> </tr> </thead> <tbody> <tr> <td>HTML</td> <td>5</td> </tr> <tr> <td>CSS</td> <td>3</td> </tr> </tbody> <tfoot> <tr> <td>Total</td> <td>8</td> </tr> </tfoot> </table>
| Subject | Hours |
|---|---|
| HTML | 5 |
| CSS | 3 |
| Total | 8 |
colspan & rowspan
Sometimes a single cell needs to stretch across multiple columns or rows. Use colspan to span columns and rowspan to span rows.
<tr> <th colspan="2">Module 01 · HTML</th> </tr>
Makes this one cell take up the space of two columns.
Makes this one cell take up the space of two rows.
If you're reaching for a table just to line things up visually — like a page layout with a sidebar and content area — that's a job for CSS Flexbox or Grid, both coming in Module 04. Save <table> for real tabular data.
Breaking Down What You Just Learned
<table> / <tr> / <td>The core trio — table, row, and cell — that every HTML table is built from.
<th>Marks a cell as a header for its row or column, with real semantic meaning, not just bold styling.
<thead> / <tbody> / <tfoot>Group rows into header, body, and footer sections for clarity and easier styling later.
<caption>Gives the entire table a visible, accessible title.
colspan / rowspanLet a single cell stretch across multiple columns or rows.
Try It Yourself
Build a two-column, three-row table listing three of your favorite movies and their release years. Give it a <caption>, and use <th> for the "Movie" and "Year" column headers.
Build a Class Schedule Table
A properly structured data table
Create a new file called day7.html inside your course folder and build a weekly schedule table.
- Start with the full DOCTYPE, html, head, and body structure.
- Add a <table> with a <caption> describing what it shows.
- Use <thead> with a header row of <th> cells for "Day," "Subject," and "Time."
- Use <tbody> with at least four rows of data using <td>.
- Use colspan="3" on one row inside <tfoot> to display a single note spanning all three columns, like "Weekend: no classes."
- Double-check every <td> and <th> sits inside a <tr>, and every <tr> sits inside the table.
Recap
The core structure — table, row, and cell — behind every HTML table.
Marks header cells with semantic meaning, not just bold appearance.
Group rows into header, body, and footer for clarity and structure.
Stretch a single cell across multiple columns or rows.
Key Takeaways
- Tables are built from <table>, <tr>, and <td>, with <th> for headers.
- <thead>, <tbody>, and <tfoot> organize larger tables into clear sections.
- <caption> gives a table an accessible, visible title.
- colspan and rowspan merge cells across columns or rows.
- Tables are for tabular data only — never for page layout.