Map the real grid with JavaScript
This is the browser's placement rule in a few lines of code: find the first free slot, then mark every slot the cell covers. A two-level header: Round spans two columns and Player spans two rows.
colspan stretches a cell across several columns and rowspan stretches it down several rows; each spanning cell takes over grid slots, so you must remove the cells it replaces.
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 3-column table (Day, Morning, Evening) for two days where Saturday's single activity Trip covers both Morning and Evening.
Build a table where one teacher's name, Mrs Rao, covers two rows of subjects: Maths and Physics.
Explain it without notes
Explain what colspan and rowspan do, and what you must remove from the HTML when you use each.
How does the browser decide which column a cell lands in?
Why can cell.cellIndex differ from the column a cell appears in?
When should you avoid spans even if they would make the table look neater?
Preview
Console
Nothing logged yet.Expected console output
Player | Round | Round
Player | 1 | 2
Asha | 8 | 9
Ravi | 7 | 10