Advanced Tables & Structured Grids
What are Advanced Tables?
Think of a calendar or a complex billing ledger. Sometimes, a single cell needs to stretch across multiple columns (like a cell labeled "Weekend" wrapping Saturday and Sunday) or span multiple rows vertically.In HTML, we achieve this merging using cell attributes:
colspan="number": Merges a cell horizontally across multiple columns.rowspan="number": Merges a cell vertically across multiple rows.We also use semantic wrappers to organize table structures:
<thead>: Groups header rows.<tbody>: Groups the body data rows.<tfoot>: Groups footer summary rows (like "Total").Why does it matter?
Merging cells allows you to build complex report cards, financial sheets, and scheduling grids. Semantic tags like<thead> make large tables accessible and allow headers to repeat at the top of pages when printed.
How to write it
<table>
<tr>
<td colspan="2">Wide</td>
</tr>
</table>
colspan="2" Cell
Cell 1
Cell 2
Common Mistakes
colspan="3" but only have a 2-column table, the cell will overflow and push the table boundaries out of shape.Quick Reference
colspan="N" — Merges a cell across N columns.rowspan="N" — Merges a cell down N rows.<thead>, <tbody>, <tfoot> — Table semantic sections.Your Task
Create a `<table>` with a single row `<tr>` containing a `<td>` cell that has `colspan="2"` and text 'Wide'.
index.html
Type code above to start the lesson.
Live Preview