Real-world data rarely fits perfectly into a uniform, symmetrical 1x1 grid. Financial reports, class schedules, and pricing matrices often require certain data points to span across multiple columns or stretch down through multiple rows.
1Horizontal Expansion (Colspan)
To stretch a cell horizontally across a row, deploy the colspan attribute.
The value dictates exactly how many standard column slots that single cell should consume. For example, <td colspan="2"> instructs the browser engine to expand the cell to cover the width of two columns.
Grid Integrity Warning: If a row is designed for 3 columns, and you create one cell with colspan="2", you only have 1 column slot remaining in that row. You MUST manually remove the extraneous <td> tags from your HTML; otherwise, the browser will force the extra cells out of the table's structural boundaries, breaking the layout completely.
2Vertical Expansion (Rowspan)
While colspan stretches cells horizontally, the rowspan attribute stretches cells vertically (top-to-bottom).
If you apply <td rowspan="2">, that single cell occupies its designated slot in the current row (<tr>) AND it pushes down, forcefully occupying the corresponding slot in the row immediately beneath it.
Because it steals a slot in the subsequent row, you must physically write one fewer <td> element in that next row to prevent layout breakage.
3Creating Complex Blocks
Can a single cell expand both horizontally and vertically? Absolutely.
By combining colspan and rowspan on the exact same <td> or <th> tag, you create a large rectangular 'block' within your grid. For instance, <td colspan="2" rowspan="2"> creates a 2x2 square that consumes a total of 4 standard grid slots.
This exponentially increases the complexity of your coordinate math, as you must account for missing slots in multiple directions simultaneously.
