A timetable with both kinds of span
Wednesday's Maths is in the 4th column on screen, but its cellIndex is 2: it counts written cells, not columns.
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
Lab rowSpan: 2
Lunch colSpan: 3
Cells written in the 10:00 row: 3
cellIndex of Wednesday's Maths: 2