Several tbody sections and a footer written first
The footer is written before the bodies (old HTML 4 style), yet it is drawn last and its rowIndex is the last one. Write it last anyway: that's today's rule.
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
Body sections: 2
Total rows: 6
Footer row index: 5