colspan and rowspan for Spanning
Merge cells across columns and rows.
colspan and rowspan for Spanning is a free HTML Academy lesson on CoddyKit. This is lesson 3 of 4. Any 3 lessons of this learning path are free to read in full — after that, CoddyKit PRO unlocks every lesson, plus hands-on practice with a built-in code editor and a 24/7 AI tutor. It is part of the HTML Academy learning path, and your progress syncs across the web and the CoddyKit app. The HTML Academy course includes 4 lessons in total.
What Is Cell Spanning?
By default, each table cell occupies one row and one column. Spanning allows a cell to stretch across multiple columns or rows:
colspan— span multiple columns- rowspan — span multiple rows
colspan
The colspan attribute makes a cell span multiple columns:
<table>
<tr>
<th colspan="3">2024 Quarterly Sales</th>
</tr>
<tr>
<th>Q1</th>
<th>Q2</th>
<th>Q3</th>
</tr>
<tr>
<td>$10k</td>
<td>$12k</td>
<td>$15k</td>
</tr>
</table>rowspan
The rowspan attribute makes a cell span multiple rows:
<table>
<tr>
<th rowspan="2">John</th>
<td>HTML</td>
<td>95</td>
</tr>
<tr>
<!-- no th here — John's cell spans this row -->
<td>CSS</td>
<td>88</td>
</tr>
</table>colspan and rowspan Together
You can combine both attributes on a single cell:
<table>
<tr>
<th colspan="2" rowspan="2">Top-Left Corner</th>
<th>Col 3</th>
</tr>
<tr>
<td>Row 2, Col 3</td>
</tr>
<tr>
<td>Row 3, Col 1</td>
<td>Row 3, Col 2</td>
<td>Row 3, Col 3</td>
</tr>
</table>Accounting for Spanned Cells
When a cell spans multiple columns, omit those columns in the spanned rows:
<table>
<tr>
<td colspan="2">Spans 2 columns</td>
<!-- This row has: 1 td = 2 columns wide -->
<td>Third column</td>
</tr>
<tr>
<td>Col 1</td> <!-- back to 1 column each -->
<td>Col 2</td>
<td>Col 3</td>
</tr>
</table>Common Spanning Patterns
Real-world table spanning examples:
<!-- Group header spanning all data columns -->
<thead>
<tr>
<th rowspan="2">Name</th>
<th colspan="3">Test Scores</th>
</tr>
<tr>
<th>Math</th><th>Science</th><th>English</th>
</tr>
</thead>rowspan for Merged Row Headers
Use rowspan to create merged row group labels:
<tbody>
<tr>
<th rowspan="3">Frontend</th>
<td>HTML</td>
<td>Structure</td>
</tr>
<tr>
<!-- Frontend spans this row -->
<td>CSS</td>
<td>Presentation</td>
</tr>
<tr>
<td>JavaScript</td>
<td>Behavior</td>
</tr>
</tbody>colspan=0 — Full Width Cell
A colspan of 0 spans all remaining columns in a column group (rarely used):
<!-- colspan="0" spans the entire colgroup -->
<td colspan="0">Full width row</td>Spanning and Accessibility
Complex spanning tables need scope and headers attributes for screen readers:
<th scope="colgroup" colspan="3">2024 Scores</th>
<!-- scope="colgroup" applies to a spanning header -->
<!-- For complex tables, use headers attribute on td: -->
<td headers="col-q1 row-alice">95</td>Debugging Spanning Issues
Common spanning mistakes:
- Too many or too few cells in a row after spanning
- rowspan extending beyond the number of rows
- Overlapping spans (two cells claiming the same position)
Use browser DevTools to inspect the table structure if something looks wrong.
CSS for Spanning Cells
Style cells that span multiple columns or rows:
[colspan] {
text-align: center;
font-weight: bold;
background-color: #e2e8f0;
}
/* Or use attribute selectors for specific spans: */
[colspan="3"] {
background-color: #dbeafe;
}Print and Spanning
Spanning cells print correctly in modern browsers. However:
- If thead rows span columns, they repeat correctly on each printed page
- Rowspan within tbody does not repeat across page breaks
- Test complex tables in print preview before shipping
Quick Check
You have a table cell that should cover 3 columns. Which attribute do you use?
Recap: colspan and rowspan
Cell spanning essentials:
colspan— cell spans multiple columnsrowspan— cell spans multiple rows- Account for spanned cells: omit the cells the span covers
- Add
scope="colgroup"for spanning header accessibility - Use DevTools to debug layout issues
Learn HTML with an AI tutor — free
Write and run real code in your browser, get instant help from a 24/7 AI tutor, and pick up where you left off on the web or in the app.
- Courses
- 40
- Lessons
- 159
Frequently Asked Questions
Is the “colspan and rowspan for Spanning” lesson free?
Yes — any 3 lessons of the HTML Academy learning path, including “colspan and rowspan for Spanning”, are free to read in full here on the web. After that, CoddyKit PRO unlocks every lesson, plus interactive practice with a built-in code editor and a 24/7 AI tutor. The HTML Academy course includes 4 lessons in total.
What will I learn in “colspan and rowspan for Spanning”?
Merge cells across columns and rows. You practise HTML Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start HTML Academy?
No prior experience is required. HTML Academy on CoddyKit is structured for beginners through advanced learners, so you can start here or from the beginning and move at your own pace. This is lesson 3 of 4.
How long does the “colspan and rowspan for Spanning” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this HTML Academy lesson?
Yes. Every HTML Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.
All lessons in this course
- table tr td and th
- thead tbody tfoot Structure
- colspan and rowspan for Spanning
- Table Accessibility scope summary caption