Topic 40 of 57 7. HTML Tables Interactive Tutorial

HTML Colspan and Rowspan: How to Merge Table Cells

13 mins read Last updated: 12 Nov 2026 17,100 views

On This Page0 sectionsQuick jump to subtopic

Topic Overview & Definition

Key Question

How do you merge cells horizontally and vertically using colspan and rowspan in HTML tables?

Direct Answer & Overview

HTML cell merging is achieved using the 'colspan' and 'rowspan' attributes on and elements. 'colspan="N"' merges a cell horizontally across N columns. 'rowspan="N"' merges a cell vertically across N rows. When merging cells, subsequent overlapping cells in the grid must be removed to avoid distorted layouts.

Comprehensive Step-by-Step Concepts

1) The Colspan Attribute (Horizontal Spanning): - Merges a cell across two or more adjacent columns in the same row. - Syntax: Full Contact Info - Because one cell now occupies two column positions, you must remove one or from that row to maintain the correct total column count. 2) The Rowspan Attribute (Vertical Spanning): - Merges a cell across two or more adjacent rows in the same column. - Syntax: Department Head - The cell stretches downward into subsequent rows. Therefore, in the subsequent rows, the cell for that column position must be omitted. 3) Common Pitfalls & Broken Grids: If you declare 'colspan="2"' but forget to delete the sibling cell, the table will 'overflow' with an unwanted protruding cell at the end of the row. 4) Combining Colspan and Rowspan: Complex matrices (such as academic timetables, flight itineraries, and balance sheets) frequently combine both attributes on a single cell (e.g. ). 5) Accessibility Considerations: Screen readers can easily become confused by deeply irregular colspan and rowspan matrices. Always test merged tables with assistive technology or use 'headers' and 'id' attributes to maintain explicit cell relationships.

Runnable HTML5 Code Example & Practical Implementation

index.html

HTML Editor

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Colspan and Rowspan Showcase</title>
    <style>
        table { border-collapse: collapse; width: 100%; max-width: 600px; font-family: sans-serif; }
        th, td { border: 1px solid #475569; padding: 10px; text-align: center; }
        th { background: #334155; color: white; }
        .merged-header { background: #1e293b; }
        .side-span { background: #f1f5f9; font-weight: bold; }
    </style>
</head>
<body>
    <h2>Conference Schedule (Cell Merging)</h2>
    <table>
        <thead>
            <tr>
                <th rowspan="2">Day</th>
                <th colspan="2" class="merged-header">Morning Sessions</th>
                <th rowspan="2">Lunch Break</th>
                <th rowspan="2">Afternoon Workshop</th>
            </tr>
            <tr>
                <th>09:00 - 10:30</th>
                <th>10:45 - 12:15</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td class="side-span">Day 1</td>
                <td>Keynote Address</td>
                <td>HTML5 Semantics</td>
                <!-- Lunch spans both Day 1 and Day 2 vertically! -->
                <td rowspan="2" style="background: #fef08a;">Catered Buffet (12:15 - 13:30)</td>
                <td>CSS Grid Mastery</td>
            </tr>
            <tr>
                <td class="side-span">Day 2</td>
                <td>Microservices API</td>
                <td>Modern TypeScript</td>
                <!-- Notice: Lunch cell is omitted here because Day 1 rowspans it! -->
                <td>Security Audits</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

Key Takeaways, Best Practices & Standards

Best Practice & Standards

Count your total columns carefully when using colspan and rowspan. Omit overlapping cells in subsequent rows to prevent broken table grids.

Common Technical & Interview Questions

Q1: What happens if you define colspan="3" on a but do not remove the corresponding sibling cells from the row?

A1: The row will contain more cells than the table's defined column count, causing the extra cells to jut out past the table border, creating an ugly, broken grid layout.

Q2: How do screen readers interpret cells with rowspan and colspan?

A2: Modern screen readers announce the coordinates and cell span (e.g. 'spanning 2 rows and 2 columns'). However, overly complex spanning matrices can disorient visually impaired users.

Q3: Can colspan="0" be used in HTML?

A3: In HTML specifications, 'colspan="0"' instructs the browser to span the cell across all remaining columns in the column group. However, browser implementation support is inconsistent, so explicit integer numbers (e.g. colspan="4") should always be used.

All HTML Topics

Previous TopicHTML Colgroup Tag: Structure, Attributes, and Examples

Next TopicHTML Forms: Syntax, Elements, Attributes, and Examples