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.
4Step-by-Step Breakdown
Introduction to Advanced Grid Logic. 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. Today, we are mastering 'Cell Merging'—the architectural technique of using HTML attributes to forcefully manipulate the dimensions of table cells, allowing us to build complex, irregular data grids.
Horizontal Expansion with Colspan. To stretch a cell horizontally across a row, we use the colspan attribute. The value you provide dictates exactly how many column slots that single cell should consume. For example, <td colspan="2"> instructs the browser to expand the cell to cover the width of two standard columns. This is frequently used for creating sub-headers that categorize several columns beneath them.
The Colspan Math. The most common mistake when using colspan is forgetting to adjust the rest of the row. If a row is designed to hold 3 columns, and you create one cell with colspan="2", you only have 1 column slot remaining in that row. You MUST remove the extraneous <td> tags from your HTML; otherwise, the browser will force the extra cells out of the table's structural boundaries, breaking your layout completely.
Checkpoint: Table manipulation requires precise architectural math. If your table is designed to have exactly four columns, and your first cell in a row has the attribute colspan="3", how many standard <td> cells must you write after it to perfectly complete that row?
- →1
- →2
- →3
- →4
Vertical Expansion with Rowspan. While colspan stretches cells left-to-right, the rowspan attribute stretches cells top-to-bottom. If you apply <td rowspan="2">, that cell will occupy its designated slot in the current row (<tr>) AND it will push down, occupying the corresponding slot in the row immediately below it. This is typically used to create side-headers or category labels that apply to multiple rows of data.
Checkpoint: Visualizing the grid is crucial for debugging layouts. True or False? If you apply rowspan="3" to a cell in Row 1, you must physically write one fewer <td> element in Row 2 and Row 3, because that slot is already occupied by the expanded cell from Row 1.
- →True (The slot is occupied)
- →False (You must still write empty cells)
Combining Colspan and Rowspan. 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 'block' within your grid. For instance, <td colspan="2" rowspan="2"> creates a 2x2 square. However, this exponentially increases the complexity of your row math, as you must account for missing slots in multiple directions.
Checkpoint: If you apply <td colspan="2" rowspan="2"> to a cell, how many total standard 1x1 grid slots is that single cell consuming across the entire table structure?
- →2 slots
- →3 slots
- →4 slots
- →8 slots
Accessibility Implications of Merged Cells. Merged cells create significant challenges for screen readers. When a header spans multiple columns (colspan), assistive technology struggles to determine which data cells belong to it. To fix this, you must explicitly declare the scope of the header. Use <th colspan="2" scope="colgroup"> to ensure the screen reader correctly announces the header for all underlying columns.
Table Mastery Achieved. Merging mastery is complete! You now possess the architectural knowledge to manipulate the HTML grid with surgical precision, stretching cells across columns and rows to accommodate complex data structures. With this final skill, our module on Data Tables is concluded. Up next, we begin our journey into 'Forms & User Input'—the gateway to interactivity and data collection on the web.
Span A Cell Across Columns. colspan merges a cell across multiple columns in the same row.
Level Up 🚀
Advanced cheat sheets, SEO tricks, and interview prep for this topic.
Browser Support
Fully supported.
Fully supported.
Fully supported.
Fully supported.
Accessibility (A11y)
1Spanning Cells Make `scope` and `headers` Even More Critical
When a header spans multiple columns or rows via `colspan`/`rowspan`, the relationship between a data cell and its header is no longer positionally obvious — screen readers need explicit `scope`, or for very complex tables, the `headers`/`id` attribute pairing, to correctly announce context.
2Avoid `colspan`/`rowspan` Purely for Visual Effect
If cells are merged purely to achieve a visual layout with no genuine data relationship (e.g., faking a banner row), consider whether a caption or a separate element outside the table would communicate the same thing without complicating the table's actual data structure for assistive tech.
SEO Implications
- 1
Complex Merged-Cell Tables Are Still Eligible for Rich Results
Search engines can parse tables using `colspan`/`rowspan` as long as the underlying `<th>`/`<td>` structure is otherwise valid — but overly complex spanning patterns increase the risk of misparsing, so keep merges as simple as the data genuinely requires.
- 2
Don't Use Table Cell Spanning to Fake a Non-Tabular Layout
Using `colspan`/`rowspan` tricks to force a table into behaving like a page layout grid (rather than representing genuinely related tabular data) is a legacy anti-pattern that confuses crawlers about the actual content structure — use CSS Grid for pure layout instead.
Best Practices
Double-Check Column Math After Adding Any `colspan`
Every row in a table must sum to the same total column count. A `colspan="3"` cell in one row means every other row's `<td>` count must account for that same 3-column total, or the grid visually misaligns.
Prefer `scope` Over the `headers`/`id` Pairing Unless the Table Is Genuinely Multi-Dimensional
`scope="col"`/`scope="row"` handles the vast majority of real-world tables correctly and is much simpler to write and maintain. Reserve the more verbose `headers`/`id` attribute pairing for tables where a data cell genuinely relates to multiple non-adjacent headers.
Frequent Bugs
After adding a `colspan` to one cell, all the rows beneath it appear shifted and misaligned.
The total column count implied by `colspan` values must match across every row. Recount: if one row has a cell spanning 3 columns, every other row needs its `<td>`/`<th>` count (accounting for their own spans) to add up to that same total.
A screen reader announces a spanned header cell's content but data cells beneath it lose that context.
The spanning `<th>` is missing an explicit `scope="col"` or `scope="colgroup"`. Spanning cells need scope declared even more reliably than single-column headers, since the visual merge gives no positional hint to non-visual users.
Real-World Examples
Merged Header Row for a Grouped Data Table
A comparison table uses a spanning header to group two related columns under one label, with explicit scope so screen readers correctly announce the grouping relationship to every cell beneath it.
<table>
<tr><th colspan="2" scope="colgroup">2024 Pricing</th></tr>
<tr><th scope="col">Monthly</th><th scope="col">Annual</th></tr>
<tr><td>$29</td><td>$290</td></tr>
</table>