HTML Tables (<table>, <tr>, <th>, <td>)
Tables are designed strictly for tabular data (rows and columns of numbers, specs, or comparison charts). A <table> contains rows <tr>, header cells <th>, and data cells <td>.
"Think of an Excel spreadsheet. <table> is the whole spreadsheet sheet. <tr> is each numbered horizontal row (Row 1, Row 2). <th> is the bold column header ("Language", "Execution Time"), and <td> is each individual cell containing data."
Deep Dive: How It Works
<table>: The master table wrapper.
<tr>: "Table Row". Every horizontal line of data is a <tr>.
<th>: "Table Header cell". Renders text bold and centered by default, indicating column or row titles.
<td>: "Table Data cell". Contains standard cell values.
Semantic Table Sections: Use <thead> (header rows), <tbody> (main data rows), and <tfoot> (totals row) for large datasets.
Syntax Blueprint
<table> <tr><th>Language</th><th>Speed</th></tr> <tr><td>C++</td><td>Fast</td></tr> </table>
Rows (tr) holding header cells (th) or standard data cells (td).
Core Rules to Remember
Common Beginner Traps & How to Fix Them
Putting text directly inside <table> without <tr> and <td>Why it happens: Forgetting that tables require strict hierarchical row/cell structure.
How to fix: Always wrap cells in <tr> tags: <table><tr><td>Value</td></tr></table>.
Live Interactive Example
Hit Run Code to see it liveYour Turn: Micro Challenge
No pressure! Edit the starter code below and test your solution with instant feedback.
Build a 2-row table
- Create a <table> with a <tr> row containing two <th> headers: "Item" and "Price"
- Add a second <tr> row containing two <td> cells: "Coffee" and "$3"
Finished reading and practicing?
Mark this lesson as completed to update your course progress.