A receipt with every part
JavaScript can reach each part directly: caption, tHead, tBodies and tFoot. The green column comes from the col element.
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.
Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.
Ready for more? This phase has 5 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Build a small expense table for a trip with a caption, a thead (Item, Cost), three items in tbody and a total in tfoot.
Give the Cost column a light background using colgroup/col, and right-align the costs.
Explain it without notes
What does each of caption, thead, tbody and tfoot do, and in what order are they written?
Why can't you right-align text in a column with <col style="text-align: right">?
When would you use more than one <tbody>?
Preview
Console
Nothing logged yet.Expected console output
Caption: Receipt: Green Grocers, 12 March
Header rows: 1
Body rows: 3
Footer total: ₹540