Home Blog Contact

Web Design Tutorial — Lesson 23 of 27 [ Updated: 11 Aug 2026 ]

HTML colspan and rowspan Explained – Table Cells Guide

Learning Objectives

After completing this tutorial, you will be able to:

  • Understand colspan.

  • Understand rowspan.

  • Merge cells across multiple columns.

  • Merge cells across multiple rows.

  • Create more advanced HTML tables.

  • Avoid common table-cell mistakes.

Table of Contents

  1. Introduction

  2. What Is colspan?

  3. Your First colspan Example

  4. What Is rowspan?

  5. Your First rowspan Example

  6. Using colspan and rowspan Together

  7. Real-World Example

  8. Best Practices

  9. Common Beginner Mistakes

  10. Practice Exercise

  11. Assignment

  12. Summary

  13. Frequently Asked Questions

  14. Next Tutorial

Introduction

In the previous tutorials, you learned how to create tables with rows, columns, headers, and structured sections.

A normal table might look like this:

Name      Subject      Score
John      HTML         85
Sarah     CSS          92
David     JavaScript   88

But real-world tables are sometimes more complicated.

For example, a school timetable may have one heading covering several subjects.

An invoice may have a total row covering multiple columns.

A report may have one category covering several rows.

HTML provides two important attributes for these situations:

colspan → Merge columns
rowspan → Merge rows

Let's learn them step by step.

What Is colspan?

The colspan attribute allows one table cell to span across multiple columns.

Basic syntax:

<td colspan="2">Content</td>

The number tells the browser how many columns the cell should cover.

For example:

<td colspan="2">Total</td>

means that this cell occupies the space of two columns.

Your First colspan Example

Start with a normal table:

<table>

    <tr>
        <th>Name</th>
        <th>Score</th>
    </tr>

    <tr>
        <td>John</td>
        <td>85</td>
    </tr>

</table>

Now imagine you want a heading that covers both columns.

You can write:

<table>

    <tr>
        <th colspan="2">Student Information</th>
    </tr>

    <tr>
        <th>Name</th>
        <th>Score</th>
    </tr>

    <tr>
        <td>John</td>
        <td>85</td>
    </tr>

</table>

The first header now spans across both columns.

Conceptually:

+-----------------------------+
|     Student Information     |
+---------------+-------------+
| Name          | Score       |
+---------------+-------------+
| John          | 85          |
+---------------+-------------+

This is a common use of colspan.

Understanding the Number

Consider:

<th colspan="3">Student Results</th>

The 3 means:

This cell covers three columns.

If your table has four columns:

<th colspan="4">Report</th>

the cell covers all four columns.

The value should match the number of columns you want the cell to occupy.

What Is rowspan?

The rowspan attribute allows one table cell to span across multiple rows.

Example:

<td rowspan="2">Monday</td>

The cell occupies the space of two rows.

This is useful when one value applies to multiple rows.

Your First rowspan Example

Consider this table:

<table>

    <tr>
        <th>Day</th>
        <th>Subject</th>
    </tr>

    <tr>
        <td>Monday</td>
        <td>HTML</td>
    </tr>

    <tr>
        <td>Monday</td>
        <td>CSS</td>
    </tr>

</table>

We have repeated Monday.

We can instead use rowspan:

<table>

    <tr>
        <th>Day</th>
        <th>Subject</th>
    </tr>

    <tr>
        <td rowspan="2">Monday</td>
        <td>HTML</td>
    </tr>

    <tr>
        <td>CSS</td>
    </tr>

</table>

Now the Monday cell covers both subject rows.

Conceptually:

+----------+-------------+
| Day      | Subject     |
+----------+-------------+
|          | HTML        |
| Monday   +-------------+
|          | CSS         |
+----------+-------------+

This makes the structure more compact.

Using colspan and rowspan Together

You can use both attributes in the same table.

For example:

<table>

    <tr>
        <th colspan="3">Class Schedule</th>
    </tr>

    <tr>
        <th>Day</th>
        <th>Subject</th>
        <th>Time</th>
    </tr>

    <tr>
        <td rowspan="2">Monday</td>
        <td>HTML</td>
        <td>9:00 AM</td>
    </tr>

    <tr>
        <td>CSS</td>
        <td>10:00 AM</td>
    </tr>

</table>

Here:

colspan="3"

makes the first heading cover three columns.

And:

rowspan="2"

makes Monday cover two rows.

Real-World Example: Invoice

Invoices are a good example of where colspan can be useful.

<table>

    <thead>
        <tr>
            <th>Product</th>
            <th>Quantity</th>
            <th>Price</th>
        </tr>
    </thead>

    <tbody>
        <tr>
            <td>Web Design Course</td>
            <td>1</td>
            <td>$50</td>
        </tr>

        <tr>
            <td>HTML Course</td>
            <td>1</td>
            <td>$30</td>
        </tr>
    </tbody>

    <tfoot>
        <tr>
            <th colspan="2">Total</th>
            <td>$80</td>
        </tr>
    </tfoot>

</table>

Here:

<th colspan="2">Total</th>

means the Total cell occupies the first two columns.

The $80 remains in the third column.

Real-World Example: Class Schedule

Let's create a slightly more realistic schedule.

<table>

    <caption>Weekly Class Schedule</caption>

    <thead>
        <tr>
            <th colspan="3">Monday</th>
        </tr>

        <tr>
            <th>Time</th>
            <th>Subject</th>
            <th>Room</th>
        </tr>
    </thead>

    <tbody>
        <tr>
            <td>9:00 AM</td>
            <td>HTML</td>
            <td>101</td>
        </tr>

        <tr>
            <td>10:00 AM</td>
            <td>CSS</td>
            <td>102</td>
        </tr>
    </tbody>

</table>

The Monday heading covers all three columns.

Best Practices

Use colspan when information belongs across columns

Good example:

<th colspan="3">Monthly Sales</th>

This clearly indicates that the heading applies to all three columns.

Use rowspan when information applies to multiple rows

Good example:

<td rowspan="3">Monday</td>

Use it when one value logically belongs to several rows.

Keep complex tables understandable

colspan and rowspan are powerful, but using too many merged cells can make a table difficult to understand.

Start with a simple structure.

Only merge cells when there is a real reason.

Common Beginner Mistakes

Mistake 1: Incorrect colspan value

Suppose your table has three columns:

<th colspan="2">Title</th>

This only covers two columns.

If you want the heading to cover all three:

<th colspan="3">Title</th>

Mistake 2: Forgetting that merged cells replace cells

When you use:

<td colspan="2">Total</td>

you should not add another <td> in that same row for the second column.

The merged cell already occupies both columns.

Mistake 3: Incorrect number of cells after rowspan

Example:

<td rowspan="2">Monday</td>
<td>HTML</td>

The next row should not contain another cell for Monday because the original cell is already covering it.

Correct:

<tr>
    <td rowspan="2">Monday</td>
    <td>HTML</td>
</tr>

<tr>
    <td>CSS</td>
</tr>

Practice Exercise

Create this table:

+-------------------------------+
|       Web Development         |
+---------------+---------------+
| Course        | Duration      |
+---------------+---------------+
| HTML          | 2 Weeks       |
| CSS           | 3 Weeks       |
+---------------+---------------+

The first heading should use:

colspan="2"

Try writing the HTML yourself.

Assignment

Create a Weekly Schedule.

Your table should contain:

  • A heading spanning all columns.

  • Days of the week.

  • Subjects.

  • Times.

  • At least one rowspan.

  • At least one colspan.

Try to build the table from scratch.

Don't worry if the first attempt looks complicated.

The goal is to understand how merged cells affect the table structure.

Summary

In this tutorial, you learned two important HTML table attributes:

colspan → Spans multiple columns
rowspan → Spans multiple rows

For example:

<th colspan="3">Title</th>

creates a cell spanning three columns.

And:

<td rowspan="2">Monday</td>

creates a cell spanning two rows.

These features allow you to create more advanced tables for:

  • Schedules

  • Reports

  • Invoices

  • Results

  • Comparison data

Frequently Asked Questions

What does colspan="2" mean?

It means the table cell occupies two columns.

What does rowspan="2" mean?

It means the table cell occupies two rows.

Can th use colspan?

Yes.

<th colspan="3">Student Results</th>

Can td use rowspan?

Yes.

<td rowspan="2">Monday</td>

Can rowspan and colspan be used together?

Yes. They can be combined when the table structure requires it.

Next Tutorial

HTML Forms – Introduction to User Input

Forms are one of the most important parts of interactive websites.

In the next tutorial, you'll begin learning how websites collect information from users. You'll be introduced to <form>, <label>, <input>, and the basic structure of an HTML form.

← Previous Next →