BitWithBite
HTML Worksheet
🌐 Colspan & Rowspan
SCORE___ / 20
NameClassDate
After this worksheet you can
Merge columns with colspanMerge rows with rowspanKeep cell counts consistentPlan merged layouts📚 Quick Recap
Real-world tables often need cells that span multiple columns (like a full-width header) or multiple rows (like a recurring label on the left). The colspan and rowspan attributes do exactly that — but they require careful accounting so the browser knows which cells to remove to make room for the spanning cell.
🧠 Section A · Concept Check ● BEGINNER 4 × 1 = 4
1Merge two columns with:
2Merge two rows with:
3A cell with colspan=3 replaces:
4After rowspan=2 the next row needs:
🧮 Section B · Problem Solving ● INTERMEDIATE 2 + 3×3 = 11
5colspan merges (horizontally).
6rowspan merges (vertically).
7Header spanning 3 columns - write it.
8Cell spanning 2 rows - write it.
9Why plan merges on paper first?
🚀 Section C · Challenge ● CHALLENGE 5
10colspan vs rowspan in one line?
💭 Reflection — the most useful thing I learned:
A ___/4 B ___/11 C ___/5 Total ___/20
Teacher's Signature
Parent's Signature
✂ answer key — fold or cut before handing out
1-A 2-A 3-A 4-A | 5 columns 6 rows 7 = <th colspan="3">Results</th> 8 = <td rowspan="2">...</td> 9 = Cell counts change per row - easy to break alignment | 10 = colspan = across; rowspan = down