One cell too many: a ghost column appears
Every row has 3 cells, which looks right, but row 3 forgot that Asha above already fills its first slot. Its cells shift right and 9 sticks out into a 4th column. Delete the second <td>Asha</td> to fix it.
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
Row 1 has 3 cells written
Row 2 has 3 cells written
Row 3 has 3 cells written