Sometimes you need cells that span multiple columns or rows. HTML provides colspan and rowspan attributes to merge cells horizontally or vertically, allowing you to create complex table layouts.
The Colspan Attribute
The colspan attribute makes a cell span across multiple columns (merge horizontally).
colspan-basic.html
<table border="1">
<tr>
<td colspan="2">This cell spans 2 columns</td>
<td>Regular cell</td>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
</tr>
</table>The first row has only 2 td elements, but the first one spans 2 columns, so the row still has 3 columns total.
Simple Colspan Example
colspan-example.html
<table border="1">
<thead>
<tr>
<th colspan="3">Student Information</th>
</tr>
<tr>
<th>Name</th>
<th>Age</th>
<th>Grade</th>
</tr>
</thead>
<tbody>
<tr>
<td>John Doe</td>
<td>16</td>
<td>A</td>
</tr>
<tr>
<td>Jane Smith</td>
<td>15</td>
<td>B+</td>
</tr>
</tbody>
</table>The Rowspan Attribute
The rowspan attribute makes a cell span across multiple rows (merge vertically).
rowspan-basic.html
<table border="1">
<tr>
<td rowspan="2">This cell spans 2 rows</td>
<td>Regular cell</td>
</tr>
<tr>
<td>Regular cell</td>
</tr>
</table>The second row has only 1 td element because the first cell from row 1 spans into row 2.
Simple Rowspan Example
rowspan-example.html
<table border="1">
<tr>
<th>Department</th>
<th>Employee</th>
<th>Role</th>
</tr>
<tr>
<td rowspan="2">Engineering</td>
<td>John Doe</td>
<td>Senior Developer</td>
</tr>
<tr>
<td>Jane Smith</td>
<td>DevOps Engineer</td>
</tr>
<tr>
<td rowspan="2">Marketing</td>
<td>Bob Wilson</td>
<td>Marketing Manager</td>
</tr>
<tr>
<td>Alice Brown</td>
<td>Content Writer</td>
</tr>
</table>Combining Colspan and Rowspan
You can use both colspan and rowspan on the same cell:
combined.html
<table border="1">
<tr>
<td colspan="2" rowspan="2">
This cell spans 2 columns and 2 rows
</td>
<td>Cell A</td>
</tr>
<tr>
<td>Cell B</td>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
</tr>
</table>Practical Examples
Header Spanning Multiple Columns
header-span.html
<table border="1">
<thead>
<tr>
<th rowspan="2">Product</th>
<th colspan="3">Quarterly Sales</th>
</tr>
<tr>
<th>Q1</th>
<th>Q2</th>
<th>Q3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Laptop</td>
<td>$150,000</td>
<td>$175,000</td>
<td>$200,000</td>
</tr>
<tr>
<td>Desktop</td>
<td>$100,000</td>
<td>$110,000</td>
<td>$125,000</td>
</tr>
</tbody>
</table>Schedule with Time Blocks
schedule.html
<table border="1">
<thead>
<tr>
<th>Time</th>
<th>Monday</th>
<th>Tuesday</th>
<th>Wednesday</th>
</tr>
</thead>
<tbody>
<tr>
<td>9:00 AM</td>
<td>Math</td>
<td rowspan="2">Science Lab</td>
<td>History</td>
</tr>
<tr>
<td>10:00 AM</td>
<td>English</td>
<td>Math</td>
</tr>
<tr>
<td>11:00 AM</td>
<td colspan="3">Assembly</td>
</tr>
</tbody>
</table>Pricing Table
pricing.html
<table border="1">
<thead>
<tr>
<th colspan="4">Pricing Plans</th>
</tr>
<tr>
<th>Feature</th>
<th>Basic</th>
<th>Pro</th>
<th>Enterprise</th>
</tr>
</thead>
<tbody>
<tr>
<td>Storage</td>
<td>10 GB</td>
<td>100 GB</td>
<td>Unlimited</td>
</tr>
<tr>
<td>Users</td>
<td>1</td>
<td>5</td>
<td>Unlimited</td>
</tr>
<tr>
<td>Support</td>
<td>Email</td>
<td colspan="2">24/7 Phone & Email</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Price</td>
<td>$9/mo</td>
<td>$29/mo</td>
<td>$99/mo</td>
</tr>
</tfoot>
</table>Complex Report
complex-report.html
<table border="1">
<thead>
<tr>
<th rowspan="2">Region</th>
<th colspan="2">Revenue</th>
<th colspan="2">Expenses</th>
<th rowspan="2">Profit</th>
</tr>
<tr>
<th>2023</th>
<th>2024</th>
<th>2023</th>
<th>2024</th>
</tr>
</thead>
<tbody>
<tr>
<td>North</td>
<td>$500K</td>
<td>$600K</td>
<td>$300K</td>
<td>$350K</td>
<td>$250K</td>
</tr>
<tr>
<td>South</td>
<td>$400K</td>
<td>$450K</td>
<td>$250K</td>
<td>$275K</td>
<td>$175K</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Total</td>
<td>$900K</td>
<td>$1,050K</td>
<td>$550K</td>
<td>$625K</td>
<td>$425K</td>
</tr>
</tfoot>
</table>Product Comparison
comparison.html
<table border="1">
<thead>
<tr>
<th colspan="4">Smartphone Comparison</th>
</tr>
<tr>
<th>Feature</th>
<th>Model A</th>
<th>Model B</th>
<th>Model C</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="3">Display</td>
<td>6.1"</td>
<td>6.5"</td>
<td>6.7"</td>
</tr>
<tr>
<td>OLED</td>
<td colspan="2">Super AMOLED</td>
</tr>
<tr>
<td>60Hz</td>
<td>90Hz</td>
<td>120Hz</td>
</tr>
<tr>
<td>Camera</td>
<td>12MP</td>
<td>48MP</td>
<td>108MP</td>
</tr>
<tr>
<td>Battery</td>
<td>3000mAh</td>
<td colspan="2">4500mAh</td>
</tr>
</tbody>
</table>Calculating Cell Counts
When using colspan and rowspan, you must ensure each row has the correct total number of columns:
💡 Important Rule:
Total columns per row = (number of cells) + (sum of extra colspan values)
If a cell has colspan="2", it counts as 2 columns but is only 1 cell.
Example Calculation
calculation.html
<table border="1">
<!-- Row 1: 1 cell with colspan="3" = 3 columns total -->
<tr>
<td colspan="3">Header</td>
</tr>
<!-- Row 2: 3 cells = 3 columns total -->
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
</tr>
<!-- Row 3: 2 cells, first has colspan="2" = 2+1 = 3 columns total -->
<tr>
<td colspan="2">Spans 2</td>
<td>Cell 3</td>
</tr>
</table>Common Mistakes
❌ Common mistakes:
- Incorrect column count (rows don't align)
- Forgetting cells that are covered by rowspan
- Using colspan/rowspan values larger than needed
- Overlapping cells (impossible layouts)
- Not accounting for spanned cells in subsequent rows
Incorrect Example
wrong.html
<!-- ❌ Wrong: Second row has too many cells -->
<table border="1">
<tr>
<td colspan="2">Spans 2</td>
<td>Cell</td>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td> <!-- This creates 4 columns, misalignment! -->
</tr>
</table>
<!-- ❌ Wrong: Forgetting rowspan in next row -->
<table border="1">
<tr>
<td rowspan="2">Spans 2 rows</td>
<td>Cell</td>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td> <!-- Too many cells! First cell is spanned from above -->
</tr>
</table>Correct Example
correct.html
<!-- ✅ Correct: Consistent column count -->
<table border="1">
<tr>
<td colspan="2">Spans 2</td>
<td>Cell</td>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
</tr>
</table>
<!-- ✅ Correct: Accounting for rowspan -->
<table border="1">
<tr>
<td rowspan="2">Spans 2 rows</td>
<td>Cell</td>
</tr>
<tr>
<td>Cell 2</td> <!-- Only one cell because first is spanned -->
</tr>
</table>Debugging Spanning Issues
🔧 Debugging Tips:
- Add border="1" temporarily to visualize structure
- Count columns in each row to ensure consistency
- Draw the table on paper before coding
- Build complex tables incrementally, testing at each step
- Use browser DevTools to inspect cell positions
- Check for missing or extra cells
- Validate HTML with W3C validator
Accessibility Considerations
♿ Accessibility with Spanning:
- Screen readers announce colspan and rowspan values
- Use scope attribute on header cells that span
- Keep spanning simple when possible
- Test with screen readers to ensure comprehension
- Consider providing alternative text descriptions for complex tables
- Use headers attribute for complex associations
accessible-spanning.html
<table border="1">
<thead>
<tr>
<th scope="col" rowspan="2">Product</th>
<th scope="colgroup" colspan="2">Sales</th>
</tr>
<tr>
<th scope="col">2023</th>
<th scope="col">2024</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Laptop</th>
<td>$500K</td>
<td>$600K</td>
</tr>
</tbody>
</table>Best Practices
✅ Do:
- Plan complex tables before coding
- Use spanning sparingly and only when needed
- Ensure consistent column counts across rows
- Test tables with borders visible during development
- Keep tables as simple as possible
- Use scope attribute with spanning header cells
- Document complex table structures with comments
❌ Don't:
- Overuse spanning - keep tables simple
- Create overly complex nested spanning
- Forget to count columns when adding spans
- Use tables for layout (use CSS instead)
- Create inaccessible complex tables
- Forget to test on different screen sizes
Styling Spanned Cells
span-styles.css
/* Style cells that span */
td[colspan] {
text-align: center;
font-weight: bold;
background-color: #f0f0f0;
}
td[rowspan] {
vertical-align: middle;
background-color: #e8f4f8;
}
/* Specific styling */
th[colspan="3"] {
background-color: #4CAF50;
color: white;
font-size: 1.2em;
}
/* Highlight spanned areas */
.highlight-span {
background-color: #fffacd;
border: 2px solid #ffd700;
}Key Takeaways
colspanmerges cells horizontally (across columns)rowspanmerges cells vertically (across rows)- You can use both colspan and rowspan on the same cell
- Each row must have consistent total column count
- Account for spanned cells when building subsequent rows
- Use scope attribute on spanning header cells
- Plan complex tables before coding
- Keep spanning simple for better accessibility
What's Next?
Now that you understand how to span columns and rows, you're ready to learn about table captions. In the next lesson, we'll explore the caption element for adding descriptive titles to tables.