Merging Rows Using Rowspan

In this lesson, we’ll dive into the use of the rowspan attribute in HTML tables — a powerful tool for merging table cells vertically. This feature is especially useful when presenting data where multiple rows share a common category or label, such as schedules, employee departments, product types, or grouped financial information. Understanding how to use rowspan effectively will help you create tables that are cleaner, more organized, and easier to understand.

What Is the rowspan Attribute?

The rowspan attribute in HTML allows a single table cell (<td> or <th>) to extend vertically across multiple rows. It’s the counterpart of colspan, which merges cells horizontally.

Syntax Example:

<td rowspan="2">Merged Cell</td>

This means the cell will take up the space of two rows instead of one.

When to Use Rowspan in Real-World Tables

The rowspan attribute is ideal when you have a shared value or label that applies to multiple rows of related data. Here are some common real-life uses:

• Employee tables: Group employees under the same department.
• School schedules: Display subjects that span multiple time slots.
• Product listings: Combine rows for items that belong to the same category.
• Financial summaries: Merge rows under one project or cost center.

Example: Without Rowspan

Let’s take a simple example of a company department table that lists employees and their roles. Without rowspan, we have to repeat the department name for every employee:

<table border="1">
  <tr>
    <th>Department</th>
    <th>Employee Name</th>
    <th>Role</th>
  </tr>
  <tr>
    <td>Marketing</td>
    <td>Alice</td>
    <td>Designer</td>
  </tr>
  <tr>
    <td>Marketing</td>
    <td>Bob</td>
    <td>Content Strategist</td>
  </tr>
  <tr>
    <td>Sales</td>
    <td>Charlie</td>
    <td>Sales Executive</td>
  </tr>
  <tr>
    <td>Sales</td>
    <td>Dana</td>
    <td>Account Manager</td>
  </tr>
</table>

While functional, this design repeats the same department name multiple times, making it visually cluttered and harder to read.

Example: With Rowspan

Now, let’s simplify the layout using rowspan to merge department cells that apply to multiple employees:

<table border="1">
  <tr>
    <th>Department</th>
    <th>Employee Name</th>
    <th>Role</th>
  </tr>
  <tr>
    <td rowspan="2">Marketing</td>
    <td>Alice</td>
    <td>Designer</td>
  </tr>
  <tr>
    <td>Bob</td>
    <td>Content Strategist</td>
  </tr>
  <tr>
    <td rowspan="2">Sales</td>
    <td>Charlie</td>
    <td>Sales Executive</td>
  </tr>
  <tr>
    <td>Dana</td>
    <td>Account Manager</td>
  </tr>
</table>

Now, each department name appears only once, clearly indicating that multiple employees belong to the same group. The table becomes much more readable and professional.

Styling Tips for Rowspan Tables

CSS can make rowspan-based tables even more readable. Here’s how you can add clear borders, alternating colors, and subtle padding for a modern look.

<style>
    table {
      width: 100%;
      border-collapse: collapse;
    }
    th, td {
      border: 1px solid #ccc;
      padding: 10px;
      text-align: left;
    }
    th {
      background-color: #f5f5f5;
    }
    tr:nth-child(even) {
      background-color: #fafafa;
    }
  </style>

These styles make your tables look clean and consistent, which is important for business dashboards, reports, and public-facing data tables.

Practical Business Use Cases

• Employee Rosters: Group team members under their department name for clear organizational charts.
• Conference Schedules: Merge time slots where one session continues across multiple hours.
• Sales Reports: Combine multiple transactions under one region or branch office.
• Inventory Lists: Display items that belong to a shared product line.

Common Mistakes to Avoid

• Forgetting to remove duplicate cells after applying rowspan.
• Incorrect row counting — make sure the number matches the rows the cell should span.
• Mixing rowspan and colspan without planning layout alignment carefully.

Key Takeaways

• rowspan merges cells vertically to represent grouped or shared data.
• It improves readability by reducing repetition.
• Ideal for organizational, financial, or scheduling tables.
• Combine it with CSS to create clean, modern layouts.

Conclusion

The rowspan attribute is a simple yet powerful way to enhance your HTML tables. By merging related data vertically, you not only make your tables look more professional but also help readers understand relationships in your data more intuitively. Whether for business dashboards, school systems, or product catalogs — mastering rowspan ensures your tables deliver clarity and impact.